chore(layout): optimize page loading with script defer and async attributes

includes/helpers/override.js

@@ -6,6 +6,8 @@
 *     <%- _list_categories() %>
 *     <%- _list_tags() %>
 *     <%- _toc() %>
+*     <%- _js() %>
+*     <%- _css() %>
  */
 const cheerio = require('cheerio');
 
@@ -121,4 +123,20 @@ module.exports = function (hexo) {
         });
         return toc;
     });
+
+    hexo.extend.helper.register('_js', function (url, defer = false, async = false) {
+        const urlFor = hexo.extend.helper.get('url_for').bind(this);
+        if (!url.endsWith('.js') && !url.includes('?')) {
+            url += '.js';
+        }
+        return `<script src="${urlFor(url)}"${async ? ' async' : ''}${defer ? ' defer' : ''}></script>`;
+    });
+
+    hexo.extend.helper.register('_css', function (url) {
+        const urlFor = hexo.extend.helper.get('url_for').bind(this);
+        if (!url.endsWith('.css') && !url.includes('?')) {
+            url += '.css';
+        }
+        return `<link rel="stylesheet" href="${urlFor(url)}">`;
+    });
 }

layout/common/footer.ejs

@@ -6,7 +6,7 @@
                 <% if (has_config('logo.text') && get_config('logo.text')) { %>
                     <%= get_config('logo.text') %>
                 <% } else { %>
-                    <img src="<%- url_for(get_config('logo')) %>" alt="" height="28">
+                    <img src="<%- url_for(get_config('logo')) %>" alt="<%= get_config('title') %>" height="28">
                 <% } %>
                 </a>
                 <p class="is-size-7">

layout/common/head.ejs

@@ -21,14 +21,15 @@
 <link rel="icon" href="<%- url_for(get_config('favicon')) %>">
 <% } %>
 
-<%- css(cdn('bulma', '0.7.2', 'css/bulma.css')) %>
+<%- _css(cdn('bulma', '0.7.2', 'css/bulma.css')) %>
-<%- css(iconcdn()) %>
+<%- _css(iconcdn()) %>
-<%- css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %>
+<%- _css(fontcdn('Ubuntu:400,600|Source+Code+Pro')) %>
-<%- css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %>
+<%- _css(cdn('highlight.js', '9.12.0', 'styles/' + get_config('article.highlight') + '.css')) %>
-<%- css('css/style') %>
 
 <% if (has_config('plugins')) { %>
     <% for (let plugin in get_config('plugins')) { %>
     <%- partial('plugin/' + plugin, { head: true, plugin: get_config('plugins')[plugin] }) %>
     <% } %>
 <% } %>
+
+<%- _css('css/style') %>

layout/common/navbar.ejs

@@ -5,7 +5,7 @@
             <% if (has_config('logo.text') && get_config('logo.text')) { %>
                 <%= get_config('logo.text') %>
             <% } else { %>
-                <img src="<%- url_for(get_config('logo')) %>" alt="" height="28">
+                <img src="<%- url_for(get_config('logo')) %>" alt="<%= get_config('title') %>" height="28">
             <% } %>
             </a>
         </div>

layout/common/scripts.ejs

@@ -1,5 +1,5 @@
-<%- js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>
+<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>
-<%- js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %>
+<%- _js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %>
 <script>moment.locale("<%= get_config('language', 'en') %>");</script>
 
 <% if (has_config('plugins')) { %>
@@ -8,4 +8,4 @@
     <% } %>
 <% } %>
 
-<%- js('js/main') %>
+<%- _js('js/main', true) %>

layout/plugin/animejs.ejs

@@ -2,42 +2,7 @@
     <% if (head) { %>
     <style>body>.navbar,body>.section,body>.footer{opacity: 0}</style>
     <% } else { %>
-    <%- js(cdn('animejs', '2.2.0', 'anime.js')) %>
+    <%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %>
-    <script>
+    <%- _js('js/animation', true) %>
-    function isIE() {
-        var ua = window.navigator.userAgent;
-        var msie = ua.indexOf('MSIE ');
-        var trident = ua.indexOf('Trident/');
-        return (msie > 0 || trident > 0);
-    }
-
-    $(document).ready(function () {
-        $('body>.navbar,body>.section,body>.footer').css('opacity', 1);
-        if (!isIE()) {
-            ['.column-main > .card',
-             '.column-left > .card',
-             '.column-right > .card'].map(function(target) {
-                anime({
-                    targets: target,
-                    scale: [0.8, 1],
-                    opacity: [0, 1],
-                    duration: 300,
-                    easing: 'easeOutSine',
-                    delay: function(el, i, l) {
-                        return i * 100;
-                    }
-                })
-            });
-
-            anime({
-                targets: '.navbar-main',
-                translateY: [-100, 0],
-                opacity: [0, 1],
-                duration: 300,
-                easing: 'easeOutSine'
-            });
-        }
-    });
-    </script>
     <% } %>
 <% } %>

