补充 Artalk 和博客文章页

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>