【笔记】在Astro静态博客上使用Twikoo评论系统

1176 字

6 分钟

【笔记】在Astro静态博客上使用Twikoo评论系统

2026-10-03

笔记

Fuwari

/

Astro

/

Edgeone

/

Twikoo

/

封面图：https://www.pixiv.net/artworks/150379690

前言：#

其实简介里写了，就是Gisucs不好用，而且因为一些奇妙的问题最近网页加载评论也总是出错，那就换一个评论系统吧。

与静态页面不同，评论系统是必定要数据库的。排除了家里云幻梦要上哪搞一个容量充足的廉价数据库呢？传统的手法是 MongoDB Atlas，他提供了500MiB的数据库，也是 Twikoo 在以往推荐的方案。那么有没有更大的呢？有的，有的。Edgeone Makers（以前叫Pages）提供了1GB 的 Blob 存储和1GB的 KV存储（这次 KV存储用不上）。需要注意，这个评论加载是需要用到 Edgeone Functions 的，而幻梦之前已经部署了一个随机图API，虽然说 Edgeone Functions 请求数一个月有 300W次，但是幻梦还是果断用了Edgeone的海外账号（反正空着也是空着）

第一步：部署 Twikoo 到 Edgeone#

其实官方文档已经写的很详细了，https://twikoo.js.org/backend.html#edgeone-makers-%E9%83%A8%E7%BD%B2。

我们只需要下载https://github.com/twikoojs/twikoo/raw/main/templates/edgeone-makers/twikoo-edgeone-makers.zip

直接把 ZIP 上传到 Edgeone Makers上完成部署。并在设置里对node.js 的版本进行调整和新增环境变量TWIKOO_SMTP_BRIDGE_TOKEN，值可以是一个任意复杂的字符串。

并且绑定一个域名，由于幻梦可以用中国区的加速，所以这里的CNAME可以不管他。

如果你也是这样的情况，那么我们通过 CDN 的方式进行代理即可。

源站这里填写前面 CNAME 的值即可，回源的 host 头就是我们之前填写绑定的域名。之后的访问就是使用成功加速的域名。

这样能够访问就成功了

第二步：部署到 Fuwari 前端#

由于官方没有提供 Astro 的方法所以我们需要自行解决一下，这里幻梦以Fuwari为例。

首先，我们新增一个Twikoo.astro。我们后面的大部分修改该都在这里进行，这样不会严重影响到博客本身。文件路径可以参考这个src\components\Twikoo.astro。

1
<div
2
    id="comments-container"
3
    class="flex card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full mt-4"
4
></div>
5

6

7
<script
8
    is:inline
9
    src="https://fastly.jsdelivr.net/npm/twikoo@2.0.12/dist/twikoo.min.js"
10
></script>
11

12

13
<script is:inline>
14
    function initTwikoo() {
15
        const container = document.getElementById("comments-container");
16

17

18
        if (!container || typeof twikoo === "undefined") return;
19

20

21
        if (container.dataset.twikooInitialized === "true") return;
22

23

24
        container.dataset.twikooInitialized = "true";
25

26

27
        twikoo.init({
28
            envId: "https://这里填写如你刚刚绑定的",
29
            el: "#comments-container",
30
            lang: "zh-CN",
31
        });
32
    }
33

34

35
    // 首次完整加载
36
    initTwikoo();
37

38

39
    // Astro 客户端导航
40
    document.addEventListener("astro:page-load", initTwikoo);
41
</script>

然后我们在src\layouts\MainGridLayout.astro中通过import Twikoo from "@components/Twikoo.astro";引入文件，并在以下位置插入评论

1
<main
2
id="swup-container"
3
class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden"
4
>
5
<div id="content-wrapper" class="onload-animation">
6
<!-- the overflow-hidden here prevent long text break the layout-->
7
<!-- make id different from windows.swup global property -->
8
<slot />
9

10
{showComments && <Twikoo />} //这里就是我们放评论的位置
11

12
<div
13
class="footer col-span-2 onload-animation hidden lg:block"
14
>
15
<Footer />
16
</div>
17
</div>
18
</main>