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

前言

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

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

而这款 Valine 的增强版,满足了这几个条件:

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

邮件通知展示:

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

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

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

配置

获取 APP ID 和 APP KEY

点击这里登录或注册 Leancloud
点这里创建应用,应用名看个人喜好。
选择刚刚创建的应用 > 设置 > 选择应用 Key,然后你就能看到你的 App IDApp Key 了,参考下图:

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

修改主题

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

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

  • 步骤二:在 themes/next/layout/_third-party/comments 目录下新建文件 valine-modify.swig

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {% 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 文件,在最后一行添加:

    1
    {% include 'valine-modify.swig' %}
  • 步骤四:在 themes/next/layout/_partials 目录下修改 comments.swig 文件的最后几行:
    原内容:

    1
    2
    3
    4
    5
    6
      {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
    {% endif %}

    {% endif %}

修改后:

1
2
3
4
5
6
7
8
9
10
  {% 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 %}

  • 步骤五:修改 next 主题配置文件 _config ,添加以下内容:
    1
    2
    3
    4
    5
    valine_modify:
    enable: true
    appid: 'Your APP ID', # 这里填写上面得到的APP ID
    appkey: 'Your APP KEY', # 这里填写上面得到的APP KEY
    placeholder: ヾノ≧∀≦)o来啊,快活啊! # 留言框占位提示文字

同时记得把原来的 Valine 禁用

1
2
valine:
enable: false

配置后台

虽然 Valine 是无后端的,但为了实现邮件通知和垃圾评论过滤,需要部署少量的 LeanEngine 代码。不用担心,代码我都写好了,不需要本地开发环境,只要在网页点两下就能完成。

  1. 打开 LeanCloud 后台,进入云引擎设置页。
    填写代码库并保存:https://github.com/panjunwen/Valine-Admin.git

注:推荐使用 https://github.com/zhaojun1998/Valine-Admin 这个库,功能一致,就是我美化了下邮件样式(见上图)。


切换到部署标签页,分支使用 master,点击部署即可:


然后默默等待部署完成。

  1. 此外,你需要设置云引擎的环境变量以提供必要的信息,如下示例:

Akismet Key 申请链接,如果你不需要反垃圾评论,Akismet Key 可以忽略。

  1. 设置二级域名后你可以访问评论管理后台。

后台登录需要账号密码,需要在这里设置,只需要填写 email、password、username,这三个字段即可,使用 usernmae 或 email 登陆即可。

  1. 设置完成后重启一下云引擎实例一切就正常工作啦!

LeanCloud 休眠策略

免费版的 LeanCloud 容器,是有强制性休眠策略的,不能 24 小时运行:

  • 每天必须休眠 6 个小时
  • 30 分钟内没有外部请求,则休眠。
  • 休眠后如果有新的外部请求实例则马上启动(但激活时发送邮件会失败)。

分析了一下上方的策略,如果不想付费的话,最佳使用方案就设置定时器,每天 7 - 23 点每 20 分钟访问一次,这样可以保持每天的绝大多数时间邮件服务是正常的。

最后附定时器代码:

1
*/20 7-23 * * * curl https://你配置的域名前缀.leanapp.cn

结语

最后感谢下 Valine 的作者和增强 Valine 的作者,本文参考:
Valine: 独立博客评论系统
原 Valine 项目地址
增强版 Valine 项目地址

坚持原创技术分享,您的支持将鼓励我继续创作!