| | |
| | | - Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts` |
| | | - (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout |
| | | - Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]] |
| | | - Component: |
| | | - Wrapper (Outer component, generates file tree, etc): `quartz/components/Explorer.tsx` |
| | | - Explorer node (recursive, either a folder or a file): `quartz/components/ExplorerNode.tsx` |
| | | - Component: `quartz/components/Explorer.tsx` |
| | | - Style: `quartz/components/styles/explorer.scss` |
| | | - Script: `quartz/components/scripts/explorer.inline.ts` |
| | | |
| | |
| | | ```ts title="quartz.layout.ts" |
| | | Component.Explorer({ |
| | | mapFn: (node) => { |
| | | return (node.displayName = node.displayName.toUpperCase()) |
| | | node.displayName = node.displayName.toUpperCase() |
| | | return node |
| | | }, |
| | | }) |
| | | ``` |
| | |
| | | Component.Explorer({ |
| | | filterFn: (node) => { |
| | | // set containing names of everything you want to filter out |
| | | const omit = new Set(["authoring content", "tags", "hosting"]) |
| | | return !omit.has(node.data.title.toLowerCase()) |
| | | const omit = new Set(["authoring content", "tags", "advanced"]) |
| | | |
| | | // can also use node.slug or by anything on node.data |
| | | // note that node.data is only present for files that exist on disk |
| | | // (e.g. implicit folder nodes that have no associated index.md) |
| | | return !omit.has(node.displayName.toLowerCase()) |
| | | }, |
| | | }) |
| | | ``` |
| | |
| | | Component.Explorer({ |
| | | filterFn: (node) => { |
| | | // exclude files with the tag "explorerexclude" |
| | | return node.data.tags.includes("explorerexclude") !== true |
| | | return node.data.tags?.includes("explorerexclude") !== true |
| | | }, |
| | | }) |
| | | ``` |
| | |
| | | > and passing it in. |
| | | > |
| | | > ```ts title="quartz.layout.ts" |
| | | > import { Options } from "./quartz/components/ExplorerNode" |
| | | > import { Options } from "./quartz/components/Explorer" |
| | | > |
| | | > export const mapFn: Options["mapFn"] = (node) => { |
| | | > // implement your function here |