Setting up Explorer Filters in Quartz

The option to hide certain note structures from the Explorer can easily be done using filter functions.

WARNING

The following changes have been applied to the following commit https://github.com/jackyzha0/quartz/commit/059848f8b0ae36e3a8fb4bd6fd3cda8531e5dce7, and might not work for future commits.

The following filter will hide notes having the frontmatter explorerexclude set to true:

Component.Explorer({
  title: "Explorer",
  filterFn: (node) => {
    return node.data?.explorerexclude !== true
  },
}),

In the file quartz.layout.ts there are two section where Explorer is being used by default:

• export const defaultContentPageLayout: PageLayout
• export const defaultListPageLayout: PageLayout

So for example, change this:

...
        { Component: Component.Darkmode() },
        { Component: Component.ReaderMode() },
      ],
    }),
    Component.Explorer(),
  ],
  right: [
...

into this:

...
        { Component: Component.Darkmode() },
        { Component: Component.ReaderMode() },
      ],
    }),
    Component.Explorer({
      title: "Explorer",
      filterFn: (node) => {
        return node.data?.explorerexclude !== true
      },
    }),
  ],
  right: [
...

However, this won’t work out of the box as explorerexclude isn’t a supported frontmatter in Quartz4. You also need to declare it as such.

You’ll have to edit these files:

• quartz/plugins/emitters/contentIndex.tsx
• quartz/plugins/transformers/frontmatter.ts

First, inside quartz/plugins/emitters/contentIndex.tsx, add the following inside export type ContentDetails {}:

explorerexclude?: boolean

Then, inside export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => { add the following after description: file.data.description ?? "",:

explorerexclude: file.data.frontmatter?.explorerexclude ?? false,

Lastly, inside quartz/plugins/transformers/frontmatter.ts, add the following to declare module "vfile" {} after the line comments: boolean | string:

explorerexclude: boolean | string

Now, if you want to hide a note structure simply add the tag explorerexclude:

---
explorerexclude: true
---