给你的fuwari添加twikoo评论系统#

twikoo是一个优秀的评论系统，有美观的界面，而且可以高度自定义。（最重要的是可以匿名发评论）

部署twikoo#

先访问twikoo的官网点击快速上手，会跳转到Twikoo 文档，再点击云函数部署选择一个你喜欢的部署方式。

MongoDB Atlas 注册#

我比较喜欢Netlify部署，因为我已经有Netlify账号了，大部分的部署方式都是要MongoDB的数据库的，Netlify部署就需要。MongoDB Atlas为免费账户可以永久使用 500 MiB 的数据库，足够存储 Twikoo 评论使用。注册MongoDB Atlas的教程Twikoo 文档中有详细的教程。

Netlify 部署#

获取到 MongoDB 连接字符串后要妥善保管（这个字符串可以连接数据库）Netlify 部署教程

前端部署#

在拿到环境 id后就可以开始在fuwari中部署了。下载https://github.com/saicaca/fuwari/tree/comments中的/src/components/comment（把整个文件夹下载下来），把comment文件夹复制到你的fuwari的/src/components中，删掉Giscus.astr和Disqus.astro 把index.astro中的代码全部替换

1
---
2
import type { CollectionEntry } from 'astro:content'
3
import { commentConfig } from '@/config'
4
import Twikoo from './Twikoo.astro'
5
interface Props {
6
  post: CollectionEntry<'posts'>
7
}
8

9
const { id, data, slug } = Astro.props.post
10

11
const path = `/posts/${slug}`
12
const url = `${Astro.site?.href}${path}`
13

14
let commentService = ''
15
if (commentConfig?.twikoo) {
16
  commentService = 'twikoo'
17
}
18
---
19
<div class="card-base p-6 mb-4">
20
  {commentService === 'twikoo' && <Twikoo path={path} />}
21
  {commentService === '' && null}
22
</div>

把Twikoo.astro中的代码替换

1
---
2
import { commentConfig } from '@/config'
3

4
interface Props {
5
  path: string
6
}
7

8
const config = {
9
  ...commentConfig.twikoo,
10
  el: '#tcomment',
11
  path: Astro.props.path,
12
}
13
---
14

15
<div id="tcomment"></div>
16
<script define:vars={{ config }}>
17
function loadTwikoo() {
18

19
  // 动态加载 Twikoo 脚本，并在加载完成后执行 twikoo.init
20

21
  const script = document.createElement('script');
22
  script.src = 'https://s4.zstatic.net/npm/twikoo@替换成你的twikoo版本/dist/twikoo.min.js';
23
  script.defer = true;
24
  script.onload = () => {
25
    if (window.twikoo) {
26
      window.twikoo.init(config);
27
    }
28
  };
29
  // script.onerror = () => {
30
  //   console.error('Twikoo script load failed');
31
  // };
32
  document.body.appendChild(script);
33
}
34
  document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。
35
</script>

打开 /src/types/config.ts，将这段代码添加至 72 行处

1
export type CommentConfig = {
2
    twikoo?: TwikooConfig
3
  }
4

5
  type TwikooConfig = {
6
    envId: string
7
    region?: string
8
    lang?: string
9
  }

打开 /src/config.ts ，引入 CommentConfig

1
import type {
2
+  CommentConfig,
3
  LicenseConfig,
4
  NavBarConfig,
5
  ProfileConfig,
6
  SiteConfig,
7
} from './types/config'
8
import { LinkPreset } from './types/config'

在config.ts末尾添加这段代码

1
export const commentConfig: CommentConfig = {
2
  twikoo: {
3
    envId: '这里替换为你的 envId，就是环境ID',
4
  },
5
}

打开 /src/pages/posts/[…slug].astro ，在16行处添加 import Comment from “@components/comment/index.astro”

1
import Comment from "@components/comment/index.astro"

在 112 行处添加

1
<Comment post={entry}></Comment>

配置好后，git push部署后查看博客，你就能看到文章底下的评论区了。

黑暗模式#

在黑暗模式中，twikoo评论区会有显示不清楚的问题。可以通过添加Twikoo.css解决