示例#

1
---
2
title: Fuwari添加评论功能
3
published: 2025-02-22
4
description: "静态博客养成计划"
5
image: ""
6
tags: ["Fuwari", "教程"]
7
category: Guides
8
draft: false
9
comments: true
10
---

Waline 评论#

Waline 是一款简洁、安全的评论系统。优点：布置简单，功能强大。官方地址： Waline官方

动手之前先去按照Waline官网教程创建一个账号，并部署好数据库与服务端

安装 Waline 依赖#

终端界面输入：

1
pnpm add -D @waline/client

如果报错缺少 @waline/api、recaptcha-v3

1
pnpm i -D @waline/api recaptcha-v3

添加 Waline 评论#

通过在原有astro组件上修改
添加新astro组件以在需要时调用

通过在原有astro组件上修改#

NOTE
该方式仅单独对文章启用 Waline 评论

在 src/config.ts 中的 walineConfig 配置项里添入自己部署的 Waline 项目的域名。

1
export const walineConfig = {
2
    //填入你的域名
3
  serverURL: "",
4
  login: "force",
5
};

在 src/content/config.ts 中添加 comments 关键词：

1
schema: z.object({
2
  title: z.string(),
3
  published: z.date(),
4
  updated: z.date().optional(),
5
  draft: z.boolean().optional().default(false),
6
  description: z.string().optional().default(""),
7
  image: z.string().optional().default(""),
8
  tags: z.array(z.string()).optional().default([]),
9
  category: z.string().optional().default(""),
10
  lang: z.string().optional().default(""),
11
   comments: z.boolean().optional().default(false),
12

13
  /* For internal use */
14
  prevTitle: z.string().default(""),
15
  prevSlug: z.string().default(""),
16
  nextTitle: z.string().default(""),
17
  nextSlug: z.string().default(""),
18
}),

在 src\pages\posts\[...slug].astro 添加 Waline 组件：

修改导包：

1
import { licenseConfig, walineConfig } from "src/config";

将 Waline 嵌入页脚的两个 </div> 标签后：

如图： alt text

1
    <!-- Waline -->
2
    {entry.data.comments !== false && (
3
        <div class="card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full mb-4">
4
            <div id="waline" />
5
            <script type="module" is:inline define:vars={{ walineConfig }}>
6
            import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
7
            function loadWaline() {
8
                init({
9
                    el: '#waline',
10
                    serverURL: walineConfig.serverURL,
11
                    login: walineConfig.login,
12
                    path: location.pathname,
13
                    wordLimit: ["2", "1000"],
14
                    dark: '.dark',
15
                });
16
            }
17
            loadWaline();
18
            </script>
19
        </div>
20
    )}

在 src\layouts\Layout.astro 约 149 行 </head>标签前添加

1
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

TIP
如若使用了我后面写到的优化后的waline组件，则 src\pages\posts\[...slug].astro 这样写(Layout.astro无需再添加css样式)：
1
---
2
//在开头处导入组件
3
import Waline from "@components/Waline/Waline.astro";
4
---
5

6
    {entry.data.comments !== false && <Waline client:visible/>}

在 src/types/config.ts 声称 comments 类型：

1
export type BlogPostData = {
2
  body: string;
3
  title: string;
4
  published: Date;
5
  description: string;
6
  tags: string[];
7
  draft?: boolean;
8
  image?: string;
9
  category?: string;
10
  prevTitle?: string;
11
  prevSlug?: string;
12
  nextTitle?: string;
13
  nextSlug?: string;
14
  comments?: boolean;
15
};

添加新astro组件以在需要时调用(TODO)#

在 src\components 目录下创建 Waline.astro:

并添加内容：

1
<!-- 引入Waline评论 -->
2
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
3
<div id="waline"></div>
4
<script type="module">
5
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
6
  // 监听主题变化
7
  function initWaline() {
8
    const isDark = document.documentElement.classList.contains('dark');
9

10
    init({
11
      el: '#waline',
12
      serverURL: 'your serverURL',
13
      dark: isDark ? 'html.dark' : false, // 关键配置
14
      comment: true, // 评论数统计
15
      reaction: [ // 反馈表情，使用默认的也可以
16
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatheart.png',//比心
17
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatalt.png',   //可爱
18
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatwave.png',//打招呼
19
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatthink.png',//思考
20
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatheartbroken.png',//心碎
21
    'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatgay.png',//难平
22
     ],
23
      emoji: [
24
        // 必须使用有效的CDN地址
25
        'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',
26
        'https://cdn.jsdelivr.net/npm/@waline/emojis@1.3.0/qq',
27

28
      ],
29

30
    });
31
  }
