Customizing Collapse Status

Note

This is part of the Advanced Customizations.

In Quartz, there’s a global configuration for default collapse status of folders. In case we want to highlight the key sections of the site, while keeping others initially folded, we can use a collapsed attribute in the frontmatter of index.md.

In the following snippet, if there’s no previous state, Quartz will turn to read the config from the frontmatter. The global configuration will apply when there’s no available entry in frontmatter.

quartz/components/scripts/explorer.inline.ts

// Get folder paths for state management
const folderPaths = trie.getFolderPaths()
currentExplorerState = folderPaths.map((path) => {
  const previousState = oldIndex.get(path)
 
  // mod: while initializing, use frontmatter state first if available
  const folderNode = trie.findNode(path.split("/"))
  const folderNodeState = folderNode?.data?.frontmatter?.collapsed === 'true'
  const defaultState = opts.folderDefaultState === "collapsed"
 
  return {
    path,
    collapsed:
      previousState ??
      folderNodeState ??
      defaultState,
  }
})