Move blog toc to left

Author: lilin90

assets/scss/custom.scss

@@ -32,3 +32,14 @@ blockquote {
     max-height: 230px; /* 最大高度，内容少时自动收缩 */
     overflow-y: auto;
 }
+
+/* 目录悬浮动效 */
+.sticky-toc {
+    transition: transform 0.3s ease;
+}
+/* 移动端隐藏目录 */
+@media (max-width: 1024px) {
+    .absolute.left-0 {
+      display: none;
+    }
+}

layouts/blog/single.html

@@ -44,10 +44,21 @@ <h1 class="h2 mb-4">
               {{ time.Format ":date_long" .PublishDate }}
             </li> -->
           </ul>
-          <div class="content mb-10">
-            {{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }}
-            {{ .Content }}
+
+          <div class="relative">
+            <!-- 独立 TOC 容器：固定在左侧 -->
+            <div class="absolute left-0 top-0 h-full lg:w-3/12 md:w-4/12 pr-4" style="transform: translateX(-100%)">
+              <div class="sticky top-20 overflow-y-auto max-h-[80vh] pe-4">
+                {{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }}
+              </div>
+            </div>
+
+            <!-- 主内容区域 -->
+            <div class="content">
+              {{ .Content }}
+            </div>
           </div>
+
           <div class="row items-start justify-between">
             {{ $tags:= .Params.tags }}
             {{ if $tags }}