Add numbered subtitles

README.md

@@ -20,6 +20,7 @@ The successor of the original [TeXify](https://github.com/queensferryme/hugo-the
 - **DuckDuckGo search**
 - **Configurable root font size**
 - **Buymeacoffee widget**
+- **Auto numbered subtitles**
 - **Simplified config**
 - **Hugo modules support**
 - [Disqus](https://disqus.com/) & Google Analytics included
@@ -31,9 +32,15 @@ The successor of the original [TeXify](https://github.com/queensferryme/hugo-the
 
 \* Diff with the origianl texify is **bold**
 
+Visit the [demo site](https://texify2.io).
+
+**Note:** All the features are enabled on the demo site,
+but you can turn them off on your own project.
+Check both `config.toml` of the theme and of the exampleSite.
+
 ## Usage
 
-## Install as git submodule
+### Install as git submodule
 
 Install:
 
@@ -48,7 +55,7 @@ Upgrade:
 git submodule foreach git pull origin master
 ```
 
-## Install as hugo module
+### Install as hugo module
 
 Initialize hugo modules, if not done yet:
 

config.toml

@@ -43,6 +43,7 @@ showReadingTime = true
 rootFontSize = "120%"
 math = true
 enableDuckDuckGoSearchBox = true
+numberedSubtitles = false
 
 [params.commentEngine]
 code = """

exampleSite/config.toml

@@ -16,11 +16,19 @@ defaultMarkdownHandler = "goldmark"
 unsafe= true
 [markup.highlight]
 style = "tango"
+[markup.tableOfContents]
+  endLevel = 6
+  ordered = false
+  startLevel = 2
 
 [author]
 email = "me@weastur.com"
 name = "Pavel Sapezhka"
 
+[params]
+numberedSubtitles = true
+toc = true
+
 [params.commentEngine]
 code = """
 <script src="https://giscus.app/client.js"

exampleSite/content/about.md

@@ -19,6 +19,7 @@ The successor of the original [TeXify](https://github.com/queensferryme/hugo-the
 - **DuckDuckGo search**
 - **Configurable root font size**
 - **Buymeacoffee widget**
+- **Auto numbered subtitles**
 - **Simplified config**
 - **Hugo modules support**
 - [Disqus](https://disqus.com/) & Google Analytics included
@@ -32,7 +33,7 @@ The successor of the original [TeXify](https://github.com/queensferryme/hugo-the
 
 ## Usage
 
-## Install as git submodule
+### Install as git submodule
 
 Install:
 
@@ -47,7 +48,7 @@ Upgrade:
 git submodule foreach git pull origin master
 ```
 
-## Install as hugo module
+### Install as hugo module
 
 Initialize hugo modules, if not done yet:
 

exampleSite/content/post/markdown-syntax.md

@@ -21,14 +21,18 @@ This article offers a sample of basic Markdown syntax that can be used in Hugo c
 
 ## Headings
 
-The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+The following HTML `<h2>`—`<h6>` elements represent five levels of section headings. `<h1>` is for Title. `<h2>` is the highest section level while `<h6>` is the lowest. With `numberedSubtitles` param enabled, items will be numbered
 
-# H1
-## H2
+### H3
 ### H3
 #### H4
 ##### H5
+##### H5
 ###### H6
+### H3
+### H3
+#### H4
+#### H4
 
 ## Paragraph
 
@@ -40,12 +44,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
-#### Blockquote without attribution
+### Blockquote without attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-#### Blockquote with attribution
+### Blockquote with attribution
 
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
@@ -61,15 +65,15 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
     Bob | 27
   Alice | 23
 
-#### Inline Markdown within tables
+### Inline Markdown within tables
 
 | Italics   | Bold     | Code   |
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |
 
 ## Code Blocks
 
-#### Code block with backticks
+### Code block with backticks
 
 ```html
 <!doctype html>
@@ -84,7 +88,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 </html>
 ```
 
-#### Code block indented with four spaces
+### Code block indented with four spaces
 
     <!doctype html>
     <html lang="en">
@@ -97,7 +101,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
     </body>
     </html>
 
-#### Code block with Hugo's internal highlight shortcode
+### Code block with Hugo's internal highlight shortcode
 {{< highlight html >}}
 <!doctype html>
 <html lang="en">
@@ -113,19 +117,19 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 
 ## List Types
 
-#### Ordered List
+### Ordered List
 
 1. First item
 2. Second item
 3. Third item
 
-#### Unordered List
+### Unordered List
 
 * List item
 * Another item
 * And another item
 
-#### Nested list
+### Nested list
 
 * Fruit
   * Apple
@@ -135,7 +139,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
   * Milk
   * Cheese
 
-#### Numbered list
+### Numbered list
 
 1. Item 1
    1. Sub-item 1.1

exampleSite/content/post/math-typesetting.md

@@ -35,8 +35,6 @@ In this example we will be using [KaTeX](https://katex.org/)
 {{ end }}
 {{</ math.inline >}}
 
-### Examples
-
 {{< math.inline >}}
 <p>
 Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)

exampleSite/content/post/placeholder-text.md

@@ -24,13 +24,13 @@ Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silen
 4. Arcanaque montibus omnes
 5. Quidem et
 
-# Vagus elidunt
+## Vagus elidunt
 
 <svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
 
 [The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
 
-## Mane refeci capiebant unda mulcebat
+### Mane refeci capiebant unda mulcebat
 
 Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
 

exampleSite/content/post/rich-content.md

@@ -37,7 +37,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 
 ---
 
-## Meramid
+## Mermaid
 
 ```mermaid
 sequenceDiagram

layouts/_default/single.html

@@ -6,9 +6,10 @@
 {{ define "main" }}
 <main id="main" class="post">
   {{ if ne .Section "post"}}
-  <article class="content">
+  <article class="content {{ if .Site.Params.numberedSubtitles }}numbered-subtitles{{ end }}">
     {{ .Content }}
   </article>
+
   {{ else }}
   <h1>{{ .Title }}</h1>
   {{ if ne .Params.tags nil }}
@@ -24,11 +25,11 @@ <h1>{{ .Title }}</h1>
     <summary>
       <b>Table of Contents</b>
     </summary>
-    <div class="toc">{{ .TableOfContents }}</div>
+    <div class="toc {{ if .Site.Params.numberedSubtitles }}numbered-subtitles{{ end }}">{{ .TableOfContents }}</div>
   </details>
   {{ end }}
   {{ end }}
-  <article class="content">
+  <article class="content {{ if .Site.Params.numberedSubtitles }}numbered-subtitles{{ end }}">
     {{ if .Site.Params.emphasisWithDots }}
     {{ .Content | replaceRE "<strong>(\\p{Han}+?)</strong>" "<strong class=chinese>$1</strong>" | safeHTML }}
     {{ else }}

static/css/content.css

@@ -133,3 +133,99 @@
 .content ol, .content ul {
     margin-left: 1.5rem;
 }
+
+.content.numbered-subtitles {
+    counter-reset: section-h2;
+}
+
+.content.numbered-subtitles h2 {
+    counter-reset: section-h3;
+}
+
+.content.numbered-subtitles h2:before {
+    counter-increment: section-h2;
+    content: counter(section-h2) " ";
+}
+
+.content.numbered-subtitles h3 {
+    counter-reset: section-h4;
+}
+
+.content.numbered-subtitles h3:before {
+    counter-increment: section-h3;
+    content: counter(section-h2) "." counter(section-h3) " ";
+}
+
+.content.numbered-subtitles h4 {
+    counter-reset: section-h5;
+}
+
+.content.numbered-subtitles h4:before {
+    counter-increment: section-h4;
+    content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) " ";
+}
+
+.content.numbered-subtitles h5 {
+    counter-reset: section-h6;
+}
+
+.content.numbered-subtitles h5:before {
+    counter-increment: section-h5;
+    content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) "." counter(section-h5) " ";
+}
+
+.content.numbered-subtitles h6:before {
+    counter-increment: section-h6;
+    content: counter(section-h2) "." counter(section-h3) "." counter(section-h4) "." counter(section-h5) "." counter(section-h6) " ";
+}
+
+
+
+
+
+
+
+.toc.numbered-subtitles {
+    counter-reset: ul-h2;
+}
+
+.toc.numbered-subtitles li {
+    counter-reset: ul-h3;
+}
+
+.toc.numbered-subtitles li:before {
+    counter-increment: ul-h2;
+    content: counter(ul-h2) " ";
+}
+
+.toc.numbered-subtitles li li {
+    counter-reset: ul-h4;
+}
+
+.toc.numbered-subtitles li li:before {
+    counter-increment: ul-h3;
+    content: counter(ul-h2) "." counter(ul-h3) " ";
+}
+
+.toc.numbered-subtitles li li li {
+    counter-reset: ul-h5;
+}
+
+.toc.numbered-subtitles li li li:before {
+    counter-increment: ul-h4;
+    content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) " ";
+}
+
+.toc.numbered-subtitles li li li li {
+    counter-reset: ul-h6;
+}
+
+.toc.numbered-subtitles li li li li:before {
+    counter-increment: ul-h5;
+    content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." counter(ul-h5) " ";
+}
+
+.toc.numbered-subtitles li li li li li:before {
+    counter-increment: ul-h6;
+    content: counter(ul-h2) "." counter(ul-h3) "." counter(ul-h4) "." counter(ul-h5) "." counter(ul-h6) " ";
+}