GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-19 10:54:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge 2bc8c8e578 into e7d2a57aad

Browse Source
This commit is contained in:
Josh Sanders 2025-11-16 17:39:18 +01:00 committed by GitHub
commit 3d1b68e3c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/configuration.md
View File

@ -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]].

6
docs/layout.md
View File

@ -2,7 +2,7 @@
title: Layout 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: 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 | | Layout | Preview |
| ------------------------------- | ----------------------------------- | | ------------------------------- | ----------------------------------- |
@ -28,7 +28,7 @@ These correspond to following parts of the page:
| Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] | | Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] |
> [!note] > [!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 `<head>` [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. > 1. `head` is a single component that renders the `<head>` [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`. > 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`.

17
quartz.layout.ts
View File

@ -2,10 +2,15 @@ import { PageLayout, SharedLayout } from "./quartz/cfg"
import * as Component from "./quartz/components" import * as Component from "./quartz/components"
// components shared across all pages // 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 = { export const sharedPageComponents: SharedLayout = {
head: Component.Head(), head: Component.Head(),
header: [], header: [],
beforeBody: [],
afterBody: [], afterBody: [],
left: [],
right: [],
footer: Component.Footer({ footer: Component.Footer({
links: { links: {
GitHub: "https://github.com/jackyzha0/quartz", GitHub: "https://github.com/jackyzha0/quartz",
@ -66,3 +71,15 @@ export const defaultListPageLayout: PageLayout = {
], ],
right: [], right: [],
} }
// components for the home page
export const defaultHomePageLayout: PageLayout = {
...defaultContentPageLayout,
// head: Component.Head(),
// header: [],
// left: [],
// beforeBody: [],
// afterBody: [],
// right: [],
// footer: Component.Footer(),
}

4
quartz/cfg.ts
View File

@ -101,5 +101,5 @@ export interface FullPageLayout {
footer: QuartzComponent footer: QuartzComponent
} }
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right"> export type PageLayout = Partial<Omit<FullPageLayout, "pageBody">>
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody"> export type SharedLayout = Omit<FullPageLayout, "pageBody">

3
quartz/plugins/emitters/404.tsx
View File

@ -14,9 +14,6 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
const opts: FullPageLayout = { const opts: FullPageLayout = {
...sharedPageComponents, ...sharedPageComponents,
pageBody: NotFound(), pageBody: NotFound(),
beforeBody: [],
left: [],
right: [],
} }
const { head: Head, pageBody, footer: Footer } = opts const { head: Head, pageBody, footer: Footer } = opts

17
quartz/plugins/emitters/contentPage.tsx
View File

@ -6,7 +6,11 @@ import BodyConstructor from "../../components/Body"
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
import { pathToRoot } from "../../util/path" import { pathToRoot } from "../../util/path"
import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout" import {
defaultContentPageLayout,
defaultHomePageLayout,
sharedPageComponents,
} from "../../../quartz.layout"
import { Content } from "../../components" import { Content } from "../../components"
import { styleText } from "util" import { styleText } from "util"
import { write } from "./helpers" import { write } from "./helpers"
@ -46,7 +50,7 @@ async function processContent(
} }
export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => { export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
const opts: FullPageLayout = { let opts: FullPageLayout = {
...sharedPageComponents, ...sharedPageComponents,
...defaultContentPageLayout, ...defaultContentPageLayout,
pageBody: Content(), pageBody: Content(),
@ -81,6 +85,15 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
const slug = file.data.slug! const slug = file.data.slug!
if (slug === "index") { if (slug === "index") {
containsIndex = true containsIndex = true
opts = {
...opts,
...defaultHomePageLayout,
}
} else {
opts = {
...opts,
...defaultContentPageLayout,
}
} }
// only process home page, non-tag pages, and non-index pages // only process home page, non-tag pages, and non-index pages