小黑是小白

小黑是小白的笔记本，随便写写

首页 笔记 关于 归档 标签

Publii & Girdea 添加 twikoo 评论

2024-06-25 5 min read

本篇文章记录使用 Vercle 部署 Twikoo ，MongoDB 作为数据库
将Twikoo评论集成到 Publii or Gridea 静态博客中

视频教程

Bilbili：https://www.bilibili.com/video/BV1JE421N7s8
YouTube：https://youtu.be/UY0iJLoCxU0

申请 MongoDB账号并配置MongoDB数据库

申请一个 MongoDB Atlas 账号

打开 MongoDB Atlas 注册页面
注册一个账号或者使用已有的账号
创建一个数据库，地点选择距离 Vercel 较近的位置

配置数据库

  1. 导航到 Database Access 页面：

    • 打开你的 MongoDB Atlas 控制台。
    • 从左侧导航栏选择 Database Access。
    • 点击页面右上角的 Add New Database User 按钮。
    • 在弹出的窗口中，找到 Authentication Method 选项。
    • 选择 Password 作为身份验证方法。
    • 在 Password Authentication 部分下，填写你希望的数据库用户名。
    • 在密码栏中，建议点击 Auto Generate 按钮自动生成一个复杂的密码。
    • 确保将自动生成的密码妥善保存，后面部署Twikoo需要用到。

  2. 配置数据库用户权限：

    • 向下滚动找到 Database User Privileges 部分。
    • 展开 Built In Role 项目。
    • 在 Select Role 下拉菜单中，选择 Atlas Admin 角色。授予用户管理员权限。
    • 点击 Add User 按钮以完成用户创建。

  3. 防火墙配置：

    • 打开 Network accessList 页面。
    • ADD IP ADDRESS 或 EDIT 一个规则，Access List Entry 项目填写 0.0.0.0/0

  4. 获取数据库连接方式

    • 打开 Database 页面，找到 Connect 按钮，选择它
    • 连接方式选择 Drivers
    • 将 mongodb+srv:// 开头的字符串中 <password> 替换为上面设置的密码即可得到数据库连接字符串

  5. 删除无用数据库

    • 打开 Database 页面，找到 Browse Collections 按钮，选择它
    • 删除默认的数据表

使用Vercel部署Twikoo

注册一个Vercel账号

部署Twikoo

将 Twikoo 一键部署 到Vercel

配置变量环境并调试配置

  1. 添加环境变量并修改地区：

    • 找到刚才部署的twikoo项目
    • 找到 Settings
    • 找到 Environment Variables。
    • 添加环境变量 MONGODB_URI，值为前面记录的数据库连接字符串。
    • 找到 Deployment Protection。
    • 设置 Vercel Authentication 为 Disabled，然后点击 Save。
    • 找到 Function ,将 Function Region 修改为你需要的地区。

  2. 重新部署应用：

    • 导航到 Deployments。
    • 在任意一项后面点击更多（三个点）。
    • 点击 Redeploy，勾选 Use existing Build Cache 然后点击下面的 Redeploy。

  3. 配置自定义域：

    • 假设我们的域名托管到Cloudflare并使用Cloudflare加速
    • 找到 Domains，添加一个新的自定义域
    • 根据提示设置好 Cname 解析并考虑是否使用Cloudflare加速，也可以将域名托管至 Vercel

  4. 验证：

    • 等待解析生效后，使用浏览器直接访问 Twikoo 的域名回显以下内容表示成功
{
  "code": 100,
  "message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置",
  "version": "x.x.xx"
}

把评论部署到网页中

Publii

关闭已有的评论插件

工具&插件 > 自定义HTML > 每篇文章之后 -> 填入

<h2>评论</h2><br>
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@latest/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '你的twikoo环境地址', // Twikoo 环境地址
  el: '#tcomment', 
  region: '',
  path: location.pathname, 
  lang: 'zh-CN', 
})
</script>

工具&插件 > 自定义 CSS > 填入

.tk-content,
.tk-content-expand {
    text-align: left;
}

Gridea

1.使用支持Twikoo的主题或小黑修改的主题

请前往QQ群下载修改的主题

2.修改主题文件以支持 Twikoo

打开Girdea主题路径
%USERPROFILE%\Documents\Gridea\themes\主题名\templates

修改 post.ejs ，在必要的位置添加以下代码

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@latest/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '你的twikoo环境地址', // Twikoo 环境地址
  el: '#tcomment', 
  region: '',
  path: location.pathname, 
  lang: 'zh-CN', 
})
</script>

Twikoo官方解释

NAIZI.TOP RSS