评论系统从Disqus到Valine

本文首发于我的个人博客：Suixin's Blog

Yelee主题默认支持三款主题：Disqus，多说和友言评论，参见Yelee主题使用说明。而目前多说和友言已经不能用了，Disqus也需要科学上网才可以加载使用，故添加一款新的评论系统势在必行。

Valine

Valine是一款优秀的评论系统，漂亮的界面、显示浏览器信息/系统信息、支持匿名评论、支持Markdown、Emoji等都是它的绝对优势，上图

Valine界面

在Yelee中配置

简单几步，即可完成主题的适配：

1. 按照官网提示，注册LeanCloud账号并拿到APP ID和APP Key；
2. 在/yelee/_config.yml中加入

valine:
  on: true
  appid: ***** # App ID
  appkey: ***** # App Key
  verify: true # 验证码
  notify: true # 评论回复邮箱提醒
  avatar: mp # 匿名者头像选项
  placeholder: Just go go!

CDN:中加入

valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

3. 在/yelee/layout/_partial/article.ejs中加入

<% } else if (theme.valine.on){ %>
    <%- partial('comments/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
      }) %>

缩进与其他的评论代码保持一致；

4. 创建/yelee/layout/_partial/comments/valine.ejs文件，写入

<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
    <div id="vcomment" class="comment"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="<%- theme.CDN.valine %>"></script>
    <script>
      new Valine({
        el: '#vcomment',
        notify: '<%= theme.valine.notify %>',
        verify: '<%= theme.valine.verify %>',
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar: "<%= theme.valine.avatar %>"
      });
    </script>
</section>

5. 在/yelee/source/css/_partial/mobile.styl最后加入：

#comments {
    margin: (10/16)rem 10px !important;
    padding: 1rem !important;
}

大功告成，执行hexo g -d即可看到Valine的评论框啦！

Valine的使用

评论框支持三个选项：昵称、邮箱、网址。
昵称：展示在评论区的昵称；
邮箱：在Gravatar注册的邮箱，填写后可显示自定义的头像；要想收到回复提醒必须填写邮箱哦～
网址：可设置为个人主页，评论后可通过点击昵称跳转到该网址。
别忘了，最重要的，Valine支持Markdown语法哦，快在评论区留言吧～

Valine Admin

一位大神对Valine进行了修改：Valine Admin 是 Valine 评论系统的扩展和增强，主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板，基于Akismet API实现准确的垃圾评论过滤。
根据配置手册进行一番配置，现在本文下方的评论系统已经完美支持邮件提醒了。
注：只有填写了邮箱才可以收到回复的邮件提醒哈～（这不是废话么……）

参考

https://blog.wangriyu.wang/2018/03-valine.html
https://panjunwen.com/valine-admin-document/