| | |
|---|
| | | 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) |
|---|
| | | return a.displayName.localeCompare(b.displayName) |
|---|
| | | } |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
