使用 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…</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' ); else el.className += ' ' + 'is-hidden'; }]; } }); </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; } .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/