字节流的博客

为 Hexo 博客主题 NexT 添加 LiveRe 评论支持

注意:最新版 hexo-theme-next 已经包含 LiveRe 插件,下载最新版本,配置 livere_uid 即可使用,无需按照文章中的方法配置(文章中只是描述了添加过程及代码实现)。


Hexo 博客主题中,NexT 是一个比较简洁,大方的主题,正如其官方描述【精于心,简于形】。并且有三种外观、多语言、多套代码高亮主题等,还支持一些自定义扩展,使用和配置起来也是相当方便。

社会化评论插件,之前用的是 Disqus,但是对于国内用户来说,经常性的加载不出来(自带梯子好些),改用多说。多说老是奇奇怪怪地就服务器挂了,让咨询客服,毛线啊。于是想找个还可以用的看得过去的评论插件,在 Issues 发现了个叫 LiveRe(来必力)的评论插件,韩国出的,试试吧。🙃

注册 LiveRe

进入 LiveRe,注册账号。

LiveRe 有两个版本:

  1. City 版:是一款适合所有人使用的免费版本;
  2. Premium 版:是一款能够帮助企业实现自动化管理的多功能收费版本。

我们 City 版就够了。

安装,获取 uid

填写完成后,进入到 管理页面 -> 代码管理 -> 一般网站 代码中,data-uid 即为所需 uid

添加 LiveRe 插件

第一步

首先在 _config.yml 文件中添加如下配置:

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中 livere_uid 即上一步获取到的 uid

第二步

layout/_scripts/third-party/comments/ 目录中添加 livere.swig,文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}

{% if theme.livere_uid %}
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
{% endif %}

{% endif %}

优先使用其他评论插件,如果其他评论插件没有开启,且 LiveRe 评论插件配置开启了,则使用 LiveRe。其中脚本代码为上一步管理页面中获取到的。

第三步

layout/_scripts/third-party/comments.swig 文件中追加:

1
{% include './comments/livere.swig' %}

引入 LiveRe 评论插件。

第四步

最后,在 layout/_partials/comments.swig 文件中条件最后追加 LiveRe 插件是否引用的判断逻辑:

1
2
3
{% elseif theme.livere_uid %}
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

其中 data-uid 属性的值即在主题配置文件中配置的 theme.livere_uid 的值。

至此,为 NexT 主题添加 LiveRe 评论插件完成。

效果见下方评论框 ⬇️⬇️⬇️ (觉得还可以的话留个言吧 🙃 )。

Thanks! 😊