From 79e828696a9e53357f61bd89c36e41555575c2c2 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 12 Aug 2023 05:47:50 +0000
Subject: [PATCH] feature docs
---
content/features/table of contents.md | 19 +++++++++++++++++++
1 files changed, 19 insertions(+), 0 deletions(-)
diff --git a/content/features/table of contents.md b/content/features/table of contents.md
index 7019115..ecc36fd 100644
--- a/content/features/table of contents.md
+++ b/content/features/table of contents.md
@@ -2,4 +2,23 @@
title: "Table of Contents"
tags:
- component
+ - plugins/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.
+
+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 your `quartz.config.ts` and `Component.TableOfContents` in your `quartz.layout.ts` to function correctly.
+
+## 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`
--
Gitblit v1.10.0