Hexo NexT 添加 Disqus 评论区

发表于 分类于 阅读次数： 繁 / 简： 繁 本文字数： 849 阅读时长 ≈ 3 分钟

本文简要介绍一下如何给博客增加 Disqus 评论区，同时保留原来的 Valine 评论区的过程。

本文运行环境：

1
2
3
4
5
node: v16.13.0
npm: 8.1.4
hexo: 5.4.0
hexo-cli: 4.3.0
NexT: 8.8.1

注册 Disqus

这个步骤比较简单，概述一下。首先你需要注册 Disqus，注册后，点击首页的 “GET STARTED”，并选择 “I want to install Disqus on my site” 选项。随后，重要的设置是 “Shortname”（Website Name，这个很重要，会在 Hexo 设置时用到），其他的设置不重要。计划选择 “Basic” 即可，无需付费。在 Installation 选择界面，由于我们不需要手动设置，直接点击左侧进入到下一步骤。后续的留言板相关设定与评论审核机制等，按照自己的喜好选择即可。在设置好一切后，网站就注册成功了。如需精细化设置，可以在站点设置页面进行。

在 NexT 中使用 Disqus

直接打开_config.next.yml，定位到# Comments Settings，下拉看到 Disqus 设置，直接填写：

_config.next.yml
1
2
3
4
disqus:
  enable: true
  shortname: [shortname]
  count: true

其中 shortname 就是刚才注册 Disqus 的时候填写的。好的，恭喜你已经完成了 Disqus 评论区的添加！

当然，因为原来有 Valine 评论区，所以可以在上方的 Comments 设置里加一些东西：

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: disqus
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    disqus:
      text: Disqus
      order: -2
    valine:
      text: Valine
      order: -1

这里设置了默认评论区为 Disqus，并且在 nav 项目里做了两个评论区的排序。

设置 DisqusJS

如果本文到此为止，那实在是太水了。而且 Disqus 是需要特殊手段联网才能看到的。为了解决这个问题，我们可以为 Disqus 设置一个代理。DisqusJS 是一个解决方案，我们依照此项目进行设置。

首先，我们去这里注册一个应用。随后记下 API Key，打开_config.next.yml，定位到 DisqusJS 进行配置：

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
# DisqusJS
# For more information: https://disqusjs.skk.moe
disqusjs:
  enable: true
  # API Endpoint of Disqus API (https://disqus.com/api/docs/).
  # Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api: https://disqus.skk.moe/disqus/
  apikey: [apiKey] # Register new application from https://disqus.com/api/applications/
  shortname: [shortname] # See: https://disqus.com/admin/settings/general/

在这里，由于我们开启了 DisqusJS，所以可以关闭原来的 Disqus 配置，并对 Comments 设置做出一定调整：

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: disqusjs # 改为 disqusjs
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    disqusjs: # 改为 disqusjs
      text: Disqus
      order: -2
    valine:
      text: Valine
      order: -1

# Disqus
# For more information: https://disqus.com
disqus:
  enable: false # 关闭 disqus
  shortname: [shortname]
  count: true

随后，记得在 Application 的 Settings 页面设置 Domains 为你的网站。

在这里，我们使用了项目作者自己搭建的反向代理 https://disqus.skk.moe/disqus/ ，你也可以参考这里查看作者推荐的 Serverless 平台自行搭建反向代理的方法。

请留意，如果需要看到 DisqusJS 的效果，请关闭特殊手段联网。反向代理会判断访客能否直接访问 Disqus，并显示相应页面。