为 Fuwari 添加Twikoo评论组件

Twikoo 一个简洁、安全、免费的静态网站评论系统。#

部署Twikoo#

我部署Twikoo用的方案是 mongodb altas 云数据库后端 (具有免费的数据存储空间，大约512MB左右，对于评论系统已经很足够了) + vercel 云函数部署.

也就是这个Twikoo的文档.

MongoDB Atlas 数据库创建#

Twikoo提供的注册MongoDB Atlas教程

最后记得要保管好我们的连接字符串.

Vercel 部署#

Twikoo提供的 Vercel 部署教程

vercel 部署，由于域名的原因，中国境内无法直接访问 vercel分配的域名，需要自己手动添加一个自己的自定义域名才能访问。

前端部署#

首先打开项目的 src/components位置，新建一个Twikoo.astro组件并填入一下内容

1
---
2
// src/components/Twikoo.astro
3
import { twikooConfig } from "../config";
4

5
const { enable, envId, lang = "zh_CN" } = twikooConfig;
6
const shouldRender = enable && envId;
7
---
8

9
{shouldRender && (
10
  <div id="twikoo-comment">
11
    <p>加载评论中...</p>
12
  </div>
13

14
  <script is:inline define:vars={{ envId, lang }}>
15
    (function() {
16
      const MAX_RETRIES = 3;
17
      const RETRY_DELAY = 2000;
18

19
      let scriptRetryCount = 0;
20
      let initRetryCount = 0;
21

22
      // 尝试初始化 Twikoo
23
      function initTwikoo() {
24
        if (typeof twikoo === 'undefined') {
25
          // Twikoo 对象不存在，说明脚本还没加载成功，重试加载脚本
26
          if (scriptRetryCount < MAX_RETRIES) {
27
            scriptRetryCount++;
28
            console.log(`Twikoo 库未加载，尝试重新加载脚本 (${scriptRetryCount}/${MAX_RETRIES})...`);
29
            setTimeout(loadScript, RETRY_DELAY);
30
          } else {
31
            console.error('Twikoo 库加载失败，已达到最大重试次数。');
32
            showError('评论加载失败，请刷新页面重试。');
33
          }
34
          return;
35
        }
36

37
        twikoo.init({ envId, el: '#twikoo-comment', lang })
38
          .then(() => {
39
            console.log('Twikoo 初始化成功');
40
          })
41
          .catch(err => {
42
            console.error('Twikoo 初始化失败：', err);
43
            if (initRetryCount < MAX_RETRIES) {
44
              initRetryCount++;
45
              console.log(`尝试重新初始化 (${initRetryCount}/${MAX_RETRIES})……`);
46
              setTimeout(initTwikoo, RETRY_DELAY);
47
            } else {
48
              showError('评论加载失败，请刷新页面重试。');
49
            }
50
          });
51
      }
52

53
      function loadScript() {
54
        const script = document.createElement('script');
55

56
        // 推荐在中国使用
57
        //  https://registry.npmmirror.com/twikoo/1.7.1/files/dist/twikoo.min.js
58
        //  https://s4.zstatic.net/npm/twikoo@1.7.1/dist/twikoo.min.js
59
        // 推荐在全球使用
60
        //  https://cdn.jsdelivr.net/npm/twikoo@1.7.1/dist/twikoo.min.js
61
        // 备用选项
62
        //  https://s4.zstatic.net/ajax/libs/twikoo/1.6.41/twikoo.min.js
63
        //  https://lib.baomitu.com/twikoo/1.6.39/twikoo.min.js
64

65
        script.src = 'https://s4.zstatic.net/npm/twikoo@1.7.1/dist/twikoo.min.js';
66
        script.onload = () => {
67
          console.log('Twikoo 脚本加载成功');
68
          scriptRetryCount = 0;
69
          initTwikoo();
70
        };
71
        script.onerror = () => {
72
          console.error('Twikoo 脚本加载失败');
73
          if (scriptRetryCount < MAX_RETRIES) {
74
            scriptRetryCount++;
75
            console.log(`尝试重新加载脚本 (${scriptRetryCount}/${MAX_RETRIES})……`);
76
            setTimeout(loadScript, RETRY_DELAY);
77
          } else {
78
            showError('评论加载失败，请刷新页面重试。');
79
          }
80
        };
81
        document.head.appendChild(script);
82
      }
83

84
      // 显示错误信息到评论区
85
      function showError(msg) {
86
        const container = document.querySelector('#twikoo-comment');
87
        if (container) container.innerHTML = `<p style="color: red;">${msg}</p>`;
88
      }
89

90
      loadScript();
91
    })();
92
  </script>
93
)}

在src/pages/posts/[...slug].astro文件中的大概 113行左右结束就是文章整个模块的渲染区域

我们在他之后添加一下内容

103
        ...
104
        <Markdown class="mb-6 markdown-content onload-animation">
105
            <Content />
106
        </Markdown>
107

108
        {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
109

110
    </div>
111
</div>
112

113
 <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
114
     <div id="post-container" class="card-base p-6 mb-4 text-black/75 dark:text-white/75  transition" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ", {} ]}>
115
         <Twikoo />
116
     </div>
117
 </div>
118

119
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
120
    <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
121
    ...

Twikoo 在初始化时候需要调用init函数，如下

1
<!-- from https://twikoo.js.org/frontend.html#%E9%80%9A%E8%BF%87-cdn-%E5%BC%95%E5%85%A5 -->
2

3
<script>
4
    twikoo.init({
5
    envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
6
    el: '#tcomment', // 容器元素
7
    // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
8
    // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
9
    // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
10
    })
11
</script>

为了方便传参数，我们需要在 src/types/config.ts中添加一个twikooConfig配置

1
export type TwikooConfig = {
2
  enable?: boolean;
3
  envId?: string;
4
  lang?: string;
5
};

最后在src/config.ts中添加一下修改并配置自己的envId

1
import type {
2
  ExpressiveCodeConfig,
3
  LicenseConfig,
4
  NavBarConfig,
5
  ProfileConfig,
6
  SiteConfig,
7
  TwikooConfig,
8
} from "./types/config";
9

10
...
11

12
// 在文件最后添加一下内容
13
 export const twikooConfig: TwikooConfig = {
14
   enable: true,
15
   envId: "填入之前在Twikoo云函数部署时拿到的Id",
16
 };

配置好后pnpm dev测试一下，能看到文章底下的评论区了。

最后记得点击Twikoo评论区的小设置齿轮配置一下Twikoo的一些通知系统。