文章详情页增加目录索引

CYRUS-STUDIO · Sep 16, 2024 · dc5c8af · dc5c8af
1 parent 337a435
commit dc5c8af
Show file tree

Hide file tree

Showing 34 changed files with 527 additions and 44 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
diff --git a/hugo.toml b/hugo.toml
@@ -26,3 +26,6 @@ theme = "m10c"
 
 [params.style]
   primaryColor = "#87CEFA"
+
+[params]
+  customCSS = ["css/custom.css"]
diff --git a/public/404.html b/public/404.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 

diff --git a/public/about/index.html b/public/about/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -65,9 +65,23 @@ <h1 class ="post-title">About</h1>
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>
diff --git a/public/categories/index.html b/public/categories/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
     <link rel="alternate" type="application/rss+xml" href="https://cyrus-studio.github.io/blog/categories/index.xml" title="CYRUS STUDIO">
 
 

diff --git a/public/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css b/public/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css
diff --git a/public/css/main.min.1b0bf2b31cb0f514c537ceb35ddbd58adbdcbcc1d430e6d4a1f0384df4d59832.css b/public/css/main.min.1b0bf2b31cb0f514c537ceb35ddbd58adbdcbcc1d430e6d4a1f0384df4d59832.css
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="Android &amp; Python Developer" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
     <link rel="alternate" type="application/rss+xml" href="https://cyrus-studio.github.io/blog/index.xml" title="CYRUS STUDIO">
 
 

diff --git a/public/js/toc.js b/public/js/toc.js
@@ -0,0 +1,72 @@
+// 等待 DOM 加载完成
+document.addEventListener('DOMContentLoaded', function () {
+  const tocToggle = document.getElementById('toc-toggle');
+  const tocContainer = document.getElementById('toc');
+  const contentArea = document.querySelector('.post-content'); // 根据你的内容区域的类名调整
+
+  // 生成目录函数
+  function generateTOC() {
+    const headings = contentArea.querySelectorAll('h1, h2, h3');
+    console.log("Headings found:", headings); // 输出找到的标题元素
+    if (headings.length === 0) {
+      // 如果没有找到标题，隐藏浮动按钮
+      tocToggle.style.display = 'none';
+      return;
+    }
+
+    const tocList = document.createElement('ul');
+
+    headings.forEach(function (heading) {
+      if (!heading.id) {
+        // 如果标题没有 id，生成一个
+        heading.id = heading.textContent.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]/g, '');
+      }
+
+      const tocItem = document.createElement('li');
+      tocItem.classList.add('toc-item', heading.tagName.toLowerCase());
+
+      const tocLink = document.createElement('a');
+      tocLink.href = `#${heading.id}`;
+      tocLink.textContent = heading.textContent;
+
+      tocItem.appendChild(tocLink);
+      tocList.appendChild(tocItem);
+    });
+
+    tocContainer.appendChild(tocList);
+  }
+
+  // 页面加载时生成目录
+  generateTOC();
+
+  // 切换目录的显示与隐藏
+  tocToggle.addEventListener('click', function () {
+    console.log("TOC toggle clicked"); // 点击按钮时输出到控制台
+    // 先检查当前是否是隐藏状态
+        if (tocContainer.classList.contains("hidden")) {
+            tocContainer.classList.remove("hidden");
+            tocContainer.classList.add("visible");
+        } else {
+            tocContainer.classList.remove("visible");
+            tocContainer.classList.add("hidden");
+        }
+  });
+
+  // 点击目录项时平滑滚动到对应位置
+  tocContainer.addEventListener('click', function (event) {
+    if (event.target.tagName.toLowerCase() === 'a') {
+      event.preventDefault();
+      const targetId = event.target.getAttribute('href').substring(1);
+      const targetHeading = document.getElementById(targetId);
+      if (targetHeading) {
+        window.scrollTo({
+          top: targetHeading.offsetTop - 20, // 根据需要调整偏移量
+          behavior: 'smooth'
+        });
+        // 点击后隐藏目录
+        tocContainer.classList.remove("visible");
+        tocContainer.classList.add("hidden");
+      }
+    }
+  });
+});
diff --git a/public/page/2/index.html b/public/page/2/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="Android &amp; Python Developer" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
     <link rel="alternate" type="application/rss+xml" href="https://cyrus-studio.github.io/blog/index.xml" title="CYRUS STUDIO">
 
 

diff --git a/public/posts/0成本通过hugo和github-pages搭建博客/index.html b/public/posts/0成本通过hugo和github-pages搭建博客/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -268,9 +268,23 @@ <h1 class ="post-title">0成本通过Hugo和GitHub Pages搭建博客</h1>
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>
diff --git a/public/posts/android源码导入android-studio/index.html b/public/posts/android源码导入android-studio/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -154,9 +154,23 @@ <h1 id="__导入android-studio__"><strong>导入android studio</strong></h1>
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>

diff --git a/public/posts/index.html b/public/posts/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
     <link rel="alternate" type="application/rss+xml" href="https://cyrus-studio.github.io/blog/posts/index.xml" title="CYRUS STUDIO">
 
 

diff --git a/public/posts/lineageos刷机教程/index.html b/public/posts/lineageos刷机教程/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -207,9 +207,23 @@ <h1 id="__使用lineageos-recovery刷机__"><strong>使用LineageOS Recovery刷
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>

diff --git a/public/posts/lineageos源码下载和编译xiaomi-mi-6xwayne/index.html b/public/posts/lineageos源码下载和编译xiaomi-mi-6xwayne/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -512,9 +512,23 @@ <h1 id="__刷机__"><strong>刷机</strong></h1>
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>

diff --git a/public/posts/linux下代理设置/index.html b/public/posts/linux下代理设置/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -182,9 +182,23 @@ <h1 id="__4-配置环境变量__"><strong>4. 配置环境变量</strong></h1>
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>

diff --git a/public/posts/magiskboot编译解包打包boot.img/index.html b/public/posts/magiskboot编译解包打包boot.img/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
 
 
 
@@ -203,9 +203,23 @@ <h1 id="__使用-magiskboot-解包打包内核__"><strong>使用 magiskboot 解
     </div>
     <div class="post-footer">
 
-    </div>
+    </div> 
   </article>
 
+
+
+<div id="toc" class="toc-container hidden"></div>
+
+
+<button id="toc-toggle" class="toc-toggle" aria-label="Ŀ¼">
+  &#9776;
+</button>
+
+
+<script src="/blog/js/toc.js"></script>
+
+
+
     </main>
   </body>
 </html>

diff --git a/public/posts/page/2/index.html b/public/posts/page/2/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="author" content="John Doe" />
     <meta name="description" content="" />
-    <link rel="stylesheet" href="/blog/css/main.min.1130dbc316c46ebce5c0974972593128dc11ce9c223a91c1f73ca557000541bc.css" />
+    <link rel="stylesheet" href="/blog/css/main.min.08e876a0f4aeb92fb7ca4e4c12d7d6ea16684353b267ad3f4385e180cc91a06b.css" />
     <link rel="alternate" type="application/rss+xml" href="https://cyrus-studio.github.io/blog/posts/index.xml" title="CYRUS STUDIO">