1. 网站信息配置#

打开 src/config.ts 文件，您会看到如下配置项，请根据解释进行修改：

2. 网站 URL 配置#

打开项目根目录下的 astro.config.mjs 文件，找到 site 选项，并将其值修改为您的网站域名。

1. 创建新文章#

Fuwari 提供了便捷的命令行工具来创建新文章。

1. 执行以下命令：

   1
   pnpm new-post "你的文章标题"
   

2. 命令执行后，在 src/content/posts/ 目录下会生成一个对应的 Markdown 文件。

文章资源管理

为了更好地管理文章相关的图片等资源，建议在 src/content/posts/ 目录下为每篇文章创建一个同名文件夹，并将 Markdown 文件和相关资源（如图片）都放入该文件夹中。这样，您就可以方便地使用相对路径 ![图片](./图片名.png) 来引用资源。

2. 理解 Front-matter#

每篇文章的开头部分都有一段 --- 包裹的区域，这被称为 Front-matter，用于定义文章的元数据。

1
---
2
title: 我的第一篇博客
3
published: 2025-08-03
4
description: 这是我的 Astro 博客的第一篇文章。
5
image: './cover.jpg'
6
tags: [Astro, Blog]
7
category: '技术分享'
8
draft: false
9
---

以下是常用字段的说明：

1. 获取 Twikoo 环境 ID#

首先，请根据 Twikoo 官方文档 的指引完成部署，并获取您的 环境 ID (envId)。

2. 下载 Twikoo 静态资源#

从 Twikoo 文档 下载最新的 twikoo.min.js 文件，然后放置在 public/twikoo/ 目录下（如果目录不存在，请手动创建）。

3. 创建评论组件#

1. 在 src/components/ 目录下创建一个新文件夹 comment。

2. 在 src/components/comment/ 目录下创建一个新文件 Twikoo.astro。

3. 将以下代码复制到 Twikoo.astro 文件中，并务必填入您自己的 envId。

   1
   ---
   2
   const config = {
   3
     el: "#comment",
   4
     path: Astro.props.path,
   5
   };
   6
   ---
   7
   <div id="comment">
   8
     <div class="text-center text-gray-500 dark:text-gray-400 p-8">
   9
       <p>评论区加载中...</p>
   10
       <p class="text-sm mt-2">如果长时间无法显示，请尝试刷新页面。</p>
   11
     </div>
   12
   </div>
   13
   <script is:inline define:vars={{ config }}>
   14
     function initTwikoo() {
   15
       const commentContainer = document.getElementById('comment');
   16
       if (!commentContainer) return;
   17
   
   18
       // 清理旧的 Twikoo 实例和脚本
   19
       if (window.twikoo) {
   20
         window.twikoo = undefined;
   21
       }
   22
       const oldScript = document.getElementById('twikoo-script');
   23
       if (oldScript) {
   24
         oldScript.remove();
   25
       }
   26
   
   27
       // 创建并注入新的 Twikoo 脚本
   28
       const script = document.createElement('script');
   29
       script.id = 'twikoo-script';
   30
       script.src = '/twikoo/twikoo.min.js'; // 确保路径正确
   31
       script.defer = true;
   32
   
   33
       // 脚本加载后初始化 Twikoo
   34
       script.onload = () => {
   35
         if (window.twikoo) {
   36
           window.twikoo.init({
   37
             ...config,
   38
             envId: "请在这里填写你的envId", // ！！！请替换为您的真实 envId
   39
             lang: 'zh-CN',
   40
           });
   41
         }
   42
       };
   43
       document.head.appendChild(script);
   44
     }
   45
   
   46
     // 监听 Astro 的页面加载事件来初始化评论
   47
     document.addEventListener('astro:page-load', initTwikoo);
   48
   </script>
   

4. 在文章页面中引入评论组件#

1. 打开 src/pages/posts/[...slug].astro 文件。

2. 在文件顶部的 --- 代码块中，导入刚刚创建的 Twikoo 组件。

   1
   ---
   2
   import path from "node:path";
   3
   import Twikoo from "@components/comment/Twikoo.astro";
   4
   import License from "@components/misc/License.astro";
   5
   // ... 其他导入
   6
   ---
   

3. 在文件的 </div> 标签下方，添加以下代码来渲染评论区。

   115
   </div>
   116
   
   117
   <div class="card-base p-6 mb-4">
   118
       <div class="flex items-center mb-4">
   119
           <div class="w-1 h-5 rounded-md bg-[var(--primary)] mr-3"></div>
   120
           <h2 class="text-xl font-bold">评论区</h2>
   121
       </div>
   122
       <Twikoo path={`/posts/${entry.slug}`} />
   123
   </div>
   124
   
   125
   <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
   

5. 添加评论区样式#

访问 这个 Gist 下载 twikoo.css 文件，并将其放入 src/styles 文件夹下，以美化评论区样式。