| | |
|---|
| | | |
|---|
| | | By default, it shows all folders and files on your page. To display the explorer in a different spot, you can edit the [[layout]]. |
|---|
| | | |
|---|
| | | Display names for folders get determined by the `title` frontmatter field in `folder/index.md` (more detail in [[authoring content | Authoring Content]]). If this file does not exist or does not contain frontmatter, the local folder name will be used instead. |
|---|
| | | |
|---|
| | | > [!info] |
|---|
| | | > The explorer uses local storage by default to save the state of your explorer. This is done to ensure a smooth experience when navigating to different pages. |
|---|
| | | > |
|---|
| | |
|---|
| | | sortFn: (a, b) => { |
|---|
| | | ... // default implementation shown later |
|---|
| | | }, |
|---|
| | | filterFn: undefined, |
|---|
| | | filterFn: filterFn: (node) => node.name !== "tags", // filters out 'tags' folder |
|---|
| | | mapFn: undefined, |
|---|
| | | // what order to apply functions in |
|---|
| | | order: ["filter", "map", "sort"], |
|---|
| | |
|---|
| | | ```ts title="quartz/components/ExplorerNode.tsx" {2-5} |
|---|
| | | export class FileNode { |
|---|
| | | children: FileNode[] // children of current node |
|---|
| | | name: string // name of node (only useful for folders) |
|---|
| | | name: string // last part of slug |
|---|
| | | displayName: string // what actually should be displayed in the explorer |
|---|
| | | file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail |
|---|
| | | depth: number // depth of current node |
|---|
| | | |
|---|
| | |
|---|
| | | Component.Explorer({ |
|---|
| | | sortFn: (a, b) => { |
|---|
| | | if ((!a.file && !b.file) || (a.file && b.file)) { |
|---|
| | | return a.name.localeCompare(b.name) |
|---|
| | | // sensitivity: "base": Only strings that differ in base letters compare as unequal. Examples: a โ b, a = รก, a = A |
|---|
| | | // numeric: true: Whether numeric collation should be used, such that "1" < "2" < "10" |
|---|
| | | return a.displayName.localeCompare(b.displayName, undefined, { |
|---|
| | | numeric: true, |
|---|
| | | sensitivity: "base", |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | if (a.file && !b.file) { |
|---|
| | | return 1 |
|---|
| | |
|---|
| | | Component.Explorer({ |
|---|
| | | sortFn: (a, b) => { |
|---|
| | | if ((!a.file && !b.file) || (a.file && b.file)) { |
|---|
| | | return a.name.localeCompare(b.name) |
|---|
| | | return a.displayName.localeCompare(b.displayName) |
|---|
| | | } |
|---|
| | | if (a.file && !b.file) { |
|---|
| | | return -1 |
|---|
| | |
|---|
| | | ```ts title="quartz.layout.ts" |
|---|
| | | Component.Explorer({ |
|---|
| | | mapFn: (node) => { |
|---|
| | | node.name = node.name.toUpperCase() |
|---|
| | | node.displayName = node.displayName.toUpperCase() |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | ``` |
|---|
| | |
|---|
| | | |
|---|
| | | You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove. |
|---|
| | | |
|---|
| | | ### Show every element in explorer |
|---|
| | | |
|---|
| | | To override the default filter function that removes the `tags` folder from the explorer, you can set the filter function to `undefined`. |
|---|
| | | |
|---|
| | | ```ts title="quartz.layout.ts" |
|---|
| | | Component.Explorer({ |
|---|
| | | filterFn: undefined, // apply no filter function, every file and folder will visible |
|---|
| | | }) |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## Advanced examples |
|---|
| | | |
|---|
| | | ### Add emoji prefix |
|---|
| | |
|---|
| | | if (node.depth > 0) { |
|---|
| | | // set emoji for file/folder |
|---|
| | | if (node.file) { |
|---|
| | | node.name = "๐ " + node.name |
|---|
| | | node.displayName = "๐ " + node.displayName |
|---|
| | | } else { |
|---|
| | | node.name = "๐ " + node.name |
|---|
| | | node.displayName = "๐ " + node.displayName |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
