让您的前端博客也有一个真正的评论区|Hellopgrmm 一个分享编程经验的网站

让您的前端博客也有一个真正的评论区|Hellopgrmm 一个分享编程经验的网站让您的前端博客也有一个真正的评论区-Twikoo评论系统
2024-12-28 更新，0观看。
官网：twikoo.js.org
Twikoo是一个适用于各种类型的网站(静态、动态)的评论区系统。安全且免费，支持邮件提醒、回复点赞、Markdown语法、评论审核、管理员登陆、评论高级管理等多元化的评论系统。
此处以MongoDB数据库系统和Netlify、Github网页托管为例。

进入MongoDB官网，申请一个MongoDB账号。
在此同时，申请一个Netlify账号。
回到MongoDB，新建一个Cluser（数据库），如果您的网站不是大众化的网站，最好的选择就是选择Free。(如图6.1所示)点击Create之后还需要配置一些信息。选择AWS服务，地区选择America。

图6.1 数据库容量选择

图6.2 数据库配置

配置完成基本信息之后，即可进入到Overview界面，查看数据库信息。目前数据库已经初始化完成，但是并没有链接到Twikoo评论区，所以暂时还无法使用。所以点击数据库的Connect（连接）选项。填写好用户名信息和设定好密码。用户名自定义，密码也可以自定义。用户名不要含非法字符，这里用root作为用户名。如图6.3所示。

图6.3 Connect to Twikoo Comment System and get the Enviroment ID.

在此之后，点击下一步。驱动器选择Driver，nodejs选择“5.5 or later”（5.5之后的版本）。如图6.4所示，链接字符串就在图示位置。复制即可。然后将字符串中的<db_username>或类似字眼替换成你的数据库用户名，<db_password>或类似字眼替换为您的数据库密码。（即刚开始您所设置的数据库用户名和密码）

图6.4 Get the connection string

按照MongoDB要求复制您的Connection Code/String
然后进入到github，搜索twikoo（一定要官方的），fork到自己的仓库。进入到Netlify界面，新建好Team后，从Github导入仓库（Import from Git或类似字眼内选择Github）找到您刚刚fork的仓库Twikoo。然后在配置页面往下划动到最底部，添加环境变量，Key为“MONGODB_URI”，Value为您刚刚获取到的MongoDB Connection Code（一定要替换<db_username>为您的数据库用户名。）等待部署好之后，进入Netlify部署好的域名，（一般为https://xxxxx.netlify.app或类似域名）您应该可以看到Code为100，提示信息为“Twikoo 云函数运行正常”的信息。在此之后，复制好您刚刚部署的netlify域名，作为Twikoo评论区初始化的必要环境id，添加进去。如以下图片所示。
1.导入fork好的Twikoo仓库。

2.选择Twikoo。

3.设置MongoDB连接字符串

4.部署成功。

在此，您应该获取到了属于您的环境ID。接着，添加这段代码，作为引用Twikoo评论区插件的代码。

HTML

  <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.40/dist/twikoo.min.js"></script>
  <!--设置一个容器-->
  <div id="comment"><div>

然后，添加如下js代码：
JavaScript

  
twikoo.init({
  envId: 'https://xxxxxxxx.netlify.app/.netlify/functions/twikoo', //环境ID。
  el: '#comment', //存放评论区的元素。 The Element of Twikoo Comment Container.
  path: location.pathname, //评论区指向的网页。 The Path to your page.
  lang: 'zh-CN',  //评论区的语言 Language of comment system.
})

将这些代码添加进去后，预览的效果，您应该会看到这样的一个评论界面。测试一下，如果没有什么其它的错误提示信息。那么，恭喜您，您成功拥有了您的博客评论区系统。

----------

更多语言在这里选择