为博客添加评论区

Posted on Edited on In , Symbols count in article: 2.9k Reading time ≈ 3 mins.
给三个博客都加了评论区，记录一下分别做了什么

Bugrocery - Giscus

本博客的评论配置。

参考：给 Hexo 配置 Giscus 评论系统

安装插件： 

1
$ npm install hexo-next-giscus --save

在 giscus 生成相关参数： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
giscus:
  enable: true
  repo: # Github repository name
  repo_id: # Github repository id
  category: Announcements # Github discussion category
  category_id: # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1 
  reactions_enabled: 1
   # Available values: 0 | 1 
  emit_metadata: 1
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: preferred_color_scheme
  # Available values: en | zh-C
  lang: en
  # Available value: anonymous
  crossorigin: anonymous

将上述内容添加到 next 主题 _config.yml 的 comments 部分。
教程中说放在博客的 _config.yml 文件中即可，但一直不生效，改到主题的配置文件中才成功。

− 273.15 ℃ - Waline

生活博客的评论配置，该博客用 hugo + vercel 搭建，主题是 stack，该主题事先支持 Waline。

参考：Waline 快速上手

根据教程中提到的步骤，先在 LeanCloud 国际版注册应用，再到 Vercel 部署，最后修改主题配置文件中的 comments 部分。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
comments:
        enabled: true
        provider: waline

        waline:
            serverURL: #vercel 提供的仓库链接
            lang:
            visitor:
            avatar: 'monsterid'
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - name
                - email
            placeholder:
            locale:
                admin: Admin

Sparkles Club - Valine & Disqus

存文博客的评论配置，该博客使用 hugo + vercel 搭建，主题是 LoveIt，该主题事先支持 Valine。

参考：Hugo | 为 Blog 增加评论区

根据教程中提到的步骤，先在 LeanCloud 国际版注册应用，再到配置文件 config.toml 中修改 Valine 的部分，填入 LeanCloud 应用的 appID 和 appKey。其它参数修改可参考：valine 配置项

但目前没有生效，不知道原因。

看到多处提到 Valine 的安全性不高，因此改为另一个主题已经支持的评论系统，disqus。注册账号，为网站创建评论。一步步进行之后，到配置文件中修改以下部分： 

1
2
3
4
5
6
7
8
9
[params.page.comment]
      enable = true
      # Disqus comment config (https://disqus.com/)
      # Disqus 评论系统设置 (https://disqus.com/)
      [params.page.comment.disqus]
        enable = true
        # Disqus shortname to use Disqus in posts
        # Disqus 的 shortname，用来在文章中启用 Disqus 评论系统
        shortname = "" # 填入 Disqus 给出的 shortname

很顺利配置完成，但成功后才发现这个方法需要登录才能评论，但反正也没人用，改不改的以后再说。

Sparkles Club - Waline

终于找到时间更新一下这个需要登录的评论区了！
参考：Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章

根据教程先在 LeanCloud 国际版注册应用，再到 Vercel 部署，最后修改主题配置文件中的 comment 相关的部分。

修改博客配置文件时，配置中与强制登陆相关的内容被我注释掉。本来就是为了不登录用，再搞个强制登录干嘛！ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Waline comment config (https://waline.js.org/)
# Waline 评论系统设置 (https://waline.js.org/)
[params.page.comment.waline]
  enable = true
  #js = "https://cdn.jsdelivr.net/npm/@waline/client@latest"
  js = "https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js"
  meta = ['nick','mail','link']                           # 评论者相关属性
  requiredMeta = ['nick']                                 # 设置必填项，默认匿名，相比教程取消了邮箱为必填项
  # login = "force"                                       # 不必登录
  # placeholder = "为防恶意灌水攻击，评论前需注册并登录，望见谅~"     # 不登录所以这条没用了
  serverURL = ""                                          # Waline的服务端地址（必填），vercel 给的地址
  #imageHosting =                                         # 图床api，如果允许评论框上传图片
  uploadImage = false                                     # 评论上传图片功能
  avatar = "retro"                                        # Gravatar头像
  avatarCDN = "https://sdn.geekzu.org/avatar/"            # Gravatar头像CDN地址，不建议使用loli源
  pageSize = 20                                           # 评论列表分页，每页条数
  lang = "zh-CN"                                          # 多语言支持
  visitor = true                                          # 文章访问量统计
  highlight = true                                        # 代码高亮

“添加评论统计到文章元数据” 一步中要求把 /themes/LoveIt/layouts/posts/single.html 拷贝到 /layouts/posts/single.html，但我的博客系统中没有 /layouts/posts/ 这一路径。新建了路径把文件拷贝进去，并修改相关内容。因为不放心，把原本在主题内的 single.html 里的相关内容也改成了教程中提到的东西。

把更新内容推送到 github 之后，评论区火速生效！终于不用登录也可以评论了！！