Ultranti

春寒料峭,冻刹年少。

运用惰性加载Disqus(lazyload)加快网页访问速度

Rhysn's Avatar 2020-04-13 Hexo

使用 Hexo 等方式进行静态网站搭建,永远绕不开的就是评论问题的解决,而评论解决方案中总是要考虑 Disqus ,由此又引发了JavaScript、CSS、image、font files各种外部资源请求导致的页面渲染阻塞问题。

为了解决这一问题,国外网页设计 Osvaldas Valutis 编写了 disqusLoader.js 脚本,同时作者给出了非常详细的介绍Demo,在此只是尝试将此脚本引入Hexo,加速网页访问速度。

在 Hexo 主题 Suka 1.4.0中完成配置。

首先在 suka\layout\_plugin\comment\ 内创建 suka\layout\_plugin\comment\disqus 副本并重命名为 disqus_lazyload ,以此为基础完成修改。

common.ejs 文件中内容清空,之后的 lazyload 形式无需加载多余 JavaScript,将 main.ejs 内容修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="disqus"></div>
<div class="disqus-loading">Loading comments&hellip;</div>
<script src="https://cdn.jsdelivr.net/gh/osvaldasvalutis/disqusLoader.js/disqusloader.min.js"></script>
<script>
disqusLoader( '.disqus',
{
scriptUrl: '//<%= theme.comment.disqus.shortname %>.disqus.com/embed.js',
disqusConfig: function()
{
this.page.identifier = '<%= page.permalink %>';
this.page.url = '<%= page.permalink %>';
this.page.title = '<%= page.title %>';
this.callbacks.onReady = [function()
{
var el = document.querySelector( '.disqus-loading' );
if( el.classList )
el.classList.add( 'is-hidden' ); // IE 10+
else
el.className += ' ' + 'is-hidden'; // IE 8-9
}];
}
});
</script>

此部分代码中直接调用了 disqus 的设置内容,所以在主题配置文件中,将 comment 部分修改如下:

1
2
3
4
comment:
use: disqus_lazyload
disqus:
shortname: # Disqus's shortname

添加 CSS 样式,在 suka\layout\_partial\head\config_style.ejs 文件内 </style> 标签前追加如下内容:

1
2
3
4
5
6
7
.disqus-loading{
font-size: 26px;
font-weight: 300;
color: #777;
padding: 1.25rem 0; /* 20 */
}
.disqus-loading.is-hidden { display: none; }

Ps:

main.ejs 中引入部分使用 jsDelivr CDN 加速链接,也可以使用Github原始链接。

1
2
3
4
<!-  jsDelivr CDN ->
<script src="https://cdn.jsdelivr.net/gh/osvaldasvalutis/disqusLoader.js/disqusloader.min.js">
<!- Github ->
<script src="https://raw.githubusercontent.com/osvaldasvalutis/disqusLoader.js/master/disqusloader.js">

最终效果类似于:

其他主题修改内容都与此类似,大家可以自行尝试一下,轮子都被人造好了,我们直接装上跑就完了。

Author : Rhysn
This work is licensed under a CC BY-NC-SA 4.0 International License.
Link to this article : https://ultranti.com/article/lazy_loading_disqus_comments/

This article was last updated on days ago, and the information described in the article may have changed.
Loading comments…