Component.Explorer({ title: "Explorer", // title of the explorer component folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click) folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open") useSavedState: true, // whether to use local storage to save "state" (which folders are opened) of explorer // Sort order: folders first, then files. Sort folders and files alphabetically sortFn: (a, b) => { ... // default implementation shown later }, filterFn: filterFn: (node) => node.name !== "tags", // filters out 'tags' folder mapFn: undefined, // what order to apply functions in order: ["filter", "map", "sort"],})
export class FileNode { children: FileNode[] // children of current node name: string // last part of slug displayName: string // what actually should be displayed in the explorer file: QuartzPluginData | null // if node is a file, this is the file's metadata. See `QuartzPluginData` for more detail depth: number // depth of current node ... // rest of implementation}
您可以传递的每个函数都是可选的。默认情况下，只会使用“排序”功能：
Default sort function
// Sort order: folders first, then files. Sort folders and files alphabeticallyComponent.Explorer({ sortFn: (a, b) => { if ((!a.file && !b.file) || (a.file && b.file)) { // 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 } else { return -1 } },})
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.name.toLowerCase()) },})
It’s also worth mentioning, that the smaller the number set in nameOrderMap, the higher up the entry will be in the explorer. Incrementing every folder/file by 100, makes ordering files in their folders a lot easier. Lastly, this example still allows you to use a mapFn or frontmatter titles to change display names, as it uses slugs for nameOrderMap (which is unaffected by display name changes).
还值得一提的是，nameOrderMap中设置的数字越小，资源管理器中的条目就越高。将每个文件夹/文件增加100，可以更容易地对文件夹中的文件进行排序。最后，此示例仍然允许您使用mapFn或元数据title来更改显示名称，因为它使用nameOrderMap的slugs（不受显示名称更改的影响）。