Hexo 优化 --- 支持邮件通知的评论 Valine 增强版

已有更简单的方式来实现，请参考： Hexo 优化 — Valine 扩展之邮件通知

前言

关于之前的 Hexo优化 --- 一款极简的评论系统，它满足了我对评论系统的一些基本要求。

但这个评论系统有一个痛点。虽然它虽然支持邮件提醒，但这个功能却很弱，无法提示到具体文章，也无法给评论者进行有效的回复通知，通常别人留完言，怎么还会再来你的博客看你是否回复了呢？。

而这款 Valine 的增强版，满足了这几个条件：

完善的邮件通知，自定义 SMTP 发件频率和内容不再受限
基于 Akismet 的垃圾评论自动标注和过滤
评论管理，避免直接操作数据库
……

邮件通知展示：

如果评论者还留下了邮箱，那么点击下面回复的时候，这个评论这也会收到相应的邮件通知：

同时会与评论者留下的邮箱发送邮件：

废话不多说了，开始配置吧。

配置

获取 APP ID 和 APP KEY

点击这里登录或注册 Leancloud

点这里创建应用，应用名看个人喜好。

选择刚刚创建的应用 > 设置 > 选择应用 Key，然后你就能看到你的 App ID 和 App Key 了，参考下图：

为了您的数据安全，请填写应用 > 设置 > 安全设置中的 Web 安全域名，如下图：

修改主题

可 Valine 增强版的作者，使用的并不是 Hexo 博客，更不可能 Next 主题了。所以要自己动手了。

为了不影响原版的 Valine，这里我们需要修改几个文件，使两者共存，且可随意切换。

步骤一：下载 Valine.min.js 到文件夹 themes/next/source/js/src 下。
步骤二：在 themes/next/layout/_third-party/comments 目录下新建文件 valine-modify.swig：

代码语言：javascript复制

{% if theme.valine_modify.enable and theme.valine_modify.appid and theme.valine_modify.appkey %}  
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="/js/src/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '{{ theme.valine.guest_info }}';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        av: AV, 
        el: '#comments' ,
        appId: '{{ theme.valine_modify.appid }}',
        appKey: '{{ theme.valine_modify.appkey }}',
        placeholder: '{{ theme.valine_modify.placeholder }}',
    });
  </script>
{% endif %}

步骤三：在 themes/next/layout/_third-party/comments 目录下修改 index.swig 文件，在最后一行添加：
{% include 'valine-modify.swig' %}
步骤四：在 themes/next/layout/_partials 目录下修改 comments.swig 文件的最后几行：原内容：
. {% elseif theme.valine.appid and theme.valine.appkey %} <div class="comments" id="comments"> </div> {% endif %}

{% endif %}

修改后：

代码语言：javascript复制

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>

  {% elseif theme.valine_modify.appid and theme.valine_modify.appkey %}
    <div class="comments" id="comments">
    </div>
  {% endif %}

{% endif %}