You've already forked no-js-hugo-theme
							
							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:
		@@ -11,5 +11,21 @@
 | 
			
		||||
      {{- end }}
 | 
			
		||||
    </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 }}
 | 
			
		||||
{{ end }}
 | 
			
		||||
 
 | 
			
		||||
@@ -112,6 +112,38 @@ blockquote {
 | 
			
		||||
	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 {
 | 
			
		||||
	font-size: 120%;
 | 
			
		||||
	list-style-type: none;
 | 
			
		||||
 
 | 
			
		||||
@@ -53,6 +53,11 @@ blockquote {
 | 
			
		||||
	color: rgb(150, 150, 150);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.table-of-contents {
 | 
			
		||||
	border-color: #505050;
 | 
			
		||||
	background-color: #1A1A1A;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media only screen and (max-width: 400pt) {
 | 
			
		||||
	.links {
 | 
			
		||||
		background-color: rgb(30, 30, 30);
 | 
			
		||||
 
 | 
			
		||||
@@ -37,3 +37,8 @@ blockquote {
 | 
			
		||||
.footer {
 | 
			
		||||
	color: #383838;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.table-of-contents {
 | 
			
		||||
	border-color: #E0E0E0;
 | 
			
		||||
	background-color: #FAFAFA;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user