Hexo Next 主题点击加载 Disqus 和来必力双评论系统

发表于 | 阅读次数: |

本文解决两个问题：

  1. hexo next 主题（version 5.1.3)怎么设置成点击按钮再加载评论
  2. hexo next 主题怎样设置才能同时加载 Disqus 和来必力（livere）双评论系统或更多评论系统

设计思路

我的博客主要是面向墙向用户，所以只能在墙内评论系统里面选一个。不需要备案、登录方式相对多的系统就轮到来必力，唯一的缺点是加载的时候有点慢。但 Disqus 评论系统在墙外应用比较广、功能全，而且显得格调和水平比较高，于是就想加载两个系统。还有一种思路是用JavaScript判断用户的网络是否在中国大陆，然后再加载对应的评论系统。还有为Disqus设置代理的方法，不过评论少的时候折腾了收益不高。

在搜索实现方式的过程，发现还可以让用户点击按钮之后再加载评论系统，这样可避免缓冲过多的JavaScript脚本，改善读者的体验，让博客页面简洁。而且甚至还可以多个评论按钮，用户想看哪个评论系统就点哪个。

上面几种思路就有好几种排列组合了，我暂定选用了设置一个“加载评论”的按钮，读者点击之后同时加载两个评论系统，当然墙内用户看不到Disqus。

研究了hexo next 主题的源文件，发现它把带个博客拆成各种模块，再由配置文件里面的开关和JavaScript判断语句来决定最后生成的博客是什么样。而且最后生成的静态博客，还可以通过JavaScript的条件语句来判断是否加载某些模块。

以post页面的评论模块为例，它牵扯到的源文件有：

  • “\blog\themes\next_config.yml”

    这是主题配置文件，里面有开关和参数

    1
    2
    3
    4
    5
    6
    # Disqus

    disqus:
      enable: true
      shortname: 
      count: false

    ​

  • “\blog\themes\next\layout_layout.swig”

    layout就是布局，这里面有两行

    1
    {% include '_partials/comments.swig' %}
    1
    {% include '_third-party/comments/index.swig' %}

    大概就是它分别引用了comments.swig 和 index.swig 两个模块

  • “\blog\themes\next\layout_third-party\comments\index.swig”

    这个模块就是一堆include

1
2
3
4
5
6
7
8
{% include 'duoshuo.swig' %}
{% include 'disqus.swig' %}
{% include 'hypercomments.swig' %}
{% include 'youyan.swig' %}
{% include 'livere.swig' %}
{% include 'changyan.swig' %}
{% include 'gitment.swig' %}
{% include 'valine.swig' %}

  • “\blog\themes\next\layout_third-party\comments\disqus.swig”

    这个就是最最基础的disqus代码了，也就是disqus官方的代码。但是它有一堆if来判断具体怎么加载。但具体的代码貌似跟官方的不太一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %} ///duoshuo不激活才执行
   {% if theme.disqus.enable %}   ///前面disqus的开关
 {% if theme.disqus.count  %}      ///disqus commment数目显示
   <script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
 {% endif %}

 {% if page.comments %}
   <script type="text/javascript">   ///disqus核心代码，script标签里面包着JavaScript
     var disqus_config = function () {
       this.page.url = '{{ page.permalink }}';
       this.page.identifier = '{{ page.path }}';
       this.page.title = '{{ page.title| addslashes }}';
     };
     var d = document, s = d.createElement('script');
     s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
     s.setAttribute('data-timestamp', '' + +new Date());
     (d.head || d.body).appendChild(s);
   </script>
 {% endif %}

   {% endif %}
 {% endif %}

  • “\blog\themes\next\layout_partials\comments.swig”

    hexo next主题只加载一种评论插件的限定就这个在这里实现的。它用连环if语句来控制只实现一种评论插件（通过控制插件参数赋值的方式）

点击按钮加载 Disqus

《Hexo Next 主题点击加载 Disqus》这篇文章讲得很清楚。不过我的next 主题版本和它不一样，所以有一步还是有点区别，反复研究和测试，得出以下步骤。

1.打开需要更改的文件

“\blog\themes\next\layout_partials\comments.swig”