layout/plugin/back-to-top.ejs

@@ -1,25 +1,10 @@
 <% if (plugin !== false) { %>
-<% if (!head) { %>
+<% if (head) { %>
+<%- _css('css/back-to-top') %>
+<% } else { %>
 <a id="back-to-top" title="<%= __('plugin.backtotop') %>" href="javascript:;">
     <i class="fas fa-chevron-up"></i>
 </a>
-<style>
+<%- _js('js/back-to-top', true) %>
-#back-to-top {
-    position: fixed;
-    padding: 8px 0;
-    transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
-    opacity: 0;
-    line-height: 24px;
-    outline: none;
-    transform: translateY(120px);
-}
-#back-to-top.fade-in {
-    opacity: 1;
-}
-#back-to-top.rise-up {
-    transform: translateY(0);
-}
-</style>
-<%- js('js/back-to-top') %>
 <% } %>
 <% } %>

layout/plugin/gallery.ejs

@@ -1,21 +1,10 @@
 <% if (plugin !== false) { %>
     <% if (head) { %>
-    <%- css(cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')) %>
+    <%- _css(cdn('lightgallery', '1.6.8', 'dist/css/lightgallery.min.css')) %>
-    <%- css(cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')) %>
+    <%- _css(cdn('justifiedGallery', '3.7.0', 'dist/css/justifiedGallery.min.css')) %>
     <% } else { %>
-    <%- js(cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js')) %>
+    <%- _js(cdn('lightgallery', '1.6.8', 'dist/js/lightgallery.min.js'), true) %>
-    <%- js(cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js')) %>
+    <%- _js(cdn('justifiedGallery', '3.7.0', 'dist/js/jquery.justifiedGallery.min.js'), true) %>
-    <script>
+    <%- _js('js/gallery', true) %>
-        (function ($) {
-            $(document).ready(function () {
-                if (typeof($.fn.lightGallery) === 'function') {
-                    $('.article').lightGallery({ selector: '.gallery-item' });
-                }
-                if (typeof($.fn.justifiedGallery) === 'function') {
-                    $('.justified-gallery').justifiedGallery();
-                }
-            });
-        })(jQuery);
-    </script>
     <% } %>
 <% } %>

layout/plugin/mathjax.ejs

@@ -1,10 +1,12 @@
 <% if (!head && plugin !== false) { %>
-<%- js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')) %>
+<%- _js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML'), true) %>
 <script>
+document.addEventListener("DOMContentLoaded", function () {
     MathJax.Hub.Config({
         "HTML-CSS": {matchFontHeight: false},
         SVG: {matchFontHeight: false},
         CommonHTML: {matchFontHeight: false}
     });
+});
 </script>
 <% } %>

layout/plugin/outdated-browser.ejs

@@ -1,22 +1,22 @@
 <% if (plugin !== false) { %>
-    <% if (head) { %>
+<% if (head) { %>
-    <%- css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %>
+<%- _css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %>
-    <% } else { %>
+<% } else { %>
-    <div id="outdated">
+<div id="outdated">
-        <h6>Your browser is out-of-date!</h6>
+    <h6>Your browser is out-of-date!</h6>
-        <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
+    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
-        <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
+            my browser now </a></p>
-    </div>
+    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
-    <%- js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')) %>
+</div>
-    <script>
+<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), false, true) %>
-        $(document).ready(function () {
+<script>
-            // plugin function, place inside DOM ready function
+    document.addEventListener("DOMContentLoaded", function () {
-            outdatedBrowser({
+        outdatedBrowser({
-                bgColor: '#f25648',
+            bgColor: '#f25648',
-                color: '#ffffff',
+            color: '#ffffff',
-                lowerThan: 'flex'
+            lowerThan: 'flex'
-            })
+        })
-        });
+    });
-    </script>
+</script>
-    <% } %>
+<% } %>
 <% } %>

layout/plugin/progressbar.ejs

@@ -1,27 +1,4 @@
 <% if (head && plugin !== false) { %>
-<%- js(cdn('pace-js', '1.0.2', 'pace.min.js')) %>
+<%- _css('css/progressbar') %>
-<style>
+<%- _js(cdn('pace-js', '1.0.2', 'pace.min.js')) %>
-.pace {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.pace-inactive {
-  display: none;
-}
-
-.pace .pace-progress {
-  background: #3273dc;
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  right: 100%;
-  width: 100%;
-  height: 2px;
-}
-</style>
 <% } %>

layout/search/baidu.ejs

@@ -1,4 +1,4 @@
-<%- css('css/search') %>
+<%- _css('css/search') %>
 <div class="searchbox">
     <div class="searchbox-container">
         <div class="searchbox-input-wrapper">

layout/search/google-cse.ejs

@@ -1,4 +1,4 @@
-<%- css('css/search') %>
+<%- _css('css/search') %>
 <div class="searchbox google-cse-search">
     <div class="searchbox-container">
         <div class="searchbox-input-wrapper">

layout/search/insight.ejs

@@ -24,6 +24,6 @@
         window.INSIGHT_CONFIG = INSIGHT_CONFIG;
     })(window);
 </script>
-<%- js('js/insight') %>
+<%- _js('js/insight', true) %>
-<%- css('css/search') %>
+<%- _css('css/search') %>
-<%- css('css/insight') %>
+<%- _css('css/insight') %>

layout/share/sharejs.ejs

@@ -1,3 +1,3 @@
 <div class="social-share"></div>
-<%- css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %>
+<%- _css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %>
-<%- js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %>
+<%- _js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %>

layout/widget/profile.ejs

@@ -14,7 +14,7 @@
         <nav class="level">
             <div class="level-item has-text-centered">
                 <div>
-                    <img class="image is-128x128 has-mb-6" src="<%= avatar() %>">
+                    <img class="image is-128x128 has-mb-6" src="<%= avatar() %>" alt="<%= get_config_from_obj(widget, 'author') %>">
                     <% if (get_config_from_obj(widget, 'author')) { %>
                     <p class="is-size-4 is-block">
                         <%= get_config_from_obj(widget, 'author') %>

source/css/back-to-top.css

@@ -0,0 +1,15 @@
+#back-to-top {
+    position: fixed;
+    padding: 8px 0;
+    transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
+    opacity: 0;
+    line-height: 24px;
+    outline: none;
+    transform: translateY(120px);
+}
+#back-to-top.fade-in {
+    opacity: 1;
+}
+#back-to-top.rise-up {
+    transform: translateY(0);
+}

