Hugo 启用 Twikoo 评论系统

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

从头阅读

本来想着记录下本站的搭建过程，可一直在研究一些小功能，持续性拖更。今天启用了 Twikoo 评论系统，掘弃了 Dream 默认的 Utteranc 和 Disqus 评论系统，无他，前者需要登录 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 快速上手给的代码片段。如：

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/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 中（任何时候，不要直接在主题源代码上做修改）：

<article class="ui segment post-disqus-area" data-html2canvas-ignore>
    <div id="tcomment"></div>
      <script src="https://cdn.jsdelivr.net/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>