“\blog\themes\next\layout_third-party\comments\disqus.swig”

我用的是EmEditor来编辑，编辑之前可以先备份一下原文件，当然只要不关闭窗口，始终可以ctrl+Z到原文件的状态的。

2. 添加按钮

编辑第一个 comments.swig 文件，在文件内容 <div id="disqus_thread"> 前面加入下面内容：

1
2
3
<div style="text-align:center;">
  <button class="btn" id="load-disqus" onclick="disqus.load();">加载评论</button>
</div>

按钮样式我就直接用默认的btn，懒得改了。这里的开关就是onclick="disqus.load()

3.在Disqus的代码外面外包一层判断语句

《Hexo Next 主题点击加载 Disqus》disqus.swig的代码和next 5.1.3里面的disqus.swig长得不太一样，直接copy过来不能用。研究了一下，是要在disqus核心代码外面包一层这样的判断语句：

1
2
3
4
5
6
7
8
var disqus = {
  load : function disqus(){
      此处是disqus核心代码

        $('#load-disqus').remove(); ///加载后移除按钮
      }
  }
}

这个disqus = { load就对应onclick="disqus.load()

修改之后disqus.swig是如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.disqus.enable %}

    {% if theme.disqus.count  %}
      <script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
    {% endif %}

    {% if page.comments %}
      <script type="text/javascript">
var disqus = {
  load : function disqus(){
        var disqus_config = function () {
          this.page.url = '{{ page.permalink }}';
          this.page.identifier = '{{ page.path }}';
          this.page.title = '{{ page.title| addslashes }}';
        };
        var d = document, s = d.createElement('script');
        s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
$('#load-disqus').remove(); ///加载后移除按钮
 		}
}
      </script>
    {% endif %}

  {% endif %}
{% endif %}

我就不用那个disqus计数了。它其实是在标题的下面显示评论数，评论全是0的时候好难看。而且它一开始就默认加载，墙内用户会显示加载到失败。

同时加载 Disqus 和来必力双评论系统

上面谈到，hexo next是通过comments.swig里面的if语句和livere.swig里面的if语句来限定了加载disqus就不继续加载来必力。最简单粗暴的解决方法就是，直接把上述两个文件里面的来必力对应的分支语句copy到disqus的分支。

1.打开需要更改的文件

“\blog\themes\next\layout_partials\comments.swig”

“\blog\themes\next\layout_third-party\comments\disqus.swig”

“\blog\themes\next\layout_third-party\comments\livere.swig”

2.修改comments.swig中的disqus部分

在里面分别找到两个插件对应的语句。来必力的语句就是一行，直接插到disqus里面

1
2
3
4
5
6
7
8
 <div id="disqus_thread">
    <noscript>
      Please enable JavaScript to view the
      <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>
  </div>
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div> ///livere行
</div>

3.在disqus.swig里面直接插入来必力核心代码

先在livere.swig里面找出来必力的核心代码：

​

1
2
3
4
5
6
7
8
9
10
11
12
var d = document, s = d.createElement('script');
        s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
      (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');

​

插入disqus.swig里面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.disqus.enable %}

    {% if theme.disqus.count  %}
      <script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
    {% endif %}

    {% if page.comments %}
      <script type="text/javascript">
var disqus = {
  load : function disqus(){
        var disqus_config = function () {
          this.page.url = '{{ page.permalink }}';
          this.page.identifier = '{{ page.path }}';
          this.page.title = '{{ page.title| addslashes }}';
        };
        var d = document, s = d.createElement('script');
        s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
      (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');
$('#load-disqus').remove(); ///加载后移除按钮
 		}
}
      </script>
    {% endif %}

  {% endif %}
{% endif %}

测试成功

Markdown中分组标题#与有序列表并用时，#必须写在有序列表的序号前面。用Typora写作时，必须先按快捷键ctrl+数字指定标题的等级，再写序号。相反操作，就会变成“序号.###”的代码，虽然在Typora里面预览没有问题，但最终渲染成HTML时序号就乱了。

Chalkit wechat
欢迎您扫一扫上面的微信公众号，订阅我的博客！
坚持原创技术分享，您的支持将鼓励我继续创作！