Merge pull request #10 from underscoreHao/feature/toc

feat(style): add table of contents

README.md

@@ -50,6 +50,10 @@ The `index.md` page should use layout `home`, which is the layout that displays
 
 Another thing you can do to customize the index page is show the description of your blog between the title and the menu. To do this, just edit `config.toml` and change `params.theme_config.show_description` to `true`.
 
+### Adding table of contents
+
+You can add a table of contents by supplying the `toc: true` param to your post front matter. If you want a border around it you can also set `tocBorder: true`. The toc style behavior is handled by Goldmark and the defaults can be found in the `config.toml` file.
+
 ### Pro tips
 
 #### Dark mode for images

assets/css/main.scss

@@ -51,6 +51,11 @@ li { margin: 0.4rem 0; }
   padding: 4rem 2rem;
 }
 
+.toc {
+  border: thin solid black;
+  padding: 1rem;
+}
+
 hr {
   text-align: center;
   border: 0;

config.toml

@@ -23,6 +23,10 @@
     noHl = false
     style = 'rrt'
     tabWidth = 4
+  [markup.tableOfContents]
+    startLevel = 2
+    endLevel = 3
+    ordered = false
 
 [params]
   [params.theme_config]

layouts/_default/single.html

@@ -10,6 +10,12 @@
 
     <h1>{{ .Title }}</h1>
 
+    {{ if .Params.toc }}
+        <aside {{ if .Params.tocBorder }} class="toc" {{ end }}>
+            {{ .TableOfContents }}
+        </aside>
+    {{ end }}
+
     {{ .Content }}
 </article>
 {{ end }}

layouts/posts/single.html

@@ -10,6 +10,12 @@
 
     <h1>{{ .Title }}</h1>
 
+    {{ if .Params.toc }}
+        <aside {{ if .Params.tocBorder }} class="toc" {{ end }}>
+            {{ .TableOfContents }}
+        </aside>
+    {{ end }}
+
     {{ .Content }}
 </article>
-{{ end }}
+{{ end }}