From 21cc6a5da9edefd199c0b2158b85b8cd10dd901c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 11 Aug 2023 04:29:11 +0000
Subject: [PATCH] run prettier
---
content/configuration.md | 32 +++++++++++++++++---------------
1 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/content/configuration.md b/content/configuration.md
index ef0bf9b..cdf4459 100644
--- a/content/configuration.md
+++ b/content/configuration.md
@@ -58,9 +58,9 @@
}
```
-- [[making plugins#Transformers|Transformers]] **map** over content, taking a Markdown file and outputting modified content or adding metadata to the file itself (e.g. parsing frontmatter, generating a description)
-- [[making plugins#Filters|Filters]] **filter** content, taking the output of all the transformers and determining what files to actually keep and what to discord (e.g. filtering out drafts)
-- [[making plugins#Emitters|Emitters]] **reduce** over content, taking in a list of all the transformed and filtered content and creating output files (e.g. creating an RSS feed or pages that list all files with a specific tag)
+- [[making plugins#Transformers|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
+- [[making plugins#Filters|Filters]] **filter** content (e.g. filtering out drafts)
+- [[making plugins#Emitters|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
By adding, removing, and reordering plugins from the `tranformers`, `filters`, and `emitters` fields, you can customize the behaviour of Quartz.
@@ -86,13 +86,13 @@
```typescript title="quartz/cfg.ts"
export interface FullPageLayout {
- head: QuartzComponent // single component
- header: QuartzComponent[] // laid out horizontally
+ head: QuartzComponent // single component
+ header: QuartzComponent[] // laid out horizontally
beforeBody: QuartzComponent[] // laid out vertically
- pageBody: QuartzComponent // single component
- left: QuartzComponent[] // vertical on desktop, horizontal on mobile
- right: QuartzComponent[] // vertical on desktop, horizontal on mobile
- footer: QuartzComponent // single component
+ pageBody: QuartzComponent // single component
+ left: QuartzComponent[] // vertical on desktop, horizontal on mobile
+ right: QuartzComponent[] // vertical on desktop, horizontal on mobile
+ footer: QuartzComponent // single component
}
```
@@ -101,22 +101,24 @@
![[quartz-layout.png|800]]
> [!note]
-> There are two additional layout fields that are *not* shown in the above diagram.
+> There are two additional layout fields 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.
-> 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`.
Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
See [a list of all the components](./tags/component) for all available components along with their configuration options.
### Style
-Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
+
+Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
-You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
+You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
> [!note]
-> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports its styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.
+> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.
-When you're ready, see how [[build|build and preview]] Quartz locally.
\ No newline at end of file
+When you're ready, see how [[build|build and preview]] Quartz locally.
--
Gitblit v1.10.0