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

feat(layout): update docs about navbar

Browse Source
This commit is contained in:
vanadium23 2024-11-13 11:39:53 +03:00
parent fd9a8579f7
commit fea6edb0db
1 changed files with 2 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/layout.md
View File

@ -9,6 +9,7 @@ Each page is composed of multiple different sections which contain `QuartzCompon
```typescript title="quartz/cfg.ts" ```typescript title="quartz/cfg.ts"
export interface FullPageLayout { export interface FullPageLayout {
head: QuartzComponent // single component head: QuartzComponent // single component
navbar: QuartzComponent[] // laid out horizontally above all content
header: QuartzComponent[] // laid out horizontally header: QuartzComponent[] // laid out horizontally
beforeBody: QuartzComponent[] // laid out vertically beforeBody: QuartzComponent[] // laid out vertically
pageBody: QuartzComponent // single component pageBody: QuartzComponent // single component
@ -32,6 +33,7 @@ These correspond to following parts of the page:
> >
> 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`.
> 3. `navbar` is a set of components that are laid out horizontally and appears _above_ all other components. All items are right aligned. By default, Quartz 4 doesn't place any components in the `navbar`.
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. 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.