Hexo 设置点击才加载 Disqus 评论

Disqus 评论的 js 加载代码默认是自动随着页面加载，由于目前 Disqus 评论在国内访问并不通畅，有可能拖慢整个页面的访问，本文记录在 Hexo 中设置点击之后才加载 Disqus 评论。只需要简单修改 Disqus 评论代码即可。

1. 修改 HTML

在需要显示评论的位置添加以下 HTML：

<section class="post comments">
    <button id="load-disqus-button" class="disqus-button" onclick="load_disqus();return false;">Comments</button>
    <div id="disqus_thread"></div>
</section>

2. 修改 JavaScript

将以下代码 script 标签中的部分复制到自己 Hexo 网站所加载的 js 文件中或者将以下完整代码添加到需要显示评论页面的 </body> 标签之前:

<script>
    var disqus_config = function() {
        this.page.url = "<%= post.permalink %>";
        this.page.identifier = "<%= post.slug %>";
    };

    var disqus_loaded = false;

    function load_disqus() {
        if (!disqus_loaded) {
            disqus_loaded = true;
            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);

            d.getElementById("load-disqus-button").style.display = "none";
        }
    }
</script>

注意 <%= theme.disqus_shortname %> 表示在 theme 的 _config.yml 文件中定义了 disqus_shortname，也可以直接在代码中将其替换为自己的 disqus_shortname 即可。

3. 简单设置 disqus-button 的样式

在自己 Hexo 网站样式表中简单设置 .disqus-button 样式。审查网页元素可以借鉴 ethanblog 的 button 样式。

至此，Hexo 设置点击才加载 Disqus 评论完成。

4. 部署代码最简单的办法

一般来说 Hexo 博客只需要在文章页面加载评论，则把以上两段代码复制到 post.ejs 文件最后，然后添加样式即可。