32
  // 初始化
33
  initWaline();
34

35
  // 监听主题切换（根据你的主题实现方式调整）
36
  const observer = new MutationObserver(() => {
37
    const container = document.getElementById('waline');
38
    if (container && container.innerHTML) {
39
      container.innerHTML = ''; // 清空重新初始化
40
      initWaline();
41
    }
42
  });
43
  observer.observe(document.documentElement, {
44
    attributes: true,
45
    attributeFilter: ['class']
46
  });
47
</script>

TODO
~~并未采用异步策略,可能会增加相关性能开销,后续还要优化~~ 已更新

~~这里暂时使用别人做的优化版astro组件~~

原主如果看到可以留言嗷

1
<!-- 1. 先静态显示阅读量/评论数的骨架屏 -->
2
<!-- 可选，不需要可以直接删掉下面的-->
3
<div id="waline-info">
4
  <div style="display: flex; align-items: center;">
5
    阅读量: <span class="waline-pageview-count"  style="margin-left: 5px;">--</span>
6
  </div>
7
  <div style="display: flex; align-items: center;">
8
    评论数：<span class="waline-comment-count" style="margin-left: 5px;">--</span>
9
  </div>
10
</div>
11

12
<!-- 2. 评论容器（初始为空） -->
13
<div id="waline"></div>
14

15
<!-- 3. 异步加载逻辑 -->
16
<script is:inline>
17
  (async () => {
18
    const loadCSS = () => {
19
      const link = document.createElement('link');
20
      link.rel = 'stylesheet';
21
      link.href = 'https://unpkg.com/@waline/client@v3/dist/waline.css';
22
      document.head.appendChild(link);
23
    };
24

25
    const { init } = await import('https://unpkg.com/@waline/client@v3/dist/waline.js');
26

27
    const initWaline = () => {
28
      const isDark = document.documentElement.classList.contains('dark');
29
      init({
30
        el: '#waline',
31
        serverURL: 'your serverURL',
32
        dark: isDark ? 'html.dark' : false,
33
        pageview: true,
34
        comment: true,
35
        emoji: [
36
          'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',
37
          'https://cdn.jsdelivr.net/npm/@waline/emojis@1.3.0/qq',
38
        ],
39
      });
40
    };
41

42
    // 并行加载资源
43
    loadCSS();
44
    initWaline();
45

46
    new MutationObserver(() => {
47
      const container = document.getElementById('waline');
48
      if (container?.innerHTML) {
49
        container.innerHTML = '';
50
        initWaline();
51
      }
52
    }).observe(document.documentElement, {
53
      attributes: true,
54
      attributeFilter: ['class']
55
    });
56
  })();
57
</script>
58

59
<style>
60
  #waline-info {
61
    display: flex;
62
    justify-content: space-between;
63
    align-items: center;
64
    margin-bottom: 10px;
65
  }
66
  #waline {
67
    clear: both;
68
  }
69

70
  .waline-pageview-count::before,
71
  .waline-comment-count::before {
72
    content: '';
73
    display: inline-block;
74
    width: 1em;
75
    height: 1em;
76
    background: #eee;
77
    animation: pulse 1.5s infinite;
78
    vertical-align: middle;
79
    margin-right: 0.3em;
80
  }
81
  @keyframes pulse {
82
    0%, 100% { opacity: 0.5; }
83
    50% { opacity: 1; }
84
  }
85
</style>

推荐使用优化修改后的代码：

1
---
2
import { walineConfig } from "src/config";
3

4
// 将 Waline 的配置项定义在这里，方便传入到客户端脚本
5
const walineOptions = {
6
  serverURL: walineConfig.serverURL,
7
  comment: true, // 评论数统计
8
  emoji: [
9
    // 必须使用有效的CDN地址
10
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs",
11
    "https://cdn.jsdelivr.net/npm/@waline/emojis@1.3.0/qq",
12
  ],
13
  reaction: [
14
    // 反馈表情，使用默认的也可以
15
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatheart.png", //比心
16
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatalt.png", //可爱
17
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatwave.png", //打招呼
18
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatthink.png", //思考
19
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/ablobcatheartbroken.png", //心碎
20
    "https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs/blobcatgay.png", //难平
21
  ],
22
  // Waline v3 的关键配置：当 'html.dark' 类存在时，Waline 会自动切换到暗色模式
23
  // 无需MutationObserver监听，Waline内部会处理
24
  dark: "html.dark",
25
  // 你可以在这里添加更多Waline配置，例如 pageview, locale, path等
26
  // pageview: true,
27
  // path: typeof window !== "undefined" ? window.location.pathname : "/", // 在SSR时处理window对象
28
  // locale: {
29
  //   placeholder: '留下你的评论...'
30
  // }
31
};
32
---
33

