update

app/components/blog/Toc.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-const { path } = useRoute();
-const articles = await queryCollection("content").path(path).first();
-
 interface TocLink {
   id: string;
   text: string;
   children?: TocLink[];
 }
 
-const links = (articles?.body?.toc?.links || []) as TocLink[];
+const props = defineProps<{
+  links: TocLink[];
+}>();
 
 const activeId = ref("");
 
@@ -35,7 +34,7 @@ onMounted(() => {
     { rootMargin: "-100px 0% -80% 0%" },
   );
 
-  flattenLinks(links).forEach((link) => {
+  flattenLinks(props.links).forEach((link) => {
     const el = document.getElementById(link.id);
     if (el) observer.observe(el);
   });
@@ -45,16 +44,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="lg:col-span-4 sticky top-28 h-fit hidden lg:block">
+  <div class="w-full lg:w-1/3 hidden lg:block sticky top-28">
     <div
-      class="bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
+      class="h-fit max-h-[calc(100vh-8rem)] overflow-y-auto bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
       <h3
         class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-4 flex items-center gap-2">
         <Icon name="heroicons:list-bullet" class="w-4 h-4" />
         Table Of Content
       </h3>
       <nav class="space-y-1">
-        <template v-for="link in links" :key="link.id">
+        <template v-for="link in props.links" :key="link.id">
           <NuxtLink
             :to="`#${link.id}`"
             class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200"

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="font-spacegrotesk relative min-h-screen overflow-x-hidden flex flex-col">
+  <div class="font-spacegrotesk relative min-h-screen flex flex-col">
     <MainHeader />
     <main class="flex-1">
       <slot />

app/pages/posts/[post].vue

@@ -43,8 +43,9 @@ useHead({
 </script>
 
 <template>
-  <div class="px-4 md:px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12">
-    <div class="col-span-12 lg:col-span-8">
+  <div
+    class="px-4 md:px-6 container max-w-6xl mx-auto flex flex-col lg:flex-row gap-12 items-start">
+    <div class="w-full" :class="{ 'lg:w-2/3': articles?.body?.toc?.links?.length }">
       <BlogHeader
         :title="data.title"
         :image="data.image"
@@ -66,6 +67,6 @@ useHead({
     </div>
 
     <!-- 侧边目录 -->
-    <BlogToc />
+    <BlogToc v-if="articles?.body?.toc?.links?.length" :links="articles.body.toc.links" />
   </div>
 </template>