评论系统从Disqus到Valine

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

Valine

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

在Yelee中配置

简单几步,即可完成主题的适配:

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

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

    CDN:中加入

    1
    valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js
  3. /yelee/layout/_partial/article.ejs中加入

    1
    2
    3
    4
    5
    6
    <% } 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文件,写入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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最后加入:

    1
    2
    3
    4
    #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/