| | |
|---|
| | | |
|---|
| | | 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"], |
|---|
| | |
|---|
| | | Component.Explorer({ |
|---|
| | | sortFn: (a, b) => { |
|---|
| | | if ((!a.file && !b.file) || (a.file && b.file)) { |
|---|
| | | return a.displayName.localeCompare(b.displayName) |
|---|
| | | // 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 |
|---|
| | |
|---|
| | | |
|---|
| | | 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 |
|---|
