File tree explorer sidebar.

Note

For information on how to add, remove or configure plugins, see the Configuration page.

See Explorer for detailed usage information.

Configuration

This plugin accepts the following configuration options:

YAML options (in quartz.config.yaml):

  • title: The title of the explorer. Defaults to Explorer.
  • folderClickBehavior: The behavior when a folder is clicked. Can be "link" to navigate or "collapse" to toggle. Defaults to collapse.
  • folderDefaultState: The default state of folders. Can be "collapsed" or "open". Defaults to collapsed.
  • useSavedState: Whether to use local storage to save the state of the explorer. Defaults to true.

TS override options (in quartz.ts, for callback functions that can’t be expressed in YAML):

  • sortFn: Custom sort function for ordering files and folders.
  • filterFn: Custom filter function to exclude specific nodes.
  • mapFn: Custom map function to transform node properties (e.g. display names).
  • order: Array controlling the order of operations. Defaults to ["filter", "map", "sort"].

Default options

quartz.config.yaml
- source: github:quartz-community/explorer
  enabled: true
  options:
    title: Explorer
    folderClickBehavior: collapse
    folderDefaultState: collapsed
    useSavedState: true

TS override example

quartz.ts
import * as ExternalPlugin from "./.quartz/plugins"
 
ExternalPlugin.Explorer({
  mapFn: (node) => {
    node.displayName = node.displayName.toUpperCase()
    return node
  },
})

See explorer for more examples.

API

  • Category: Component
  • Function name: ExternalPlugin.Explorer().
  • Source: quartz-community/explorer
  • Install: npx quartz plugin add github:quartz-community/explorer