Hexo-NexT 主题添加评论系统

静态博客无法直接构建评论系统，需要借助第三方平台的后端。NexT 主题支持 Disqus、Valine、Gitalk 等多种第三方评论系统。我推荐使用 Valine 或者 Disqus（加载评论需科学上网）。Valine 评论系统借助于 LeanCloud 存储数据，LeanCloud 的国内版本需要绑定域名和备案，这对于很多人来说不太方便，所以可以选择使用国际版。目前 NexT 主题支持多评论系统，不过我认为这项功能有些多余，有谁会无聊使用多种评论系统呢？不方便管理评论，将简单的管理变得更加复杂。

下面这一部分是设定多评论系统，首先设定默认的评论系统，然后是其他评论系统的优先级等等配置，由于我没有使用该项功能，所以不再做过多说明：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte
  active:
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #facebook_comments_plugin:
    #  text: <i class="fa fa-facebook-official" aria-hidden="true"></i> facebook
    #gitalk:
    #  order: -2

下面我将对 Disqus、Valine、Gitalk 三种评论系统的单独配置进行详细说明。

Disqus

◎ Disqus 官网主页

Disqus 评论系统我认为是诸多评论系统中最好的一个，无奈需要科学上网才能访问。首先是到官网注册一个用户，然后在官网的主页，有一个「GET STARTED」按钮，点击进入，可以看到如下界面：

选择「I want to install Disqus on my site」，就会跳转到信息设定页面。在信息设定页面，设定你的网站名称，比如我在这里填写的是「guanqr」，那么「guanqr」就是你的一个 shortname，记住这个名字。相应的，你的聊天系统的控制台对应的网址就是 guanqr.disqus.com。你还需要在这里填写你的网站类别和语言，这里我填写的是技术类「Tech」，语言是中文。

这些设定完成后，回到主题配置文件中，找到 Disqus 评论系统的配置，开启 Disqus 评论，shortname 填写之前你设定的网站名称，如下所示：

1
2
3
4
5
6
7
# Disqus
disqus:
  enable: true
  shortname: 
  count: true
  lazyload: false
  #post_meta_order: 0

到此，Disqus 评论系统的配置就完成了。如果你想实现在国内网络环境下也能访问 Disqus 评论的内容，则需要借助 Disqus API，这就用到了 DisqusJS。这里需要注意，目前 DisqusJS 仅支持评论的「读」操作，不支持「写」操作。

配置 DisqusJS 的时候，首先要到 Disqus API Application 处注册一个 Application，如下图所示，点击右边的「Register new application」。

然后进行网站的基本信息设定，将信息提交后，网站会提供给你一个 API Key，将这一长串字符记下来。

进入 [Settings] 页面，设置你的域名，Disqus 会检查 API 请求的 Referrer。

在这些都设定完成后，回到主题配置文件，进行 DisqusJS 的配置。开启 DisqusJS，这里的 api 是 DisqusJS 请求的 API Endpoint，通常情况下你应该配置一个 Disqus API 的反代并填入反代的地址。你也可以直接使用 Disqus 官方 API 的 Endpoint：https://disqus.com/api/。如果不填写，则默认为该插件的作者自己搭建的 Disqus API 反代 Endpoint：https://disqus.skk.moe/disqus/。apikey 就是上文中让你记下的那一串字符。shortname 即上文配置 Disqus 评论系统时记下的网站名称。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# DisqusJS
# Alternative Disqus - Render comment component using Disqus API.
# Demo: https://suka.js.org/DisqusJS/
# For more information: https://github.com/SukkaW/DisqusJS
disqusjs:
  enable: true
  # API Endpoint of Disqus API (https://disqus.com/api/).
  # Leave api empty if you are able to connect to Disqus API.
  # Otherwise you need a reverse proxy for Disqus API.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api:
  apikey: # Register new application from https://disqus.com/api/applications/
  shortname: # See: https://disqus.com/admin/settings/general/

Valine

◎ Valine 官方主页

