update sidebar

Seeed-Studio · Nov 28, 2024 · 67d3976 · 67d3976
1 parent 2c420fc
commit 67d3976
Showing 1 changed file with 68 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -10,45 +10,44 @@
   <link rel="icon" type="image/png" href="images/favicon.png">
   <!-- 引入 Docsify 的主题样式 -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
-  <!-- 自定义 CSS 样式 -->
+
   <style>
-    /* 左边栏样式 (Docsify 默认样式) */
-    .sidebar {
+    /* 设置右边栏样式 */
+    .toc {
       position: fixed;
-      left: 0;
-      top: 0;
-      width: 250px;
-      height: 100%;
-      background-color: #f8f9fa;
-      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-      overflow-y: auto;
-      z-index: 10;  /* 确保左边栏在上层 */
+      right: 20px;
+      top: 100px;
+      width: 200px;
+      background: #f9f9f9;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      font-size: 14px;
     }
 
-    /* 右边栏样式 */
-    .sidebar-right {
-      position: fixed;
-      right: 0;
-      top: 0;
-      width: 250px;
-      height: 100%;
-      background-color: #f8f9fa;
-      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-      overflow-y: auto;
-      z-index: 10;  /* 确保右边栏在上层 */
+    .toc ul {
+      padding-left: 20px;
+    }
+
+    .toc ul li {
+      margin-bottom: 5px;
+    }
+
+    .toc ul li a {
+      text-decoration: none;
+      color: #333;
     }
 
-    /* 主内容区域向左和向右移，以避免被左右栏遮住 */
-    .content {
-      margin-left: 250px;
-      margin-right: 250px;
+    .toc ul li a:hover {
+      color: #007bff;
     }
   </style>
 </head>
 
 <body>
   <!-- Docsify 的应用容器 -->
-  <div id="app" class="content"></div>
+  <div id="app"></div>
 
   <!-- Docsify 配置 -->
   <script>
@@ -63,6 +62,9 @@
       homepage: 'README.md',
       notFoundPage: true,
       subMaxLevel: 1, // 设置子标题层级
+      toc: {
+        includeLevel: [1, 2, 3]  // 设置目录包含的标题级别
+      }
     };
   </script>
 
@@ -71,15 +73,45 @@
   <!-- 引入 Docsify 折叠插件 -->
   <script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
 
-  <!-- 右侧栏的内容 -->
-  <div class="sidebar-right">
-    <h3>Right Sidebar</h3>
-    <ul>
-      <li><a href="#">Link 1</a></li>
-      <li><a href="#">Link 2</a></li>
-      <li><a href="#">Link 3</a></li>
-    </ul>
-  </div>
+  <!-- 右边栏目录容器 -->
+  <div class="toc" id="toc"></div>
+
+  <script>
+    // Docsify 提供的 API，用于将文档的标题动态插入到右边栏
+    window.$docsify = window.$docsify || {};
+    window.$docsify.plugins = [
+      function (hook) {
+        hook.afterEach(function(html) {
+          var tocHtml = '';
+          var headings = [];
+
+          // 解析当前文档中的所有标题
+          var headingsPattern = /<h([1-6])>(.*?)<\/h\1>/g;
+          var match;
+
+          while (match = headingsPattern.exec(html)) {
+            var level = match[1];
+            var title = match[2];
+            var id = title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
+
+            headings.push({ level, title, id });
+          }
+
+          // 生成目录
+          tocHtml += '<ul>';
+          headings.forEach(function(heading) {
+            tocHtml += `<li style="margin-left: ${heading.level - 1}em;"><a href="#${heading.id}">${heading.title}</a></li>`;
+          });
+          tocHtml += '</ul>';
+
+          // 将生成的目录插入到右边栏
+          document.getElementById('toc').innerHTML = tocHtml;
+
+          return html;
+        });
+      }
+    ];
+  </script>
 </body>
 
 </html>