mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-29 14:36:22 +00:00
1.3 KiB
1.3 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.
[!info] This feature requires both
Plugin.TableOfContents
in yourquartz.config.ts
andComponent.TableOfContents
in yourquartz.layout.ts
to 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 })
- 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