Added optional page table of contents

You can use the 'tableofcontents' front matter option to enable or
disable the display of a table of contents. Setting this option will
override the new site-wide parameter 'tableofcontentswordcount' which
will automatically add a table of contents on pages with more than
the specified number of words. Set to '0' to always show a table of
contents, or set to '-1' to never show a table of contents (the
default behaviour).
This commit is contained in:
Steven Engler 2019-09-12 17:14:59 -04:00
parent 5225065445
commit 53677f19d8
4 changed files with 58 additions and 0 deletions

View File

@ -11,5 +11,21 @@
{{- end }} {{- end }}
</div> </div>
</div> </div>
{{ if or (.Params.tableofcontents) (and (ne .Params.tableofcontents false) (isset .Site.Params "tableofcontentswordcount") (ge .Site.Params.TableOfContentsWordCount 0) (gt .WordCount .Site.Params.TableOfContentsWordCount)) }}
{{/* If the front matter parameter is true, show the toc */}}
{{/* Elif the front matter parameter is false, don't show the toc */}}
{{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}}
<div class="table-of-contents">
<details open="open">
<summary>
<span class="table-of-contents-title">Table of Contents</span>
</summary>
{{ $toc := .TableOfContents -}}
{{- $toc := replaceRE `<ul>\s?<li>\s?<ul>` `<ul>` $toc -}}
{{- $toc := replaceRE `</ul>\s?</li>\s?</ul>` `</ul>` $toc -}}
{{- safeHTML $toc }}
</details>
</div>
{{ end }}
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}

View File

@ -112,6 +112,38 @@ blockquote {
font-size: 80%; font-size: 80%;
} }
.table-of-contents {
border-width: 2px;
border-style: solid;
padding: 1em;
margin-bottom: 2em;
font-size: 0.9em;
}
.table-of-contents nav > ul {
/* only the most-parent ul element */
margin-bottom: 0;
}
.table-of-contents ul {
list-style: none;
padding-left: 0;
}
.table-of-contents li {
margin-top: 0.8em;
}
.table-of-contents ul ul {
list-style: none;
padding-left: 1.5em;
}
.table-of-contents-title {
font-size: 1.2em;
font-weight: bold;
}
.links { .links {
font-size: 120%; font-size: 120%;
list-style-type: none; list-style-type: none;

View File

@ -53,6 +53,11 @@ blockquote {
color: rgb(150, 150, 150); color: rgb(150, 150, 150);
} }
.table-of-contents {
border-color: #505050;
background-color: #1A1A1A;
}
@media only screen and (max-width: 400pt) { @media only screen and (max-width: 400pt) {
.links { .links {
background-color: rgb(30, 30, 30); background-color: rgb(30, 30, 30);

View File

@ -37,3 +37,8 @@ blockquote {
.footer { .footer {
color: #383838; color: #383838;
} }
.table-of-contents {
border-color: #E0E0E0;
background-color: #FAFAFA;
}