| | |
|---|
| | | title: "Table of Contents" |
|---|
| | | tags: |
|---|
| | | - component |
|---|
| | | - plugin/transformer |
|---|
| | | - feature/transformer |
|---|
| | | --- |
|---|
| | | |
|---|
| | | 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. |
|---|
| | | Quartz can automatically generate a table of contents (TOC) from a list of headings on each page. It will also show you your current scrolling position on the page by highlighting headings you've scrolled through with a different color. |
|---|
| | | |
|---|
| | | 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. |
|---|
| | | You can hide the TOC on a page by adding `enableToc: false` to the frontmatter for that page. |
|---|
| | | |
|---|
| | | > [!info] |
|---|
| | | > This feature requires both `Plugin.TableOfContents` in your `quartz.config.ts` and `Component.TableOfContents` in your `quartz.layout.ts` to function correctly. |
|---|
| | | By default, the TOC shows all headings from H1 (`# Title`) to H3 (`### Title`) and is only displayed if there is more than one heading on the page. |
|---|
| | | |
|---|
| | | ## Customization |
|---|
| | | |
|---|
| | | - Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.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` |
|---|
| | | - Script: `quartz/components/scripts/toc.inline.ts` |
|---|
| | | The table of contents is a functionality of the [[TableOfContents]] plugin. See the plugin page for more customization options. |
|---|
| | | |
|---|
| | | It also needs the `TableOfContents` component, which is displayed in the right sidebar by default. You can change this by customizing the [[layout]]. The TOC component can be configured with the `layout` parameter, which can either be `modern` (default) or `legacy`. |
|---|
