修复移动端没有目录也会展示 toc 按钮的问题

Author: CatCodeMe

packages/pure/components/pages/TOC.astro

@@ -15,12 +15,14 @@ const { headings, class: className, ...props } = Astro.props
 const toc = generateToc(headings)
 ---
 
-<toc-heading class={className} {...props}>
-  <h2 class='font-semibold'>TABLE OF CONTENTS</h2>
-  <ul class='mt-4 text-card-foreground'>
-    {toc.map((heading) => <TOCHeading heading={heading} />)}
-  </ul>
-</toc-heading>
+{toc.length > 0 && (
+  <toc-heading class={className} {...props}>
+    <h2 class='font-semibold'>TABLE OF CONTENTS</h2>
+    <ul class='mt-4 text-card-foreground'>
+      {toc.map((heading) => <TOCHeading heading={heading} />)}
+    </ul>
+  </toc-heading>
+)}
 
 <script>
   // This script tag is useful only if you want to display the TOC alongside the blog post...

src/content/blog/coding/attachments/bloom_filter.png

@@ -7,6 +7,13 @@ tags:
   - algorithm
   - bloom-filter
   - probability
-  - ai-generate
 language: '中文'
+ai-model: 
+  - gemini-2.5-pro
+heroImage:
+    src: ./attachments/bloom_filter.png
 ---
+
+
+
+

src/content/blog/coding/bloom_filter.mdx

@@ -53,6 +53,7 @@ const primaryColor = data.heroImage?.color ?? 'hsl(var(--primary) / var(--un-tex
   meta={{ articleDate, description, ogImage: socialImage, title }}
   highlightColor={primaryColor}
   back='/blog'
+  hasToc={!!headings.length}
 >
   {/* 大屏幕：手风琴目录专用 slot，支持贴边布局 (仅在大屏幕显示) */}
   {!!headings.length && headings.length > 4 && (

src/layouts/BlogPost.astro

@@ -18,7 +18,7 @@ interface Props {
 const { title, headings, info, ...props } = Astro.props
 ---
 
-<PageLayout meta={{ title }} {...props}>
+<PageLayout meta={{ title }} {...props} hasToc={!!headings?.length}>
   {headings?.length && <TOC headings={headings} slot='sidebar' />}
 
   <Fragment slot='header'>

src/layouts/CommonPage.astro

@@ -14,9 +14,10 @@ interface Props {
   meta: SiteMeta
   highlightColor?: string
   back?: string
+  hasToc?: boolean
 }
 
-const { meta, highlightColor, back = '/', ...props } = Astro.props
+const { meta, highlightColor, back = '/', hasToc = false, ...props } = Astro.props
 ---
 
 <PageLayout {meta} {highlightColor} {...props}>
@@ -76,14 +77,16 @@ const { meta, highlightColor, back = '/', ...props } = Astro.props
   </div>
 
   <BackToTop header='content-header' content='content'>
-    <button
-      slot='other-icons'
-      aria-label='Toggle sidebar'
-      class='size-10 flex items-center justify-center rounded-full border-2 border-transparent bg-muted text-muted-foreground duration-300 hover:border-border/75 md:hidden sm:size-12'
-      id='sidebar-btn'
-    >
-      <Icon name='list' />
-    </button>
+    {hasToc && (
+      <button
+        slot='other-icons'
+        aria-label='Toggle sidebar'
+        class='size-10 flex items-center justify-center rounded-full border-2 border-transparent bg-muted text-muted-foreground duration-300 hover:border-border/75 md:hidden sm:size-12'
+        id='sidebar-btn'
+      >
+        <Icon name='list' />
+      </button>
+    )}
   </BackToTop>
 </PageLayout>
 

src/layouts/ContentLayout.astro

@@ -30,29 +30,31 @@ type Props = {
 const { title = true, class: className, ...props } = Astro.props
 ---
 
-<docs-toc class={cn('not-prose', className)} {...props}>
-  {title && <h2 class='text-foreground font-semibold'>DOCS</h2>}
-  <ul class='mt-4 flex flex-col gap-y-5'>
-    {
-      Object.entries(docCategories).map(([id, title]: [string, string]) => (
-        <li>
-          <h3 class='text-muted-foreground text-xs tracking-widest uppercase'>{title}</h3>
-          <ul class='mt-2 flex flex-col'>
-            {docsByCate[id]
-              .sort((a, b) => a.data.order - b.data.order)
-              .map((doc) => (
-                <li class='docs-item flex relative ms-2 px-3 py-1 text-foreground/75 transition-all rounded-2xl'>
-                  <a class='flex-1 hover:text-foreground' href={`/docs/${doc.id}`}>
-                    {doc.data.title}
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </li>
-      ))
-    }
-  </ul>
-</docs-toc>
+{docsCollection.length > 0 && (
+  <docs-toc class={cn('not-prose', className)} {...props}>
+    {title && <h2 class='text-foreground font-semibold'>DOCS</h2>}
+    <ul class='mt-4 flex flex-col gap-y-5'>
+      {
+        Object.entries(docCategories).map(([id, title]: [string, string]) => (
+          <li>
+            <h3 class='text-muted-foreground text-xs tracking-widest uppercase'>{title}</h3>
+            <ul class='mt-2 flex flex-col'>
+              {docsByCate[id]
+                .sort((a, b) => a.data.order - b.data.order)
+                .map((doc) => (
+                  <li class='docs-item flex relative ms-2 px-3 py-1 text-foreground/75 transition-all rounded-2xl'>
+                    <a class='flex-1 hover:text-foreground' href={`/docs/${doc.id}`}>
+                      {doc.data.title}
+                    </a>
+                  </li>
+                ))}
+            </ul>
+          </li>
+        ))
+      }
+    </ul>
+  </docs-toc>
+)}
 
 <style>
   docs-toc .docs-item::before {