1.5 KiB
1.5 KiB
| title | tags | ||
|---|---|---|---|
| Table of Contents |
|
Quartz can automatically generate a table of contents from a list of headings on each page. It will also show you your current scroll position on the site by marking headings you've scrolled through with a different colour.
By default, it will show all headers from H1 (# Title) all the way to H3 (### Title) and will only show the table of contents if there is more than 1 header on the page.
You can also hide the table of contents on a page by adding showToc: false to the frontmatter for that page.
[!info] This feature requires both
Plugin.TableOfContentsin yourquartz.config.tsandComponent.TableOfContentsin yourquartz.layout.tsto function correctly.
Customization
- Removing table of contents: remove all instances of
Plugin.TableOfContents()fromquartz.config.ts. andComponent.TableOfContents()fromquartz.layout.ts - Changing the max depth: pass in a parameter to
Plugin.TableOfContents({ maxDepth: 4 }) - Changing the minimum number of entries in the Table of Contents before it renders: pass in a parameter to
Plugin.TableOfContents({ minEntries: 3 }) - Collapse the table of content by default: pass in a parameter to
Plugin.TableOfContents({ collapseByDefault: true }) - Component:
quartz/components/TableOfContents.tsx - Style:
- Modern (default):
quartz/components/styles/toc.scss - Legacy Quartz 3 style:
quartz/components/styles/legacyToc.scss
- Modern (default):
- Script:
quartz/components/scripts/toc.inline.ts