Fork me on GitHub

hexo配置Valine评论系统+邮箱提醒

hexo配置Valine评论系统+邮箱提醒

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

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

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

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

邮件通知展示:
image

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

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

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

配置

获取 APP ID 和 APP KEY

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

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

hint:安全域名就是你博客的首地址

修改主题 (如果是新版的next 我自己用的是5.1以上 可以不用执行只需将主题配置文件中的valine 的enable: false 改成 enable: true 即可)

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

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

  1. 步骤一:下载 Valine.min.js 到文件夹 themes/next/source/js/src 下。

  2. 步骤二:在 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 %}

也可以不执行步骤一只需将步骤二中的代码改为一下即可:

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="//unpkg.com/valine@latest/dist/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 %}
  1. 步骤三:在 themes/next/layout/_third-party/comments 目录下修改 index.swig 文件,在最后一行添加:

    1
    {% include 'valine-modify.swig' %}
  2. 步骤四:在 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 %}
  1. 步骤五:修改 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 这个库,功能一致,就是我美化了下邮件样式(见上图)。

image

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

image

image

然后默默等待部署完成。

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

image

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


image
http://www.zhaojun.im/hexo-valine-modify/
http://www.zhaojun.im/hexo-valine-admin/

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

image

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

image
登陆评论系统的后台管理:

image
用户名和密码要填:

image

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

image

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

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

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

最后附定时器代码:

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

参考链接:
http://www.zhaojun.im/hexo-valine-modify/
http://www.zhaojun.im/hexo-valine-admin/
https://www.xxwhite.com/2017/Valine.html yilia主题
https://github.com/iissnan/hexo-theme-next/pull/1983
https://ioliu.cn/2017/add-valine-comments-to-your-blog/

本文标题:hexo配置Valine评论系统+邮箱提醒

文章作者:hans

发布时间:2018年08月27日 - 23:08

最后更新:2019年03月06日 - 23:03

原始链接:https://hans1980775481.github.io/2018/08/27/hexo配置Valine评论系统-邮箱提醒/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束 感谢您的阅读-------------
0%
;