补充 Artalk 和博客文章页

src/pages/blogs/[blog_id].astro

@@ -4,6 +4,8 @@ import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
 import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
 import { toMarkdocTree } from '../../lib/markdoc'
 
+import Artalk from '../../components/Artalk.svelte'
+
 export const prerender = false
 
 const { blog_id = '' } = Astro.params
@@ -21,11 +23,15 @@ if (blogData === null) {
 const tree = await toMarkdocTree(blogData.content)
 ---
 
-<FullLayoutV1 title={blogData.title}>
-  <div class="__dev__caution">
-    <h1>仍在开发中，界面会崩坏</h1>
-  </div>
-  <MarkdocTreeRender tree={tree} client:load />
+<FullLayoutV1 title={blogData.title} withGap>
+  <main>
+    <h1>{blogData.title}</h1>
+    <article>
+      <MarkdocTreeRender tree={tree} client:load />
+    </article>
+    <h1>评论区</h1>
+    <Artalk client:idle />
+  </main>
 </FullLayoutV1>
 
 <style>
@@ -40,4 +46,16 @@ const tree = await toMarkdocTree(blogData.content)
       font-weight: 800;
     }
   }
+
+  main {
+    max-inline-size: 840px;
+    margin-inline: auto;
+    padding-block-end: 2rem;
+
+    & > h1 {
+      font-size: 2.4rem;
+      font-weight: 700;
+      margin-block: 1.2rem;
+    }
+  }
 </style>