字节流的博客

为 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! 😊