Valine 评论系统是我认为的在国内网络环境下最好用的评论系统，可通过 Leancloud 管理评论，无广告，简洁美观。不过缺点就是，Leancloud 平台的不稳定性，在 2019 年夏季的时候，出现了一次域名停止解析的事故，原因是有人利用 Leancloud 进行一些非法行为，而平台管理人员并没有监管到位。在那次事故之后，Leancloud 加强了监管，国内用户必须进行实名注册，每一个服务器必须绑定一个备案的域名。如果你不想备案，可以选择使用 Leancloud 国际版。但谁也无法确保 Leancloud 国际版会发生什么事情。

Leancloud 国内版和国际版的配置相同，这里以国际版为例进行说明。首先进入官网进行用户注册，注册完成后点击「创建应用」，填写应用的名称，选择「开发版」进行创建。

进入刚才创建好的应用，在「储存」中选择「创建 Class」，设定 Class 名称为 Comment，设定 ACL 权限为创建者可读可写，其他人可读不可写。

然后进入「设置」中的「安全中心」，添加 Web 安全域名，防止其他用户盗用你的 Keys 存储个人数据。

再进入「设置」中的「应用 Keys」，记录 AppID 和 AppKey 的值。回到主题配置文件中，开启 Valine，在 Valine 配置中填写 AppID 和 AppKey 即可。在该项配置中，你也可以设置评论框中的提示语，默认是「Just go go」。当你将 visitor 选项设置为 true 时，可以记录当前页面的访客数。这一部分需要填写的内容可能根据 Valine 版本的更新会有相应的增减，不过基本功能的配置思路是一样的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid: # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

Gitalk

Gitalk 评论系统借助 GitHub 平台，将评论的数据存储在仓库的 Issues 中。另一款评论系统 Gitment 与之类似，不过由于 Gitment 已停止维护，目前已经从 NexT 主题中删除。

首先，你需要在 GitHub 上创建一个仓库，用来存放评论，用你存放博客源代码的仓库即可。然后创建一个 Github Application 用来授权登录。点击这里申请，「Authorization callback URL」（回调地址）填写你主页地址，完成后会生成相应的 clientID 和 clientSecret，记录这两项的值，回到主题配置文件的 Gitalk 设定中，开启 Gitalk，填写你的 GitHub 用户名，以及之前记录的 lientID 和 clientSecret 的值即可。

每一篇文章在你登录评论系统前都未开启评论功能，所以在你发布文章后，需要先浏览文章，在评论系统中登录你的账号，此时，Gitalk 就会将该篇文章的标题作为一个 Issue 记录在仓库的 Issues 中。如果 Gitalk 评论系统配置异常，请查看你的网站地址（回调地址）是否填写正确。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: # GitHub repo owner
  repo: # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

Utterances

有朋友向我咨询配置评论系统的时候，提到了信息安全方面的内容。像 Gitalk、Valine 这样的评论系统，都会将自己的 AppID 和 AppKey 暴露在网页的源码中，虽然说这些信息的泄露对评论的影响微乎其微，不过总觉得会有那么一点担忧。Utterances 评论系统和 Gitalk 类似，借助 GitHub 仓库的 Issues 存储评论信息，但 Utterances 的配置并不会设置 AppID 和 AppKey，只需要填写仓库名。

Utterances 评论系统并非主题包含的评论系统，因此需要自己添加代码，或者借助插件。NexT 主题提供了添加该评论系统的插件 hexo-next-utteranc.安装插件后，在配置文件 _config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
utteranc:
  enable: true
  repo: #Github repo such as :TrumanDu/comments
  pathname: pathname
  # theme: github-light,github-dark,github-dark-orange
  theme: github-light
  cdn: https://utteranc.es/client.js
  # If you want to modify priority, please config in **hexo**
  #priority:

然后在 GitHub 上安装 Utterances 应用程序，添加存储评论的仓库，再将仓库名填写在配置文件 _config.yml 中即可。

Hexo-NexT 主题添加评论系统

Disqus

Valine

Gitalk

Utterances

相关文章：