source/css/progressbar.css

@@ -0,0 +1,22 @@
+.pace {
+    -webkit-pointer-events: none;
+    pointer-events: none;
+  
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+  
+  .pace-inactive {
+    display: none;
+  }
+  
+  .pace .pace-progress {
+    background: #3273dc;
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    right: 100%;
+    width: 100%;
+    height: 2px;
+  }

source/js/animation.js

@@ -0,0 +1,37 @@
+function isIE() {
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf('MSIE ');
+    var trident = ua.indexOf('Trident/');
+    return (msie > 0 || trident > 0);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    var containers = document.querySelectorAll('body>.navbar,body>.section,body>.footer');
+    for (var i = 0; i < containers.length; i++) {
+        containers[i].style.opacity = '1';
+    }
+    if (!isIE()) {
+        ['.column-main > .card',
+            '.column-left > .card',
+            '.column-right > .card'].map(function (target) {
+                anime({
+                    targets: target,
+                    scale: [0.8, 1],
+                    opacity: [0, 1],
+                    duration: 300,
+                    easing: 'easeOutSine',
+                    delay: function (el, i, l) {
+                        return i * 100;
+                    }
+                })
+            });
+
+        anime({
+            targets: '.navbar-main',
+            translateY: [-100, 0],
+            opacity: [0, 1],
+            duration: 300,
+            easing: 'easeOutSine'
+        });
+    }
+});

source/js/gallery.js

@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function () {
+    if (typeof ($.fn.lightGallery) === 'function') {
+        $('.article').lightGallery({ selector: '.gallery-item' });
+    }
+    if (typeof ($.fn.justifiedGallery) === 'function') {
+        $('.justified-gallery').justifiedGallery();
+    }
+});