评论区 侧边栏

src/components/ArticleSidebar.astro

@@ -7,6 +7,11 @@ type TocItem = {
   id: string;
 };
 
+type TocSection = {
+  heading: TocItem;
+  children: TocItem[];
+};
+
 interface Props {
   post: BlogPost;
   toc: TocItem[];
@@ -15,6 +20,16 @@ interface Props {
 
 const { post, toc, relatedPosts } = Astro.props;
 const avatar = 'https://free.picui.cn/free/2025/08/10/689845496a283.png';
+const topDepth = toc.length > 0 ? Math.min(...toc.map((item) => item.depth)) : 1;
+const tocSections = toc.reduce<TocSection[]>((sections, item) => {
+  if (item.depth <= topDepth || sections.length === 0) {
+    sections.push({ heading: item, children: [] });
+  } else {
+    sections[sections.length - 1].children.push(item);
+  }
+
+  return sections;
+}, []);
 ---
 
 <aside class="article-sidebar" aria-label="文章侧边栏">
@@ -27,6 +42,21 @@ const avatar = 'https://free.picui.cn/free/2025/08/10/689845496a283.png';
     </div>
   </section>
 
+  {post.tags.length > 0 && (
+    <section class="sidebar-card article-tags-card">
+      <h2>
+        <span aria-hidden="true">#</span>
+        文章标签
+        <em>{post.tags.length}</em>
+      </h2>
+      <div class="article-tag-list" aria-label="文章标签">
+        {post.tags.map((tag) => (
+          <a href={`/tags/${encodeURIComponent(tag)}/`}>#{tag}</a>
+        ))}
+      </div>
+    </section>
+  )}
+
   {toc.length > 0 && (
     <section class="sidebar-card toc-card">
       <h2>
@@ -34,9 +64,23 @@ const avatar = 'https://free.picui.cn/free/2025/08/10/689845496a283.png';
         文章目录
         <em>{toc.length}</em>
       </h2>
-      <nav class="toc-list" aria-label="文章目录">
-        {toc.map((item) => (
-          <a class={`toc-depth-${item.depth}`} href={`#${item.id}`}>{item.text}</a>
+      <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
+        {tocSections.map((section, index) => (
+          <div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
+            <a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
+              <span class="toc-marker" aria-hidden="true"></span>
+              <span>{section.heading.text}</span>
+            </a>
+            {section.children.length > 0 && (
+              <div class="toc-children" data-toc-children>
+                {section.children.map((item) => (
+                  <a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
+                    <span>{item.text}</span>
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
         ))}
       </nav>
     </section>