为hugo博客添加twikoo评论

私有化安装twikoo

官网

• https://twikoo.js.org/
• https://twikoo.js.org/backend.html#%E7%A7%81%E6%9C%89%E9%83%A8%E7%BD%B2

私有化部署

个人诉求

• 能简单的在页面看到评论即可
• 能找到评论人的邮箱
• 评论可以折叠

部署方法

• 服务端安装node.js

  • https://nodejs.org/zh-cn/download/package-manager

• 通过以下命令安装twikoo server

  npm i -g tkserver
  

• 启动tkserver

  cd /home/ubuntu/twikoo; ## 指定一个目录 存放评论数据 我个人没有使用mongodb 直接使用默认的loki
  nohup tkserver >./tkserver.log 2>&1 &
  txy>tail ./tkserver.log ## 输出一下命令就代表成功了
  7/10/2024, 11:28:38 AM Twikoo: Twikoo database stored at /home/ubuntu/twikoo/data
  7/10/2024, 11:28:38 AM Twikoo: Connecting to database...
  7/10/2024, 11:28:38 AM Twikoo: Twikoo is using loki database
  7/10/2024, 11:28:38 AM Twikoo: Twikoo function started on host :: port 8080
  7/10/2024, 11:28:38 AM Twikoo: Connected to database
  

• 浏览器打开 http://xxip:8080 页面输出类似下面的内容 代表成功

  {"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.38"}
  

  • 这里记录下version版本号 后面会用到

nginx代理配置

• 修改nginx配置 在server配置中加入以下内容

  server {  
      location /twikoo {
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Script-Name /isso;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass http://localhost:8080;
      }
  }
  

• 接下来输入 https://becool.vip:twikoo 即可访问了 这个https://becool.vip:twikoo 也是twikoo的id

hugo配置

主题

• 个人使用的papermod主题，如果你是从头搭建，也想用papermod主题 建议直接 git clone https://github.com/xyming108/sulv-hugo-papermod 然后直接使用即可

集成twikoo

• config.yml修改

  # 这里的参数会被代码以 .Site.Params 的形式读取
  params:
    comments: true  # 这里打开评论
    # twikoo评论
    twikoo:
      version: 1.6.38
      id:  https://becool.vip/twikoo
      region:  # 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数，请看twikoo官方文档  
  

• yourBlogDir/layouts/partials/comments.html 不用修改用默认的下面内容即可

  <!-- {{- /* Comments area start */ -}}
  {{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
  {{- /* Comments area end */ -}}
   -->
  
  <style>
      .comments_details summary::marker {
          font-size: 20px;
          content: '👉展开评论';
          color: var(--content);
      }
      .comments_details[open] summary::marker{
          font-size: 20px;
          content: '👇关闭评论';
          color: var(--content);
      }
  </style>
  
  <!-- Twikoo -->
  <div>
      <details class="comments_details">
          <summary style="cursor: pointer; margin: 50px 0 20px 0;width: 130px;">
              <span style="font-size: 20px;color: var(--content);">...</span>
          </summary>
          <div id="tcomment"></div>
      </details>
      <script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js">
      </script>
      <script>
          twikoo.init({
              envId: {{ .Site.Params.twikoo.id }},
          el: "#tcomment",
              lang: 'zh-CN',
              region: {{ .Site.Params.twikoo.region }},
          path: window.TWIKOO_MAGIC_PATH||window.location.pathname,
          })
      </script>
  </div>%
  

• 用hugo命令 重新生成静态网页即可

  cd YourBlogDir;
  sudo /home/ubuntu/shell/hugo --buildDrafts
  

• 接下来就可以看到结果了 本站的任意文章尾部点展开评论就能看到效果

评论数据存放位置及日志

• 存放在tkserver启动目录 data目录 json格式存放

• ll /home/ubuntu/twikoo/data
  total 8.0K
  -rw-r--r-- 1 ubuntu root 2.5K Jul 10 11:40 db.json
  -rw-r--r-- 1 ubuntu root 1.7K Jul 10 11:40 db.json.0
  -rw-r--r-- 1 ubuntu root    0 Jul 10 11:13 db.json.1
  -rw-r--r-- 1 ubuntu root    0 Jul 10 11:13 db.json.2
  

本文由 mdnice 多平台发布