Next主题中的评论系统

发表于 更新于 阅读次数： Valine：
本文字数： 2.8k 阅读时长 ≈ 3 分钟

有了一个技术博客，当然需要有个评论区来和同好们相互交流。本文主要介绍NexT主题中的几种评论系统。

版本

NexT 不同版本可能配置文件和支持的插件有所不同，所以先附上本站所用 Hexo 与 NexT 版本信息：

1
2
3
4
Hexo: 3.9.0
NexT: 7.3.0
Gitalk: 1.6.2
Valine: 1.3.10

介绍

NexT主题本身带有很多的评论系统，例如畅言、Disqus、DisqusJS、facebook comments plugins、Gitalk、来必力、Valine、vkontakte，但是本身由于各种原因，有些评论系统在国内会抽风、连不上，本文就以我使用过的两款评论系统——Gitalk和Valine来介绍。当然，我本人更推荐Valine。

Gitalk

Gitalk介绍

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

特点

  • 使用 GitHub 登录

  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]

  • 支持个人或组织

  • 无干扰模式（设置 distractionFreeMode 为 true 开启）

  • 快捷键提交评论 （cmd|ctrl + enter）

Readme 在线示例

使用

首先，由于Gitalk是以Github的issue形式进行评论功能的，实质上还是通过Github进行评论，因而你需要一个public的库来存放评论，当然，如果你的博客所在的库就是public，可以直接使用博客的仓库地址。

其次，我们需要创建一个Github Application来授权登录，如果没有的话，你可以点击这里申请一个。

还有比较常规的方法就是

进入Github Applications

进入创建一个OAuth App

新建一个OAuth App

参数说明：

Application name： # 应用名称，随意

Homepage URL： # 网站URL，如https://mlogs.top或者https://my0sotis.github.io

Application description # 描述s，随意

Authorization callback URL：# 网站URL，https://my0sotis.github.io

点击注册后，会看到如下

OAuth APP 注册信息

其中，Client ID和Client Secret稍后需要，等会复制粘贴即可。

之后，在NexT注册的配置文件中找到gitalk

Gitalk配置

参数说明：

enable：是否启用，这里应为true

github_id：Github所属用户，应该是本人Github账号

repo：用于存储评论issue的仓库，可以为博客仓库

id：填location.pathname即可

client_id和client_secret：为刚才在GIthub OAuth Application申请后得到的信息。

admin_user：所属Github仓库的管理员

distraction_free_mode：点击评论窗口，周围是否变暗淡

language：使用语言

在初次使用Gitalk的时候，需要点击右上角的未登录用户进行登录即可。

问题：在使用过程中，由于国内访问github.com比较容易抽风，所以有时候会出现Network Error的情况，这个时候并不是配置出了问题，而是目前连不上Github，因此，在诸多考量之下，我还是将评论系统换成了Valine。

Valine评论

Valine介绍

Valine是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

特点

  • 快速
  • 安全
  • Emoji 😉
  • 无后端实现
  • MarkDown 全语法支持
  • 轻量易用(~15kb gzipped)
  • 文章阅读量统计

使用

LeanCloud申请应用

首先需要注册一个LeanCloud账号，而且需要进行实名认证，填入身份证和姓名。

然后，点击右上角应用->创建应用

创建应用

弹出如下一个弹窗

创建应用

应用名称自拟，计价方案选择开发版。

创建完成后，可以发现面板上出现了你刚才创建的应用，点进去。

首先需要对这个应用进行一些配置，点进设置->安全中心

LeanCloud设置

按照两个方框中的配置即可。

需要注意的是，由于博客本身还是要通过Github仓库的，所以仍需要将Github博客所在的仓库地址填进去。

实测在没有添加的情况下，之前的博客还可以进行评论，但是后续的博客评论区无法显示。

然后点击最左边菜单中的存储，我们需要在这里新建Comment和Counter两个表。Comment表用于存放评论，Counter表用于记录文章阅读量。

需要注意的是，Class的所有访问全选都要设置为所有用户。

配置Valine

Valine配置

按照我这里配置即可。

参数说明：

enable：启用Valine评论系统，设置为true即可

appid：你的LeanCloud应用的App ID

appkey：你的LeanCloud应用的App Key

notify：当用户使用邮箱登录并评论，有人回复了这条评论，会发送邮件提醒。

verify：在评论时，需要通过验证码验证。

placeholder：占位符

avatar：用户默认头像

guest_info：自定义评论标题

pageSize：一面评论的个数

language：使用语言

visitor：文章阅读量统计，设置为true即可

comment_count：统计评论个数

Valine邮件提醒

在上文中的配置中将notify项设置为true，然后到LeanCloud的应用中，点击设置->邮件模板

将邮件模板改为

1
2
3
4
5
<p>Hi, {{username}}</p>
<p>
你在 Mlog 的评论收到了新的回复，请点击查看：
</p>
<p><a href="http://mlogs.top/" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

点击保存即可。

注意事项

  • 发送次数过多，可能会暂时被Leancloud 屏蔽邮件发送功能
  • 由于邮件提醒功能使用的Leancloud的密码重置邮件提醒，只能传递昵称、邮箱两个属性，所以邮件提醒链接无法直达指定文章页。
  • 开启邮件提醒会默认开启验证码选项。