diff --git a/docs/configuration.md b/docs/configuration.md index 288139b29..b237422a2 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -134,3 +134,11 @@ 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]]. + +To enable easy customization, Quartz allows you to fully rearrange the layout of the home page. The default home page layout is called `defaultHomePageLayout{:ts}` and can be found in `quartz.layout.ts`. The layout of the home page is the same as all other content pages by default. See [[layout|the layout documentation]] for further guidance on changing the layout. + +A different method is used to configure the comment box on the home page, see [[Comments#Conditionally display comments|conditionally display comments]]. diff --git a/docs/layout.md b/docs/layout.md index 3f73753f5..717005f69 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -2,7 +2,7 @@ title: Layout --- -Certain emitters may also output [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) files. To enable easy customization, these emitters allow you to fully rearrange the layout of the page. The default page layouts can be found in `quartz.layout.ts`. +Certain emitters may also output [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) files. To enable easy customization, these emitters allow you to fully rearrange the layout of the page. The default page layouts can be found in `quartz.layout.ts`, and this is where customization of the layout is configured. Each page is composed of multiple different sections which contain `QuartzComponents`. The following code snippet lists all of the valid sections that you can add components to: @@ -19,7 +19,7 @@ export interface FullPageLayout { } ``` -These correspond to following parts of the page: +These correspond to following sections of the page layout: | Layout | Preview | | ------------------------------- | ----------------------------------- | @@ -28,7 +28,7 @@ These correspond to following parts of the page: | Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] | > [!note] -> There are two additional layout fields that are _not_ shown in the above diagram. +> There are two additional layout sections that are _not_ shown in the above diagram. > > 1. `head` is a single component that renders the `` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles. > 2. `header` is a set of components that are laid out horizontally and appears _before_ the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`. diff --git a/quartz.layout.ts b/quartz.layout.ts index 970a5be34..3c60ea815 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -2,10 +2,15 @@ import { PageLayout, SharedLayout } from "./quartz/cfg" import * as Component from "./quartz/components" // components shared across all pages +// If a layout section is configured for a PageLayout, the respective emitter +// will use that configuration rather than the configuration here. export const sharedPageComponents: SharedLayout = { head: Component.Head(), header: [], + beforeBody: [], afterBody: [], + left: [], + right: [], footer: Component.Footer({ links: { GitHub: "https://github.com/jackyzha0/quartz", @@ -66,3 +71,15 @@ export const defaultListPageLayout: PageLayout = { ], right: [], } + +// components for the home page +export const defaultHomePageLayout: PageLayout = { + ...defaultContentPageLayout, + // head: Component.Head(), + // header: [], + // left: [], + // beforeBody: [], + // afterBody: [], + // right: [], + // footer: Component.Footer(), +} diff --git a/quartz/cfg.ts b/quartz/cfg.ts index c97d613bb..5a1962254 100644 --- a/quartz/cfg.ts +++ b/quartz/cfg.ts @@ -101,5 +101,5 @@ export interface FullPageLayout { footer: QuartzComponent } -export type PageLayout = Pick -export type SharedLayout = Pick +export type PageLayout = Partial> +export type SharedLayout = Omit diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx index 04a006dd1..1dbe48668 100644 --- a/quartz/plugins/emitters/404.tsx +++ b/quartz/plugins/emitters/404.tsx @@ -14,9 +14,6 @@ export const NotFoundPage: QuartzEmitterPlugin = () => { const opts: FullPageLayout = { ...sharedPageComponents, pageBody: NotFound(), - beforeBody: [], - left: [], - right: [], } const { head: Head, pageBody, footer: Footer } = opts diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index c3410ecc3..40ff31415 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -6,7 +6,11 @@ import BodyConstructor from "../../components/Body" import { pageResources, renderPage } from "../../components/renderPage" import { FullPageLayout } from "../../cfg" import { pathToRoot } from "../../util/path" -import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout" +import { + defaultContentPageLayout, + defaultHomePageLayout, + sharedPageComponents, +} from "../../../quartz.layout" import { Content } from "../../components" import { styleText } from "util" import { write } from "./helpers" @@ -46,7 +50,7 @@ async function processContent( } export const ContentPage: QuartzEmitterPlugin> = (userOpts) => { - const opts: FullPageLayout = { + let opts: FullPageLayout = { ...sharedPageComponents, ...defaultContentPageLayout, pageBody: Content(), @@ -81,6 +85,15 @@ export const ContentPage: QuartzEmitterPlugin> = (userOp const slug = file.data.slug! if (slug === "index") { containsIndex = true + opts = { + ...opts, + ...defaultHomePageLayout, + } + } else { + opts = { + ...opts, + ...defaultContentPageLayout, + } } // only process home page, non-tag pages, and non-index pages