34
<!-- 引入 Waline 评论的 CSS，建议放在 head 中或者组件顶部 -->
35
<link
36
  rel="stylesheet"
37
  href="https://unpkg.com/@waline/client@v3/dist/waline.css"
38
/>
39

40
<!-- Waline 评论容器 -->
41
<div id="waline"></div>
42

43
<!--客户端脚本：
44
  - 通过 `data-options` 属性将配置安全地传递给客户端脚本。
45
  - 使用动态 import() 来真正懒加载 Waline 的 JS 库。
46
-->
47
<script
48
  type="module" is:inline
49
  id="waline-init-script"
50
  data-options={JSON.stringify(walineOptions)}
51
>
52
  // 获取脚本标签上的配置数据
53
  const scriptTag = document.getElementById("waline-init-script");
54
  const options = JSON.parse(scriptTag.dataset.options);
55

56
  // 动态导入 Waline 客户端库
57
  // 只有当组件进入视口时，才会下载 Waline 的 JS 文件
58
  import("https://unpkg.com/@waline/client@v3/dist/waline.js")
59
    .then(({ init }) => {
60
      init({
61
        el: "#waline", // Waline 挂载的元素ID
62
        path: location.pathname,
63
        ...options, // 展开传入的配置项
64
      });
65
      console.log("Waline comments initialized successfully!");
66
    })
67
    .catch((err) => {
68
      console.error("Failed to load Waline comments:", err);
69
    });
70
</script>
71

72
<style>
73
  /* 可以在这里添加一些针对Waline容器的样式，例如最小高度，加载提示等 */
74
  #waline {
75
    clear: both;
76
  }
77
</style>

在相关astro界面合适的位置导入 Waline 然后调用即可：

1
---
2
import Waline from '@/components/Waline.astro';
3
---
4

5
<!-- 引入评论组件 -->
6
<Waline />
7
<!--TODO：如果要动态加载（在被观测到时加载）-->
8
<!--还有不少内容要修改，暂时别用-->
9
<Waline client:visible />

NOTE
博客以内容输出为主，尽可能都以内容优先，视情况动态加载 ;w;

client模板指令参考 - Astro Docs

Waline 相关组件属性#

组件属性 | Waline

管理员与管理面板#

首个注册的账号会是管理员，管理面板在 example.yourdomain.com/ui

Giscus 评论#

创建 giscus 仓库#

创建一个新的GitHub库用来存储博客的那些评论，请确保该仓库是 公开的 ，否则访客将无法正常查看 discussion。
给你的这个repo仓库安装giscus app,否则访客将无法评论和回应。
确保 Discussions 功能已在你的仓库中启用。

配置 giscus#

打开giscus 官方网站，进行配置：

语言：选择你目前正在使用的语言
仓库：填写你刚刚创建的仓库（格式为你的用户名/仓库名）
页面 ↔️ discussion 映射关系(默认即可)
Discussion 分类（默认即可）
特性（默认即可）
主题（默认即可）

按照顺序配置好之后，下方会自动生成：

1
  <!-- giscus评论 -->
2
  <!-- 评论区域的间距根据实际情况修改 也可以删除 -->
3
<div style="margin-top: 20px;"></div>
4
<script src="https://giscus.app/client.js"
5
        data-repo="[在此输入仓库]"
6
        data-repo-id="[在此输入仓库 ID]"
7
        data-category="[在此输入分类名]"
8
        data-category-id="[在此输入分类 ID]"
9
        data-mapping="pathname"
10
        data-strict="0"
11
        data-reactions-enabled="1"
12
        data-emit-metadata="0"
13
        data-input-position="bottom"
14
        data-theme="preferred_color_scheme"
15
        data-lang="zh-CN"
16
        crossorigin="anonymous"
17
        async>
18
</script>

使用 giscus#

修改对应的如about.astro，posts.astro，archive.astro 等等

在页尾前添加即可

1
<!-- giscus评论 -->
2
</MainGridLayout>

创建giscus.astro组件，在需要时导入调用

方法同 waline ，照搬即可