Explorer config

The quartzCustomizations directory exports explorerConfig, and object to configure Quartz’s native Explorer component. These customizations are:

1. Add a custom sortFn. With this function, all pages with a order frontmatter property, are sorted by that property’s value. Pages without an order frontmatter property are then sorted afterwards.
2. Set folderClickBehavior to ‘link’
3. Add a custom filterFn. With this function directories named ‘data’ (this is matched ignoring case) are excluded from the Explorer sidebar tree. This does not cause Quartz to ignore these pages — they are still rendered to html and accessible via interlinks between pages. They just will not show up in the Explorer tree view.

Further explanation of these changes can be found in the Quartz Explorer documentation

Enabling the updated Explorer configuration

1. Restore Frontmatter to the sortFn arguments (see below)
2. Open quartz.layout.ts
3. Import explorerConfig from the quartzCustomizations file
4. Replace any calls of Component.Explorer() with Component.Explorer(explorerConfig). There should be two: one in the content page layout and one in the list page layout.

Restoring Frontmatter

Note: A recent update to quartz removed frontmatter from the object that is passed to sortFn for sorting. Restoring it requires editing core quartz files. See: https://draftz.felixnie.com/Digital-Garden/Sorting-Objects-in-Explorer#add-frontmatter-back

Example Implementation

// quartz.layout.ts
 
...
import { explorerConfig } from "../quartzCustomizations"
 
 
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
	beforeBody: [...],
	left: [
		...
		// Replace:
		// Component.DesktopOnly(Component.Explorer()),
		// with:
		Component.DesktopOnly(Component.Explorer(explorerConfig)),
	],
	right: [...]
}
 
// components for pages that display lists of pages (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
	beforeBody: [...],
	left: [
		...
		// Replace:
		// Component.DesktopOnly(Component.Explorer()),
		// with:
		Component.DesktopOnly(Component.Explorer(explorerConfig)),
	],
	right: [],
}
 
...