Hexo Next 主题点击加载 Disqus

感觉 Disqus 的评论载入后有点花 ,发现别人有的点击载入方式很不错,搜索了一下,只要简单的 Copy & Save 就能搞定,于是就 ヾ(●゜▽゜●)

需要修改的文件:

  • [HEXO_PATH]/themes/next/layout/_partials/comments.swig
  • [HEXO_PATH]/themes/next/layout/_scripts/third-party/comments/disqus.swig
  • [HEXO_PATH]/themes/next/source/css/_custom/custom.styl

1. 添加按钮

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

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

Update:
一开始没有发现 Next 自带了一个按钮的样式,没有加上 class="btn",所以在第三步中自己写了一个简单的样式,不过自带的感觉更好一些,还有动画什么哒~

2. 替换 Disqus 载入的 js

然后编辑 disqus.swig 文件,需要替换原本的 Disqus 的加载的内容,如果希望显示评论数量,就保留 run_disqus_script('count.js') 这一行,这样页面载入时还会加载 disqus 的资源:

1
2
3
4
run_disqus_script('count.js');
{% if page.comments %}
run_disqus_script('embed.js');
{% endif %}

替换为下面的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var disqus = {
load : function disqus(){
if(typeof DISQUS !== 'object') {
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());

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

前面的 function run_disqus_script(disqus_script){} 这一段,不打算显示评论数量的话,可以一起删掉,不显示评论数量的话,那么点击加载按钮之前,网页是不会加载来自 Disqus 的资源的。

3. 为按钮添加样式

然后在 custom.styl 文件内给需要点击的按钮添加样式,第一步中加了 class="btn" 的话,就不用管这一段了 :

1
2
3
4
5
6
7
8
9
10
11
// for comment load button
#load-disqus {
background-color:#FFFFFF;
padding:3px;
margin:0 auto;
position:relative;
font-size:14px;
color:#555;
text-decoration:none;
border: solid 1px #2D2D2D;
}

4. Problem

  1. 如果选择不显示评论数量的话,Next 主题所带的显示评论数目地方的地方都只显示一个竖杠就结束了,感觉不太好,在 custom.styl 加入 css 屏蔽掉好了:

    1
    2
    3
    .post-comments-count{
    display: none!important;
    }
  2. 网站有新评论的话,Disqus 默认是没有通知的,找了一下也只有邮件的通知,打开就好了。

  3. 感觉原本 Next 应该是优先载入评论的,文章都是页面刷出来后等一下才载入,于是那个点击加载的按钮在页面刷出来的时候就存在了,网页拉到底部刷新一下就能发现了,不过除非是太短的文章,也没有啥影响的样子。

5. Update

更新 Next 到最新的 v5.1.3 后,按钮的样式不太正常。看着是只有鼠标悬浮的样式,不想费劲找那里出了问题。简单粗暴的处理了一下。

将第一步中的 <button class="btn" 修改为 <button class="disbtn"
然后直接将对应的 css 样式粘帖到 custom.styl 中就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.disbtn {
display: inline-block;
padding: 0 20px;
font-size: 14px;
color: #fff;
background: #222;
border: 2px solid #222;
text-decoration: none;
border-radius: 0;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
line-height: 2;
}

.disbtn:hover {
border-color: #222;
color: #222;
background: #fff;
}

参考链接: