From a287d11246cc0c18a9bf4435bddffc9e163e64fd Mon Sep 17 00:00:00 2001
From: meleu <meleu.dev@gmail.com>
Date: Mon, 04 Apr 2022 01:12:55 +0000
Subject: [PATCH] add a collapsible ToC
---
layouts/_default/single.html | 6 ++++--
assets/styles/base.scss | 17 +++++++++++++++++
data/config.yaml | 1 +
layouts/index.html | 6 ++++--
4 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index aa172d0..38c1f53 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -23,6 +23,23 @@
padding: revert;
}
+.mainTOC {
+ background: var(--lightgray);
+ border-radius: 8px;
+ padding: 0.8em;
+}
+
+.mainTOC details summary {
+ cursor: zoom-in;
+ font-family: Inter;
+ color: var(--dark);
+ font-weight: 700;
+}
+
+.mainTOC details[open] summary {
+ cursor: zoom-out;
+}
+
#TableOfContents > ol {
counter-reset: section;
margin-left: 0em;
diff --git a/data/config.yaml b/data/config.yaml
index c59c0e0..e33c329 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -1,5 +1,6 @@
name: Jacky Zhao
enableToc: true
+openToc: false
enableLinkPreview: true
enableLatex: true
description:
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3423a0c..02965f9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -24,8 +24,10 @@
</ul>
{{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
<aside class="mainTOC">
- <h3>Table of Contents</h3>
- {{ .TableOfContents }}
+ <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+ <summary>Table of Contents</summary>
+ {{ .TableOfContents }}
+ </details>
</aside>
{{end}}
{{partial "textprocessing.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 6fb75f9..466a05a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,8 +15,10 @@
<article>
{{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
<aside class="mainTOC">
- <h3>Table of Contents</h3>
- {{ .TableOfContents }}
+ <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+ <summary>Table of Contents</summary>
+ {{ .TableOfContents }}
+ </details>
</aside>
{{end}}
{{partial "textprocessing.html" . }}
--
Gitblit v1.10.0