Mizuki 主题配置 Twikoo 评论区

本文记录使用 MongoDB Atlas + Vercel + Cloudflare CDN 搭建评论区的过程，主要参考了 Twikoo 官方文档，整套方案都是免费的，而且在国内速度正常。标题的星号表示可以跳过。

MongoDB Atalas#

这一步主要是为了白嫖数据库。

注册账号#

需要在 MongoDB Atlas 注册一个账号。创建一个数据库，名称随意，我的地区选了 AWS / Oregon (us-west-2)。

创建用户#

这一步是给云函数的访问创建一个用户。进去之后在 Database & Network Access 选 Add New Database User，认证方式 Password，用户权限选 Built-in Role 里面的 Atlas admin，确定即可，记住设置的用户名和密码，设置完之后大概是这样的。

mongo-user

调整访问权限#

这一步是因为使用 Vercel 部署的云函数访问 IP 不固定。在和上一部相同的页面左侧二级菜单 IP Access List 修改一下 IP 地址为 0.0.0.0/0 允许所有的 IP 访问。

mongo-ip

获取 `MONGODB_URI`#

准备云函数连接数据库用的 URI，在 Database 页找到新建的这个数据库，点 Connect

mongo-connect

选择 Drivers，把框起来的这个复制下来，把用户名和密码替换进去存好。

mongo-uri

*Cloudflare CDN 加速#

这一步是为了把域名托管到 Cloudflare 上，白嫖加快国内的访问速度。首先需要有一个域名，这一步可以跳过。

到 Cloudflare 注册一个账号。在 Dashboard 选择加入域，然后去自己域名对应的服务商把 DNS 服务器改成 Cloudflare 给的，检查成功之后就托管到 Cloudflare 了。

云函数部署#

相当于在部署后端 api，我用了 Vercel，对用官方文档的这个部分。

第一次部署#

点这里直接跳转到 Vercel 部署即可。

修改环境变量#

部署一次之后去项目的 Settings，找到 Environment Variables，添加环境变量，让他能访问到数据库。

vercel-env

Key	Value	说明
`TWIKOO_IP_HEADERS`	`["headers.cf-connecting-ip"]`	如果使用 Cloudflare CDN 建议加上，不加会导致获取的 IP 属地不正确，否则不用加
`MONGODB_URI`	之前在 MongoDB Atlas 复制的那一串 `mongodb+srv://...`	必须加，否则访问不了数据库，记得替换用户名和密码

第二次部署#

加完之后点上面的 Deployments，随便找一个选择 Redeploy 重新部署一下，如果预览图里面说 Twikoo 云函数运行正常那就说明成功了，记一下这个链接这个是 envId，一会儿要用。

vercel-envid

*设置自定义域名#

在 Domains 旁边有个加号，点一下按照指引加 CNAME 或者 A 记录可以添加自己的域名（前提是你得有一个域名），加快国内的访问速度。如果域名在 Cloudflare 有个一键设置选项，直接点一下跳到 Cloudflare 确定就好了。现在 envId 可以用自己加的那个域名了。如果要用 Cloudflare 的 CDN 加速需要把代理流量打开。

alt text

在 Mizuki 启用 Twikoo#

启用 Twikoo#

这一部分参考了Mizuki 的文档，进入博客项目，打开 config.ts，搜索 commentConfig 对象，把 enable 改成 true，envId 改成之前复制的链接即可，语言可以视情况改。效果参考本文下面的评论区。

1
export const commentConfig: CommentConfig = {
2
  enable: true,
3
  twikoo: {
4
    envId: "https://twikoo.vercel.app", // 改成自己的，不要用这个示例！！！
5
    lang: SITE_LANG, // 可以选择性改一下
6
  },
7
};

添加公式支持#

这个没有找到同为 Mizuki 的可以抄的作业，所以自己改了一下。找到 src/components/comment/index.astro，最下面有一段

1
{commentConfig?.enable && (
2
  <div class="card-base p-6 mb-4">
3
    {commentService === 'twikoo' && <Twikoo path={path} />}
4
    {commentService === '' && null}
5
  </div>
6
)}

把他改成

1
{commentConfig?.enable && (
2
  <head>
3
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
4
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
5
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
6
  </head>
7
  <div class="card-base p-6 mb-4">
8
    {commentService === 'twikoo' && <Twikoo path={path} />}
9
    {commentService === '' && null}
10
  </div>
11
)}

Star's Blog