github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

pull/404/head
ppoffice 2018-11-11 17:41:07 -05:00
parent b138ed3a88
commit 8c356afb62
20 changed files with 155 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
includes/helpers/override.js
View File

@ -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)}">`;
});
}

2
layout/common/footer.ejs
View File

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

11
layout/common/head.ejs
View File

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

2
layout/common/navbar.ejs
View File

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

6
layout/common/scripts.ejs
View File

@ -1,5 +1,5 @@
<%- js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>
<%- js(cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')) %>
<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.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) %>

39
layout/plugin/animejs.ejs
View File

@ -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')) %>
<script>
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>
<%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %>
<%- _js('js/animation', true) %>
<% } %>
<% } %>

23
layout/plugin/back-to-top.ejs
View File

@ -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>
#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') %>
<%- _js('js/back-to-top', true) %>
<% } %>
<% } %>

21
layout/plugin/gallery.ejs
View File

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

4
layout/plugin/mathjax.ejs
View File

@ -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>
<% } %>

40
layout/plugin/outdated-browser.ejs
View File

@ -1,22 +1,22 @@
<% if (plugin !== false) { %>
<% if (head) { %>
<%- css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %>
<% } else { %>
<div id="outdated">
<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 class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<%- js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js')) %>
<script>
$(document).ready(function () {
// plugin function, place inside DOM ready function
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'flex'
})
});
</script>
<% } %>
<% if (head) { %>
<%- _css(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css')) %>
<% } else { %>
<div id="outdated">
<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 class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), false, true) %>
<script>
document.addEventListener("DOMContentLoaded", function () {
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'flex'
})
});
</script>
<% } %>
<% } %>

27
layout/plugin/progressbar.ejs
View File

@ -1,27 +1,4 @@
<% if (head && plugin !== false) { %>
<%- js(cdn('pace-js', '1.0.2', 'pace.min.js')) %>
<style>
.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>
<%- _css('css/progressbar') %>
<%- _js(cdn('pace-js', '1.0.2', 'pace.min.js')) %>
<% } %>

2
layout/search/baidu.ejs
View File

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

2
layout/search/google-cse.ejs
View File

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

6
layout/search/insight.ejs
View File

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

4
layout/share/sharejs.ejs
View File

@ -1,3 +1,3 @@
<div class="social-share"></div>
<%- 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')) %>
<%- _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')) %>

2
layout/widget/profile.ejs
View File

@ -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') %>

15
source/css/back-to-top.css Normal file
View File

@ -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);
}

22
source/css/progressbar.css Normal file
View File

@ -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;
}

37
source/js/animation.js Normal file
View File

@ -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'
});
}
});

8
source/js/gallery.js Normal file
View File

@ -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();
}
});