diff --git a/docs/configuration.md b/docs/configuration.md index e29dc807b..d0eed006a 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -130,3 +130,14 @@ typography: { ... } ``` + +## Home Page + +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: + +- [[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}` + +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/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx index e378bccee..e0f21bdea 100644 --- a/quartz/components/ContentMeta.tsx +++ b/quartz/components/ContentMeta.tsx @@ -12,11 +12,13 @@ interface ContentMetaOptions { */ showReadingTime: boolean showComma: boolean + hideOnRoot: boolean } const defaultOptions: ContentMetaOptions = { showReadingTime: true, showComma: true, + hideOnRoot: false } export default ((opts?: Partial) => { @@ -24,6 +26,11 @@ export default ((opts?: Partial) => { const options: ContentMetaOptions = { ...defaultOptions, ...opts } function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) { + // Hide metadata on root if enabled + if (options.hideOnRoot && fileData.slug === "index") { + return null + } + const text = fileData.text if (text) {