toc-autonumbering

borrowed from https://codingnconcepts.com/hugo/auto-number-headings-hugo/

README.md

@@ -207,6 +207,10 @@ paginate = 5
   # can be overridden in a page's front-matter
   # TocTitle = "Table of Contents" # default
 
+  # auto numbering the titles
+  # can be overridden in a page's front-matter
+  # autonumbering = false # default
+
 
 [params.twitter]
   # set Twitter handles for Twitter cards

assets/css/main.scss

@@ -32,6 +32,7 @@ body {
 .headings--one-size {
   h1,
   h2,
+  .toc-title,
   h3,
   h4,
   h5,
@@ -45,6 +46,7 @@ body {
 
   h1,
   h2,
+  .toc-title,
   h3 {
     font-size: 1.4rem;
   }

assets/css/post.scss

@@ -126,3 +126,17 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 .footnotes {
   color: transparentize($color, .5);
 }
+
+/* Auto Numbering */
+// https://codingnconcepts.com/hugo/auto-number-headings-hugo/
+body {counter-reset: h2}
+h2 {counter-reset: h3}
+h3 {counter-reset: h4}
+h4 {counter-reset: h5}
+
+article[autonumbering] h2:before {counter-increment: h2; content: counter(h2) " "}
+article[autonumbering] h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) " "}
+article[autonumbering] h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) " "}
+
+article[autonumbering] .table-of-contents ul { counter-reset: item }
+article[autonumbering] .table-of-contents li a:before { content: counters(item, ".") " "; counter-increment: item }

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<article class="post">
+<article class="post" {{ if (.Params.autonumbering | default .Site.Params.autonumbering) -}} autonumbering {{- end }}>
   <h1 class="post-title">
     <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
   </h1>
@@ -31,9 +31,9 @@
 
   {{ if (.Params.Toc | default .Site.Params.Toc) }}
     <div class="table-of-contents">
-      <h2>
+      <div class="toc-title">
         {{ (.Params.TocTitle | default .Site.Params.TocTitle) | default "Table of Contents" }}
-      </h2>
+      </div>
       {{ .TableOfContents }}
     </div>
   {{ end }}