Blog的搭建过程[ep.5| 基于 Twikoo 为你的博客添加支持 LaTeX 的评论区]

前言

好的，这次要写的是利用 Twikoo 来搭建自己博客的评论系统。其实，还有其他好多好多种评论系统，详情见 Butterfly官方文档。

本篇教程有很多是参考这位大佬的教程，需要用到 MongoDB 和 Vercel 这两个网站

闲言少叙，书归正文~

配置 MongoDB

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

进入到 MongoDB 的注册页面，没有账户的同学可以注册一个

创建 MongoDB 数据库

点击 Projects 界面右上角的 New Project 按钮来创建一个新项目，名字自己起一个

点击建立一个数据库，选择 Shared 类型的 Cluster（因为是免费的，可以白嫖），服务商和地区（Cloud Provider & Region）保持默认的亚马逊 aws 和北弗吉尼亚州（美国东部1）N. Virginia (us-east-1) 即可，点击 Create 完成创建

配置 MongoDB 数据库

在 Database Deployments 界面点击 Connect

第一步设置连接安全信息，选择 Allow Access from Anywhere (允许任何IP访问)，为我们待会儿部署 Vercel 做准备。经过上一步操作允许任何IP访问后，默认会填入的IP地址是0.0.0.0/0，描述内容(Description)可以选填，空着就行，直接点击 Add IP Address 进行添加。

然后添加用户名、密码，点击 Create Database User 添加数据库用户

第二步选择连接方式，直接选择 Drivers 使用MongoDB的本机驱动程序将应用程序连接到集群即可

第三步连接配置。连接数据库-选择连接方式(Choose a connection method)，用默认的 Node.js 即可。然后在你的博客根目录里运行

1	npm install mongodb

来安装 MongoDB 相关插件

根据提示Add your connection string into your application code（将连接字符串添加到应用程序代码中），复制下来连接字符串保存备用，其中 <password> 替换为刚刚设定的数据库密码（好好保存，我们马上就要用到了）。

部署到 Vercel

Vercel 的注册等教程前面有说过，这里不再赘述，详情见下面这篇文章

Blog的搭建过程 ep.2

https://www.matthewishere.com/2023/05/21/BlogConstruct-ep-2/

点击 ->这个链接<- 将 Twikoo 一键部署到 Vercel。

项目名称(PROJECT NAME) 随意填写，点击 Continue 继续，剩下的按照提示操作即可。

部署完成（有页面上方飘落彩带动画）后，点击 Settings -> Environment Variables 配置环境变量

在 Key 值处填入 MONGODB_URI ，值 Value 填入你刚刚修改好的 connection string

注意此处填入的 connection string 的 <password> 是已经替换好的，不然会出问题

点击 Add 然后 Save 保存环境变量。

选择上方项目部署(Deployments) 菜单页，点击项目后面的三个点展开下拉菜单，选择 Redeploy 重新部署，确认Redeploy。(重新部署之后，刚刚添加的环境变量才会生效)

回到 Project 页面，点击 Domain 下面的链接（这个链接也记下来，要用）

如果看到下面的界面，就说明你的 Vercel 已经部署好了

修改博客配置文件

在你的博客 Butterfly 主题对应的 config 文件中找到 comments 这个字段，然后选择使用 Twikoo

comments:
  use: Twikoo # Valine,Disqus
  text: true # Display the comment name next to the button
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

找到配置 Twikoo 的部分，把你刚才记下来的 Domain 下面的链接放到 envId 后面

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://(Vercel 仓库名称).vercel.app
  region:
  visitor: false
  option:

保存配置文件，然后 Hexo 三连，你的博客就有评论区啦~

在评论区支持 LaTeX 数学公式（可选）

这个有没有都可以，但是如果你有和我一样的装X需求，那就很有必要在评论区也支持 $\LaTeX$ 啦~

先放效果图：

其实这个骚操作在 Twikoo 的官方手册里就有介绍

具体的操作是找到 Butterfly 配置文件的 inject 部分，然后把手册给你的三行代码放到 head: 下面

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <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">
    - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    - <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>
  bottom: