为你的网站启用简洁,美观,友好且免费,同时功能强大的 Twikoo 评论系统!Twikoo,yyds

从头阅读

本来想着记录下本站的搭建过程,可一直在研究一些小功能,持续性拖更。今天启用了 Twikoo 评论系统,掘弃了 Dream 默认的 UtterancDisqus 评论系统,无他,前者需要登录 Github 账号才能留言,后者需要外网且登录……

废话少说,直接开始。

twikoo页面

腾讯云部署 Twikoo

本站使用 Hugo Dream 主题,只要你使用 Hugo 框架,理论上一样移植。至于 Hexo 的使用方法,Twikoo 作者已经挂出来了好多个。Twikoo 使用要求,简单列下:

  • 只能部署在腾讯云开发平台,因为作者使用了腾讯云的 SDK
  • 腾讯云开发平台,最低 6.7 元/月基础套餐就足够,我购买后发现又有个“免费版”,于是果断退款了……小站暂且试试够不够用

Twikoo 作者已经给了详尽的腾讯云开发部署方法,推荐使用手动部署,完成后回到本文,在 Hugo 中启用 Twikoo。点此查看 Twikoo 腾讯云开发平台快速部署

Hugo 前端配置 Twikoo

看到此处的你,应当已经部署完腾讯云开发平台了。完成这里的 Hugo 前端配置,你的文章页下,就出现 Twikoo 了!

在主题 layouts/_default/ 目录下,找到 single.html 文件,拷贝到 blog/layouts/_default/ 目录下(避免直接修改主题文件,以免后续主题更新后失效),开始配置 Twikoo 的前端展示。

.
├── archetypes
├── config.toml
├── content
├── data………….. ├── _default ——├── baseof.html
├── layouts ——├── partials………. └── single.html
├── static………… ├── shortcodes
└── themes

在适当位置,加入 Twikoo 快速上手给的代码片段。如:

1
2
3
4
5
6
7
8
9
10
<div id="tcomment"></div>
<script src="https://jsd.guole.fun/npm/twikoo@1.3.1/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: '您的环境id',//腾讯云里的云开发环境id,见下图
el: '#tcomment',
// region: 'ap-guangzhou', // 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
// path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
})
</script>

云开发购买

我复用了 Dream 原作者的 Disqus 样式,因此本站是下面这样的,你应该按照你的主题在 single.html 中修改,必要时自定义 .css 样式放到 blog/static/css/*.css 中(任何时候,不要直接在主题源代码上做修改):

1
2
3
4
5
6
7
8
9
10
11
<article class="ui segment post-disqus-area" data-html2canvas-ignore>
<div id="tcomment"></div>
<script src="https://jsd.guole.fun/npm/twikoo@1.3.1/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: '*********',
el: '#tcomment',
// region: 'ap-guangzhou', // 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
// path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
})
</script>

现在,请打开 Hugo 本地服务,预览下你的 Twikoo 评论区吧。并按照作者文档,完成管理员注册。

Twikoo 启用反垃圾评论

Twikoo 作者已经集成了超多功能,本站只启用了微信 push 消息和 Account 垃圾评论过滤。按照 Twikoo 管理页面的提示,访问对应官网得到相应 key ,添加即可。

站长评论头像在此注册后设置

twikoo管理界面

立即体验 Twikoo 评论系统

请友好发言,留下你的足迹吧~~ 🍺🍺

  1. Hugo 国内腾讯云域名注册
  2. 使用 Hugo + Dream主题搭建个人Blog
  3. Hugo 启用 Twikoo 评论系统
  4. Hugo 设置不同页面共用一套 Twikoo 评论
  5. Hugo 实现 Coding + Github 自动化部署