Hexo NexT 博客实现点击按钮加载评论功能

参考:Hexo Next 主题点击加载 Disqus 和来必力双评论系统 - Chalkit’s blog

对于评论插件低选择,首选当然是 Disqus,毕竟界面好看而且功能齐全,但是很遗憾中国大陆无法访问。对此,有两种替代方案,第一是转用其他的评论插件,我这里采用了 Valine;第二种方法是浏览文章时默认不加载评论,以方便无法访问 Disqus 的用户加快文章加载速度,当用户需要查看评论时候点击一个按钮加载评论。

要设置点击按钮后再加载 Disqus 评论,首先需要修改 /themes/next/layout/_partials/comments.swig 文件,定位到以下位置:

1
<div id="disqus_thread">

在上述代码之前,加入以下这段加载评论按钮的代码:

1
2
3
4
5
<div style="text-align:center;">
<button class="btncomment" id="load-disqus" onclick="disqus.load();">
Load Disqus comments
</button>
</div>

提示: 因为我自己修改了默认的 btn 按钮样式,就没有用默认的 btn 按钮。你也可以直接把 btncomment 改成 btn,这样就不用设置这里自定义设置 btncomment 按钮的样式了,具体 btncomment 设置见我的 自定义 CSS 文件

接下来要修改 /themes/next/layout/_scripts/third-party/comments/ 目录下的 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
37
38
39
40
41
<script type="text/javascript">
var disqus = { //插入这一行代码 (1/5)
load : function disqus(){ //插入这一行代码 (2/5)
var disqus_config = function () {
this.page.url = '{{ page.permalink }}';
this.page.identifier = '{{ page.path }}';
this.page.title = '{{ page.title| addslashes }}';
{% if __('disqus') !== 'disqus' -%}
this.language = '{{ __('disqus') }}';
{% endif -%}
};
function loadComments () {
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);
}

{% if theme.disqus.lazyload %}
$(function () {
var offsetTop = $('#comments').offset().top - $(window).height();
if (offsetTop <= 0) {
// load directly when there's no a scrollbar
loadComments();
} else {
$(window).on('scroll.disqus_scroll', function () {
var scrollTop = document.documentElement.scrollTop;
if (scrollTop >= offsetTop) {
$(window).off('.disqus_scroll');
loadComments();
}
});
}
});
{% else %}
loadComments();
{% endif %}
$('#load-disqus').remove(); //插入这一行代码 (3/5)
} //插入这一行代码 (4/5)
} //插入这一行代码 (5/5)
</script>

赞赏一下吧~ 还可以关注公众号订阅最新内容

0%