老青菜

Hexo 点击加载 Disqus

2016-01-29

多说服务关闭了,不得不用Disqus(需要翻墙),Next 里默认是启动就开始加载 Disqus的js文件了,这样打开时候一直转圈,体验肯定很差了。

网上的方案有很多:

  1. js 判断用户的网络是否在中国大陆,然后再加载对应的评论系统
  2. 给 Disqus 设置代理的方法
  3. 添加 ”点击加载“ 按钮,点击的时候加载评论

前两种稍微麻烦一点,第三种改动较小,可定制程度比较高,体验也还可以。这里我们主要讲第三种方案。

打开 Disqus

找到文件:

/blog/themes/next/_config.yml

打开配置

# Disqus
disqus:
  enable: true
  shortname: narutoyq
  count: true

添加按钮

找到文件:

/blog/themes/next/layout/_scripts/third-party/comments/disqus.swig

打开后,在 <div id="disqus_thread"> 前面加入下面内容:

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

这里我用自己的 zhbtn 样式,需要自己编辑 custom.styl 文件,

/blog/themes/next/source/css/_custom/custom.styl

添加一下代码:

.zhbtn {
    display: inline-block;
    padding: 0 20px;
    font-size: 14px;
    color: #228B22;
    background: #fff;
    border: 2px solid #228B22;
    text-decoration: none;
    border-radius: 2px;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    line-height: 2;
}
.zhbtn:hover {
    border-color: #228B22;
    color: #fff;
    background: #228B22;
}

替换载入的 js

找到文件:

/blog/themes/next/layout_third-party/comments/disqus.swig

打开后,注释或者删除 count.js 的加载代码,

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

再替换 <script type="text/javascript"> 块里的代码:

<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>

大功告成,执行以下命令,重新生成就可以看到效果了。

hexo clean
hexo g
hexo s

参考链接


Hexo Next 主题点击加载 Disqus
点击加载 Disqus 和来必力
设置 Disqus 代理
js 判断是否可以翻墙

Tags: Hexo
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章