Loading
Avatar
|
向上滚动进入

Twikoo评论系统的配置

2026年05月28日 Yuami
技巧

如何配置Twikoo评论系统

前路悠悠，愿你我不再孤单。

Twikoo 评论系统

一个简洁、安全、免费的静态网站评论系统。
A simple, safe, free comment system.

⭐Yuami评论系统配置

  1. Twikoo 评论系统配置位于 src/config.ts 文件,编辑以控制博客的评论系统显示设置。
  comment: {
    enable: true,
    system: 'twikoo',
    twikoo: {
      envId: 'https://netlifyxxxx.netlify.app/.netlify/functions/twikoo',
      lang: 'zh-CN',
      // Twikoo 前端 CDN 版本配置
      // 修改 git仓库package.json 中的 version 可升级前端版本，如 '1.7.10'
      // cdn 可替换为自定义 CDN 地址
      version: '1.7.10',
      cdn: 'https://s4.zstatic.net/npm/twikoo@{version}/dist/twikoo.min.js',
      // 备用 CDN（主 CDN 加载失败时使用）
      fallbackCdn: 'https://registry.npmmirror.com/twikoo@{version}/files/dist/twikoo.min.js',
    },
    //以下内容此时不需要编辑
    giscus: {
     
  },
  1. 核心配置项详解
  • 启用评论功能 (enable)
enable: false 控制整个评论系统的开关。
配置:
true: 启用评论功能。文章页面将显示 Twikoo 评论区。
false: (默认) 禁用评论功能。评论区将不会在任何页面显示。
  • Twikoo 具体配置 (twikoo)
    twikoo: {
      envId: 'https://netlify.app/.netlify/functions/twikoo',
      // Twikoo 后端服务url
      lang: 'zh-CN',
      //语言选项

      // Twikoo 前端 CDN 版本配置
      // 详细可看:https://twikoo.js.org/frontend.html处按需复制粘贴即可
      // 修改 version 可升级前端版本，如 '1.7.10'
      // cdn 可替换为自定义 CDN 地址
      version: '1.7.10',
      cdn: 'https://s4.zstatic.net/npm/twikoo@{version}/dist/twikoo.min.js',
      // 备用 CDN（主 CDN 加载失败时使用）
      fallbackCdn: 'https://registry.npmmirror.com/twikoo@{version}/files/dist/twikoo.min.js',
    },
  • Twikoo 由两部分组成：前端组件（嵌入在你的博客里）和 后端服务（存储评论数据、处理提交请求）。
  • envId 就是你后端服务的 URL。

🔥IMPORTANT

这是最重要的配置项。它告诉你的博客前端，去哪里获取和提交评论数据。它的值是你 Twikoo 服务端的部署地址。是 Twikoo 官方提供的一个演示服务地址。你不应该在生产环境中使用它，因为它有访问限制，且数据不保证持久。

🌟Twikoo 配置

  1. 部署 Twikoo 服务端
  • 部署 Twikoo 服务Twikoo 分为云函数和前端两部分，若要在您的网站上集成 Twikoo，您需要同时部署云函数和前端，部署时请注意保持二者版本一致。
  • 如果您的网站主题支持 Twikoo，您只需在配置文件中指定 Twikoo 即可；
    如果您的网站主题不支持 Twikoo，您需要修改源码手动引入 Twikoo 的 js 文件并初始化。 若您已部署旧版本 Twikoo，请参考 版本更新 升级云函数和前端版本。
  • 前端部署 Twikoo 服务端教程，请参考官方文档。
  1. 以下介绍在Netlify 部署：其他云函数部署 Twikoo 服务端教程，请参考官方文档。

📍Twikoo 部署

⚠️Netlify 部署的环境需配合 1.4.0 以上版本的 twikoo.js 使用Netlify 免费等级（Functions Level 0）支持每月 125,000 请求次数和 100 小时函数计算时长.

1. MongoDB 连接字符串的获取(回来就看这个笨蛋喵)
  • 申请 MongoDB AtLas 账号,获取 MongoDB 连接字符串-有Github账号可以直接登录，没有可以用邮箱注册。
  • 创建免费 MongoDB 数据库，区域推荐选择离 Twikoo 后端（Vercel / Netlify / AWS Lambda / VPS）地理位置较近的数据中心以获得更低的数据库连接延迟。如果不清楚自己的后端在哪个区域，也可选择 AWS / Oregon (us-west-2)，该数据中心基建成熟，故障率低，且使用 Oregon 州的清洁能源，较为环保.

创建个人账户

  • 在 SECURITY-Database &NetworkAccess 页面点击 Add New Database User 创建数据库用户. 1.1

创建个人项目和密码

  • 在 Password Authentication 下设置数据库用户名和密码，建议点击 Auto Generate 自动生成一个不含特殊符号的强壮密码并妥善保存。
  • 点击 Database User Privileges 下方的 Built In Role，Select Role 选择 Atlas Admin，最后点击 Add User. 1.2

添加网络白名单

  • 在 Database &NetworkAccess 页面点击 IP Address List IP 添加网络白名单。因为 Vercel / Netlify / Lambda 的出口地址不固定，因此 Access List Entry 中输入 0.0.0.0/0（允许所有 IP 地址的连接）即可。如果 Twikoo 部署在自己的服务器上，这里可以填入固定 IP 地址。点击 Confirm 保存.

获取数据库连接字符串

1.3

  • 在 Database 页面点击 Clusters:

    • 选择右侧free，输入自定义Name，其余部分保存默认。
    • 1.4
    • 连接方式选择 Drivers，并记录数据库连接字符串，请将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名/密码,注意去除 <> 符号. pl4.webp pl5.webp

  • 如有疑问，请详细参阅MongoDB Atlas

  • （可选）默认的连接字符串没有指定数据库名称，Twikoo 会连接到默认的名为 test 的数据库。如果需要在同一个 MongoDB 里运行其他业务或供多个 Twikoo 实例使用，建立加入数据库名称并配置对应的 ACL。

    ⚠️请注意:连接字符串包含了连接到 MongoDB 数据库的所有信息，一旦泄露会导致评论被任何人添加、修改、删除，并有可能获取你的 SMTP、图床 token 等信息。请妥善记录这一字符串，之后需要填入到 Twikoo 的部署平台里。

2.Netlify配置
  • 申请并登录 Netlify 账号
  • 可用邮箱注册或用github登录并创建一个 Team
  • 打开 twikoojs/twikoo-netlify 点击 fork 将仓库 fork 到自己的账号下 2.1
  • 回到 Netlify，点击 Add new site - Import an existing project 2.2
  • 点击 Deploy with GitHub，如果未授权 GitHub 账号，先授权，然后选择前面 fork 的 twikoo-netlify 项目 2.3
  • 点击 Add environment variables - New variable，Key 输入 MONGODB_URI，Value 输入前面记录的数据库连接字符串什么？你还不会,那就回去再看一遍😡，点击 Deploy twikoo-netlify 2.4 ⚠️切记：连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名/密码,注意去除 <> 符号.
  • 部署完成后，点击 Site settings - Domain settings - 右侧 Options - Edit site name，可以设置属于自己的域名(非必要，但是为了好辨认，建议设置为和项目名称一致)（https://xxx.netlify.app） 2.5
  • 进入 Site overview，点击上方的链接，如果环境配置正确，可以看到 Twikoo 云函数运行正常 的提示 2.6
  • 云函数地址包含 https:// 前缀和 /.netlify/functions/twikoo 后缀例如 https://xxx.netlify.app/.netlify/functions/twikoo 即为您的环境 id.
  • 将此处的https://xxx.netlify.app/.netlify/functions/twikoo填入 src/config.ts 文件中的 commentConfig.twikoo.envId 字段即可完成配置。

🧲Twikoo基础配置

点击查看
  1. 如图所示进入配置界面,可以设置自己的密码,便于后期管理评论。
  • pl5
  1. 输入密码进入配置面板。
  • pl6
  • 评论管理 页面可以管理评论，包括删除评论、屏蔽评论、屏蔽用户、设置评论置顶等功能，这里不做赘述。
  • 配置管理页面可以设置评论区的样式、评论字数限制、评论排序方式等，仅展示隐私设置和邮件通知设置。
    • 隐私设置：pl7
    • *邮件通知：*配置相关内容如图黄框显示(更改为个人实际内容即可)，其余可以保持默认。pl8
    • 查看授权码获取方法pl9
    • 输入个人邮箱，可进行测试。
  • 确认无误后，保存配置。

🧫Twikoo 更新

针对 Netlify 部署的前端更新方式

  • 登录 Github，找到部署时 fork 到自己账号下的名为twikoo-netlify 的仓库
  • 打开 package.json，点击编辑
  • 将 twikoo-netlify: latest 其中的 latest 修改为最新版本号 。点击Commit changes
  • 部署会自动触发

针对Twikoo的后端更新方式

  • 找到config.ts文件，找到twikoo对应区域代码：
      // Twikoo 前端 CDN 版本配置
      // 详细可看:https://twikoo.js.org/frontend.html处按需复制粘贴即可
      // 或修改 version 中可升级的前端版本，如 '1.7.10'
      // cdn 可替换为自定义 CDN 地址
      version: '1.7.10',
      cdn: 'https://s4.zstatic.net/npm/twikoo@{version}/dist/twikoo.min.js',
      // 备用 CDN（主 CDN 加载失败时使用）
      fallbackCdn: 'https://registry.npmmirror.com/twikoo@{version}/files/dist/twikoo.min.js',
    },
本文采用 CC BY 4.0 协议发布
live2D-MOC3在Yuami的适配 Giscus评论系统的配置

随机推荐

Openlist部署与挂载

简单阐述Openlist自定义+挂载的方法

如何正确发布文章

文章的发布方式

评论区

♪ 音乐
加载中...
--
0:00 0:00
你好呀～