补充 Artalk 和博客文章页

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "20260327_blog_frontend_v2",
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/node": "^10.0.4",
@@ -20,6 +19,7 @@
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@unocss/reset": "^66.6.7",
+        "artalk": "^2.9.1",
         "astro": "^6.1.0",
         "astro-icon": "^1.1.5",
         "axios": "^1.13.6",
@@ -3271,6 +3271,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/artalk": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/artalk/-/artalk-2.9.1.tgz",
+      "integrity": "sha512-IFo9XqWDalsHy8BsmMA5SSB9bozBa/sBhTm/+O5KwA6DnC95lFKv7C6ScMx/Xa4ue5qSQ7VV5vxRgCh/raohkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "marked": "^14.1.2"
+      },
+      "peerDependencies": {
+        "marked": "^14.1.0"
+      }
+    },
     "node_modules/astro": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/astro/-/astro-6.1.0.tgz",
@@ -5845,6 +5857,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.1.4.tgz",
+      "integrity": "sha512-vkVZ8ONmUdPnjCKc5uTRvmkRbx4EAi2OkTOXmfTDhZz3OFqMNBM1oTTWwTr4HY4uAEojhzPf+Fy8F1DWa3Sndg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@unocss/reset": "^66.6.7",
+    "artalk": "^2.9.1",
     "astro": "^6.1.0",
     "astro-icon": "^1.1.5",
     "axios": "^1.13.6",

src/assets/prose.css

@@ -0,0 +1,75 @@
+.prose {
+    line-height: 1.6em;
+
+    & p {
+        margin-block: .6em;
+    }
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+        font-weight: 700;
+        margin-block: 1em;
+        text-align: center;
+    }
+
+    & h1 {
+        font-size: 2rem;
+    }
+
+    & h2 {
+        font-size: 1.8rem;
+    }
+
+    & h3 {
+        font-size: 1.6rem;
+    }
+
+    & h4 {
+        font-size: 1.4rem;
+    }
+
+    & h5 {
+        font-size: 1.2rem;
+    }
+
+    & h6 {
+        font-size: 1.1rem;
+    }
+
+    & blockquote {
+        background-color: var(--color-bg-1);
+        color: var(--color-fg-1);
+
+        border-radius: .5rem;
+        padding-block: .5rem;
+        padding-inline: 1.25rem;
+        margin-block: 1.25rem;
+
+        border-inline-start: solid .25rem;
+    }
+
+    & pre.shiki {
+        border-radius: .5rem;
+        padding-block: 1rem;
+        padding-inline: 1.25rem;
+        margin-block: 1.25rem;
+        overflow-x: scroll;
+    }
+
+    & a {
+        color: var(--color-blue);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    & img {
+        border-radius: .5rem;
+        margin-block: 1.25rem;
+    }
+}

src/assets/style.css

@@ -7,11 +7,13 @@
 :root {
     color-scheme: light dark;
 
-    --color-bg-n: light-dark(oklch(100% 0 0), oklch(35% 0.025 270));
-    --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
+    --color-bg-n: light-dark(oklch(100% 0 0), oklch(30% 0.025 270));
+    --color-bg-0: light-dark(oklch(95% 0 0), oklch(25% 0.02 270));
+    --color-bg-1: light-dark(oklch(90% 0 0), oklch(20% 0.02 270));
+    --color-bg-2: light-dark(oklch(85% 0 0), oklch(15% 0.02 270));
+
     --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
-    --color-bg-1: light-dark(oklch(90% 0 0), oklch(25% 0.02 270));
-    --color-bg-2: light-dark(oklch(85% 0 0), oklch(20% 0.02 270));
+    --color-fg-1: light-dark(oklch(35% 0.02 270), oklch(80% 0.02 270));
 
     --color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
     --color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));

src/components/Artalk.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  // https://artalk.js.org/zh/develop/import-framework
+
+  import Artalk from 'artalk'
+  import { onMount, onDestroy } from 'svelte'
+
+  import 'artalk/Artalk.css'
+
+  let el: HTMLElement
+  let artalk: Artalk
+
+  onMount(() => {
+    artalk = Artalk.init({
+      el: el,
+      pageKey: location.pathname,
+      pageTitle: document.title,
+      server: 'https://artalk.sv.passthem.top',
+      site: '小帕的小窝',
+      darkMode: 'auto',
+    })
+
+    onDestroy(() => {
+      if (artalk) {
+        artalk.destroy()
+      }
+    })
+  })
+</script>
+
+<div class="comment" bind:this={el}></div>

src/components/MarkdocRenderer.tsx

@@ -28,7 +28,7 @@ export const MarkdocTreeRender: React.FC<{
   tree: RenderableTreeNode
 }> = ({ tree }) => {
   return (
-    <div className="markdoc-container">
+    <div className="markdoc-container prose">
       {Markdoc.renderers.react(tree, React, { components: { CodeBlock } })}
     </div>
   )

src/layout/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import '../assets/style.css'
 import '../assets/fonts.css'
+import '../assets/prose.css'
 import 'katex/dist/katex.min.css'
 import '@unocss/reset/tailwind-v4.css'
 import { ClientRouter } from 'astro:transitions'

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>