diff --git a/docs/configuration.md b/docs/configuration.md index e53725f47..4efe5a39b 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -135,10 +135,11 @@ typography: { The home page is the main web page of your Quartz. The content for the home page lives in `content/index.md`, to change it see [[authoring content|the authoring content guide]]. -Customization of the home page can be achieved by conditionally hiding or unhiding components; by passing in a boolean value to the `hideOnRoot:` options in `quartz.config.ts`. The components that support this feature are: +Customization of the home page can be achieved by conditionally hiding or unhiding components; by passing in a boolean value to the `hideOnRoot{:ts}` option for the components detailed in the `defaultContentPageLayout{:ts}` variable in `quartz.config.ts`. The components that support this feature are: - [[Backlinks]] are shown by default, to hide them the configuration looks like: `Component.Backlinks({ hideOnRoot: true }){:ts}` - [[Breadcrumbs]] are hidden by default, to unhide them the configuration looks like: `Component.Breadcrumbs({ hideOnRoot: false }){:ts}` - Date and reading time are shown by default, to hide them the configuration looks like: `Component.ContentMeta({ hideOnRoot: true }){:ts}` +- [[Explorer]] is shown by default, to hide it the configuration looks like: `Component.Explorer({ hideOnRoot: true }){:ts}` A differnet method is used to configure the comment box on the home page, see [[Comments#Conditionally display comments|conditionally display comments]]. diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 3a3c1e1f9..fac72d887 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -42,6 +42,7 @@ Want to customize it even more? - 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 +- Hide on root: hide `Explorer` on the home page `content/index.md` (default to `false`). To enable this, use `Component.Explorer({ hideOnRoot: true })`. - Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]] - Component: - Wrapper (Outer component, generates file tree, etc): `quartz/components/Explorer.tsx` diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index 56784f132..1f63f132b 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -20,6 +20,7 @@ export interface Options { filterFn: (node: FileTrieNode) => boolean mapFn: (node: FileTrieNode) => void order: OrderEntries[] + hideOnRoot: boolean } const defaultOptions: Options = { @@ -48,6 +49,7 @@ const defaultOptions: Options = { }, filterFn: (node) => node.slugSegment !== "tags", order: ["filter", "map", "sort"], + hideOnRoot: false } export type FolderState = { @@ -59,7 +61,12 @@ export default ((userOpts?: Partial) => { const opts: Options = { ...defaultOptions, ...userOpts } const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory() - const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => { + const Explorer: QuartzComponent = ({ cfg, fileData, displayClass }: QuartzComponentProps) => { + // Hide explorer on root if enabled + if (opts.hideOnRoot && fileData.slug === "index") { + return null + } + return (