feat: add TOC

README.md

@@ -12,6 +12,7 @@ This theme is based on Hugo theme [hugo-paper](https://github.com/nanxiaobei/hug
 - Dark mode
 - Social icons
 - Taxonomies support
+- Table of Content
 - SEO Friendly
 - Comments using [Giscus](https://giscus.app/)
 - Mathematical notations using [KaTeX](https://katex.org/)

static/main.css

@@ -1232,6 +1232,10 @@ body {
   margin-top: 4rem;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .block {
   display: block;
 }
@@ -1475,6 +1479,11 @@ body {
   padding-bottom: 1rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1507,6 +1516,18 @@ body {
   padding-top: 8rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1731,6 +1752,10 @@ article {
   background-color: rgb(0 0 0 / 2%);
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .active\:scale-95:active {
   --tw-scale-x: .95;
   --tw-scale-y: .95;

templates/page.html

@@ -6,6 +6,38 @@
     {% include "partials/page_info.html" %}
   </header>
 
+  {% if page.toc %}
+  <div class="mb-12 flex rounded-lg bg-black/[3%] p-2 text-lg dark:bg-white/[8%]">
+    <details>
+      <summary class="cursor-pointer py-1 pl-4">
+        <span>Table of Contents</span>
+      </summary>
+      <div class="px-2">
+        <ul>
+          {% for h1 in page.toc %}
+          <li>
+            <a class="no-underline hover:underline" href="{{ h1.permalink | safe }}"
+              >{{ h1.title }}</a
+            >
+            {% if h1.children %}
+            <ul>
+              {% for h2 in h1.children %}
+              <li>
+                <a class="no-underline hover:underline" href="{{ h2.permalink | safe }}"
+                  >{{ h2.title }}</a
+                >
+              </li>
+              {% endfor %}
+            </ul>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </details>
+  </div>
+  {% endif %}
+
   <section>{{ page.content | safe }}</section>
 
   <hr />