feat:toc

config.toml

@@ -22,6 +22,22 @@ taxonomies = [
 [markdown]
 highlight_code = true
 highlight_theme = "boron"
+render_emoji = false
+external_links_target_blank = true
+external_links_no_follow = true
+external_links_no_referrer = true
+smart_punctuation = false
+bottom_footnotes = true
+table_of_contents = { start_level = 2, end_level = 4 }
+
+[markdown.highlight_themes]
+light = "boron"
+dark = "dracula"
+
+[slugify]
+paths = "on"
+taxonomies = "on"
+anchors = "on"
 
 [extra]
 

sass/style.scss

@@ -4,5 +4,6 @@
 @import 'logo';
 @import 'main';
 @import 'post';
+@import 'toc';
 @import 'pagination';
 @import 'footer';

sass/toc.scss

@@ -0,0 +1,88 @@
+html {
+    scroll-behavior: smooth;
+}
+
+.toc-container {
+    position: fixed;
+    right: 150px;
+    top: 180px;
+    width: 250px;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    z-index: 10;
+    display: none;
+    
+    @media (min-width: 1400px) {
+        display: block;
+    }
+}
+
+.toc {
+    padding: 15px 0;
+    
+    &-title {
+        font-weight: bold;
+        font-size: 1.1rem;
+        margin-bottom: 12px;
+        color: var(--color);
+    }
+    
+    ul {
+        list-style: none;
+        padding-left: 0;
+        margin: 0;
+    }
+    
+    li {
+        margin: 4px 0;
+    }
+    
+    ul ul {
+        padding-left: 20px;
+        margin-top: 4px;
+    }
+    
+    a {
+        display: block;
+        text-decoration: none;
+        color: var(--color);
+        font-size: 0.9rem;
+        padding: 2px 0;
+        transition: color 0.2s ease;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        &:hover {
+            color: var(--accent);
+        }
+        
+        &:target {
+            color: var(--accent);
+            font-weight: bold;
+        }
+    }
+    
+    .toc-level-1 {
+        font-size: 0.95rem;
+        font-weight: 600;
+    }
+    
+    .toc-level-2 {
+        font-size: 0.9rem;
+    }
+    
+    .toc-level-3 {
+        font-size: 0.85rem;
+    }
+    
+    .toc-level-4,
+    .toc-level-5,
+    .toc-level-6 {
+        font-size: 0.8rem;
+    }
+}
+
+.post-content {
+    scroll-margin-top: 80px;
+}

templates/page.html

@@ -10,5 +10,37 @@
         {{ post_macros::content(page=page, summary=false, show_only_description=false) }}
         {{ post_macros::earlier_later(page=page) }}
     </div>
+    {% if page.toc %}
+    <div class="toc-container">
+        <div class="toc">
+            <div class="toc-title">目录</div>
+            <ul>
+            {% for h in page.toc %}
+                <li class="toc-level-{{ h.level }}">
+                    <a href="#{{ h.id | safe }}">{{ h.title }}</a>
+                    {% if h.children %}
+                        <ul>
+                        {% for h2 in h.children %}
+                            <li class="toc-level-{{ h2.level }}">
+                                <a href="#{{ h2.id | safe }}">{{ h2.title }}</a>
+                                {% if h2.children %}
+                                    <ul>
+                                    {% for h3 in h2.children %}
+                                        <li class="toc-level-{{ h3.level }}">
+                                            <a href="#{{ h3.id | safe }}">{{ h3.title }}</a>
+                                        </li>
+                                    {% endfor %}
+                                    </ul>
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                        </ul>
+                    {% endif %}
+                </li>
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
+    {% endif %}
 {% endblock content %}