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

lazyload

This commit is contained in:
xaoxuu 2021-03-04 22:30:56 +08:00
parent 83d73f67a3
commit a1eb248917
15 changed files with 136 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_config.yml
View File

@ -140,9 +140,7 @@ plugins:
lazyload: lazyload:
enable: true # [hexo clean && hexo s] is required after changing this value. enable: true # [hexo clean && hexo s] is required after changing this value.
js: https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js js: https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js
onlypost: false transition: blur # blur, fade
loadingImg: # https://7.dusays.com/2021/02/14/e45d2469cdeaf.svg
blurIn: true # 模糊加载效果 （loadingImg为空时有效）
# https://scrollrevealjs.org/api/reveal.html # https://scrollrevealjs.org/api/reveal.html
scrollreveal: scrollreveal:

2
dist/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

5
scripts/filters/index.js
View File

@ -1,5 +1,4 @@
'use strict'; 'use strict';
hexo.extend.filter.register('after_render:html', require('./lib/img_lazyload').processSite);
hexo.extend.filter.register('after_post_render', require('./lib/lazyload').processPost); hexo.extend.filter.register('after_render:html', require('./lib/img_onerror').processSite);
hexo.extend.filter.register('after_render:html', require('./lib/lazyload').processSite);

52
scripts/filters/lib/img_lazyload.js Normal file
View File

@ -0,0 +1,52 @@
/**
* img_lazyload.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
*
*/
'use strict';
const fs = require('hexo-fs');
function lazyProcess(htmlContent) {
const cfg = this.theme.config.plugins.lazyload;
if (cfg == undefined || cfg.enable != true) {
return htmlContent;
}
return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(imgTag, src_before, src_value, src_after) {
// might be duplicate
if (/data-srcset/gi.test(imgTag)) {
return imgTag;
}
if (/src="data:image(.*?)/gi.test(imgTag)) {
return imgTag;
}
if (imgTag.includes(' no-lazy ')) {
return imgTag;
}
var newImgTag = imgTag;
if (newImgTag.includes(' class="') == false) {
newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4);
}
// class 中增加 lazyload
newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){
var newClass = value;
if (newClass.length > 0) {
newClass += ' ';
}
newClass += 'lazyload';
if (value) {
return ori.replace(value, newClass);
} else {
return ori.replace('class="', 'class="' + newClass);
}
});
// 加载图
const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=';
newImgTag = newImgTag.replace(src_value, src_value + '" data-srcset="' + src_value + '" srcset="' + loadingImg);
return newImgTag;
});
}
module.exports.processSite = function(htmlContent) {
return lazyProcess.call(this, htmlContent);
};

23
scripts/filters/lib/img_onerror.js Normal file
View File

@ -0,0 +1,23 @@
/**
* img_onerror.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
* 发现这个和 img_lazyload 有点冲突，会被 img_lazyload 覆盖
*/
'use strict';
const fs = require('hexo-fs');
module.exports.processSite = function(htmlContent) {
return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(imgTag) {
if (/="data:image(.*?)/gi.test(imgTag)) {
return imgTag;
}
if (/onerror/gi.test(imgTag)) {
return imgTag;
}
if (imgTag.includes(' no-lazy ') == false) {
return imgTag;
}
return imgTag.slice(0,imgTag.length-1) + ' onerror="javascript:this.classList.add(\'error\');this.src=\'https://7.dusays.com/2021/03/03/87519671e4837.svg\';"' + imgTag.slice(imgTag.length-1);
});
};

67
scripts/filters/lib/lazyload.js
View File

@ -1,67 +0,0 @@
'use strict';
const fs = require('hexo-fs');
function lazyProcess(htmlContent, target) {
const cfg = this.theme.config.plugins.lazyload;
if (cfg == undefined || cfg.enable != true) {
return htmlContent;
}
if (cfg.onlypost == true) {
if (target != 'post') {
return htmlContent;
}
}
const loadingImg = cfg.loadingImg;
return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(str, p1, p2) {
// might be duplicate
if (/data-srcset/gi.test(str)) {
return str;
}
if (/src="data:image(.*?)/gi.test(str)) {
return str;
}
if (/no-lazy/gi.test(str)) {
return str;
}
let cls = '';
if (str.indexOf('class=') > -1) {
cls = str.substring(str.indexOf('class='));
if (cls.length > 7) {
const c = cls.substring(6, 7);
cls = cls.split(c);
if (cls.length > 1) {
cls = cls[0] + '"' + cls[1] + '"';
}
}
}
let result = str;
let newCls = '';
if (cls.length > 0 && result.includes('class=')) {
newCls = cls.replace(/(class=|[\"]*)/g, '') + ' ';
}
const oldCls = newCls.trim();
if (loadingImg) {
newCls += 'lazyload placeholder';
} else {
newCls += 'lazyload';
}
if (cls.length > 0) {
result = result.replace('"' + oldCls + '"', '"' + newCls + '"');
}
if (loadingImg) {
return result.replace(p2, p2 + '" class="lazyload placeholder" ' + 'data-srcset="' + p2 + '" srcset="' + loadingImg);
}
return result.replace(p2, p2 + '" class="lazyload" ' + 'data-srcset="' + p2 + '" srcset="' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=');
});
}
module.exports.processPost = function(data) {
data.content = lazyProcess.call(this, data.content, 'post');
return data;
};
module.exports.processSite = function(htmlContent) {
return lazyProcess.call(this, htmlContent, 'site');
};

9
scripts/tags/friends.js
View File

@ -19,7 +19,7 @@ hexo.extend.tag.register('friends', function(args) {
if (friends == undefined) { if (friends == undefined) {
friends = {}; friends = {};
} }
var el = '<div class="tag-plugin friends-wrap">'; var el = '<div class="tag-plugin users-wrap">';
function groupHeader(group) { function groupHeader(group) {
var header = '<div class="group-header">'; var header = '<div class="group-header">';
if (group.title) { if (group.title) {
@ -33,8 +33,8 @@ hexo.extend.tag.register('friends', function(args) {
} }
function cell(friend) { function cell(friend) {
if (friend.url && friend.title) { if (friend.url && friend.title) {
var cell = '<div class="user-simple">'; var cell = '<div class="user-card">';
cell += '<a class="user-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + friend.url + '">'; cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + friend.url + '">';
cell += '<img src="' + (friend.avatar || 'https://7.dusays.com/2021/03/03/87519671e4837.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/03/03/87519671e4837.svg\';"/>'; cell += '<img src="' + (friend.avatar || 'https://7.dusays.com/2021/03/03/87519671e4837.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/03/03/87519671e4837.svg\';"/>';
cell += '<div class="name"><span>' + friend.title + '</span></div>'; cell += '<div class="name"><span>' + friend.title + '</span></div>';
cell += '</a></div>' cell += '</a></div>'
@ -57,6 +57,9 @@ hexo.extend.tag.register('friends', function(args) {
el += '<div class="friendsjs-wrap"'; el += '<div class="friendsjs-wrap"';
el += ' id="friends-api"'; el += ' id="friends-api"';
el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/' + group.repo + '"'; el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/' + group.repo + '"';
if (hexo.theme.config.plugins.lazyload && hexo.theme.config.plugins.lazyload.enable) {
el += ' lazyload="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII="';
}
el += '>'; el += '>';
el += '<div class="group-body"></div>'; el += '<div class="group-body"></div>';
el += '</div>'; el += '</div>';

5
scripts/tags/site.js
View File

@ -34,7 +34,7 @@ hexo.extend.tag.register('sites', function(args) {
function cell(site) { function cell(site) {
if (site.url && site.title) { if (site.url && site.title) {
var cell = '<div class="site-card">'; var cell = '<div class="site-card">';
cell += '<a class="site-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + site.url + '">'; cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + site.url + '">';
cell += '<img src="' + (site.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + site.url)) + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/76b86c0226ffd.svg\';"/>'; cell += '<img src="' + (site.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + site.url)) + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/76b86c0226ffd.svg\';"/>';
cell += '<div class="info">'; cell += '<div class="info">';
cell += '<img src="' + (site.avatar || 'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg\';"/>'; cell += '<img src="' + (site.avatar || 'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg\';"/>';
@ -61,6 +61,9 @@ hexo.extend.tag.register('sites', function(args) {
el += '<div class="sitesjs-wrap"'; el += '<div class="sitesjs-wrap"';
el += ' id="sites-api"'; el += ' id="sites-api"';
el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/' + group.repo + '"'; el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/' + group.repo + '"';
if (hexo.theme.config.plugins.lazyload && hexo.theme.config.plugins.lazyload.enable) {
el += ' lazyload="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII="';
}
el += '>'; el += '>';
el += '<div class="group-body"></div>'; el += '<div class="group-body"></div>';
el += '</div>'; el += '</div>';

6
source/css/_defines/base.styl
View File

@ -26,6 +26,12 @@ trans2pro($op1, $t1, $op2, $t2)
-webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out -webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out -o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
trans3($op1, $op2, $op3)
transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
txt-ellipsis() txt-ellipsis()
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden

10
source/css/_layout/tag-plugins/friends.styl
View File

@ -1,4 +1,4 @@
.friends-wrap .users-wrap
overflow: hidden overflow: hidden
.group-header .group-header
margin: 0 0 1rem margin: 0 0 1rem
@ -21,7 +21,7 @@
margin: 2rem 0 margin: 2rem 0
text-align: center text-align: center
.friends-wrap .user-simple .users-wrap .user-card
flex-shrink: 1 flex-shrink: 1
display: flex display: flex
align-items: stretch align-items: stretch
@ -36,7 +36,7 @@
width: 16.66% width: 16.66%
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
width: 25% width: 25%
a .card-link
margin: 0 margin: 0
width: 100% width: 100%
color: var(--text-p1) color: var(--text-p1)
@ -60,6 +60,10 @@
background: var(--card) background: var(--card)
border-radius: 64px border-radius: 64px
margin: 0 0 0.5rem margin: 0 0 0.5rem
// transform
.users-wrap .user-card .card-link
>img
trans2 transform box-shadow trans2 transform box-shadow
&:hover &:hover
background: var(--hover-block) background: var(--hover-block)

9
source/css/_layout/tag-plugins/sites.styl
View File

@ -31,7 +31,7 @@
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % $gap) grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % $gap)
margin-bottom: 2rem margin-bottom: 2rem
.sites-wrap .group-body .site-card .site-link .sites-wrap .group-body .site-card .card-link
width: 100% width: 100%
display: flex display: flex
flex-direction: column flex-direction: column
@ -46,7 +46,6 @@
height: 120px height: 120px
object-fit: cover object-fit: cover
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2) box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
trans1: box-shadow
.info .info
margin-top: $gap * 0.5 margin-top: $gap * 0.5
line-height: 1.2 line-height: 1.2
@ -78,6 +77,10 @@
overflow: hidden overflow: hidden
-webkit-line-clamp: 2 -webkit-line-clamp: 2
.sites-wrap .group-body .site-card .site-link:hover // transform
.sites-wrap .site-card .card-link
>img
trans1: box-shadow
&:hover
>img >img
box-shadow: $boxshadow-float, $boxshadow-card-float box-shadow: $boxshadow-float, $boxshadow-card-float

14
source/css/_plugins/lazyload.styl
View File

@ -1,14 +1,22 @@
if hexo-config('plugins.lazyload.blurIn') == true if hexo-config('plugins.lazyload.transition') == 'blur'
img.lazyload:not(.placeholder) img.lazyload
trans2pro: transform 1s filter 0.25s trans2pro: transform 1s filter 0.25s
&:not(.loaded) &:not(.loaded)
filter blur(8px) filter blur(8px)
&.loaded &.loaded
filter none filter none
.group-body .site-card .card-link>img
trans2: box-shadow filter
.group-body .user-card .card-link>img
trans3: box-shadow filter transform
else else
img.lazyload:not(.placeholder) img.lazyload
trans2pro: transform 1s opacity 0.5s trans2pro: transform 1s opacity 0.5s
&:not(.loaded) &:not(.loaded)
opacity: 0 opacity: 0
&.loaded &.loaded
opacity: 1 opacity: 1
.group-body .site-card .card-link>img
trans2: box-shadow opacity
.group-body .user-card .card-link>img
trans3: box-shadow opacity transform

1
source/js/main.js
View File

@ -289,7 +289,6 @@ if (stellar.plugins.sitesjs) {
if (stellar.plugins.friendsjs) { if (stellar.plugins.friendsjs) {
const issues_api = document.getElementById('friends-api'); const issues_api = document.getElementById('friends-api');
if (issues_api != undefined) { if (issues_api != undefined) {
console.log(issues_api);
util.jQuery( () => { util.jQuery( () => {
util.loadScript(stellar.plugins.friendsjs, {defer:true}) util.loadScript(stellar.plugins.friendsjs, {defer:true})
}) })

11
source/js/plugins/friends.js
View File

@ -49,10 +49,10 @@ const friendsjs = {
$(el).find('.loading-wrap').remove(); $(el).find('.loading-wrap').remove();
const arr = data.content; const arr = data.content;
arr.forEach((item, i) => { arr.forEach((item, i) => {
var user = '<div class="user-simple">'; var user = '<div class="user-card">';
user += '<a class="user-link" target="_blank" rel="external nofollow noopener noreferrer"'; user += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer"';
user += ' href="' + item.url + '">'; user += ' href="' + item.url + '">';
user += '<img src="' + (item.avatar || 'https://7.dusays.com/2021/03/03/87519671e4837.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/03/03/87519671e4837.svg\';">'; user += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';">';
user += '<div class="name"><span>' + item.title + '</span></div>'; user += '<div class="name"><span>' + item.title + '</span></div>';
user += '</a>'; user += '</a>';
user += '</div>'; user += '</div>';
@ -70,15 +70,14 @@ $(function () {
for (var i = 0; i < els.length; i++) { for (var i = 0; i < els.length; i++) {
const el = els[i]; const el = els[i];
const api = el.getAttribute('api'); const api = el.getAttribute('api');
const group = el.getAttribute('group');
if (api == null) { if (api == null) {
continue; continue;
} }
var cfg = new Object(); var cfg = new Object();
cfg.class = el.getAttribute('class');
cfg.el = el; cfg.el = el;
cfg.api = api; cfg.api = api;
cfg.group = group; cfg.class = el.getAttribute('class');
cfg.avatar = 'https://7.dusays.com/2021/03/03/87519671e4837.svg';
friendsjs.layout(cfg); friendsjs.layout(cfg);
} }
}); });

10
source/js/plugins/sites.js
View File

@ -50,10 +50,10 @@ const sitesjs = {
const arr = data.content; const arr = data.content;
arr.forEach((item, i) => { arr.forEach((item, i) => {
var cell = '<div class="site-card">'; var cell = '<div class="site-card">';
cell += '<a class="site-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">'; cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
cell += '<img src="' + (item.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + site.url)) + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/76b86c0226ffd.svg\';"/>'; cell += '<img src="' + (item.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + site.url)) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
cell += '<div class="info">'; cell += '<div class="info">';
cell += '<img src="' + (item.avatar || 'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg') + '" onerror="javascript:this.src=\'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg\';"/>'; cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';"/>';
cell += '<span class="title">' + item.title + '</span>'; cell += '<span class="title">' + item.title + '</span>';
cell += '<span class="desc">' + (item.description || item.url) + '</span>'; cell += '<span class="desc">' + (item.description || item.url) + '</span>';
cell += '</div>'; cell += '</div>';
@ -73,7 +73,6 @@ $(function () {
for (var i = 0; i < els.length; i++) { for (var i = 0; i < els.length; i++) {
const el = els[i]; const el = els[i];
const api = el.getAttribute('api'); const api = el.getAttribute('api');
const group = el.getAttribute('group');
if (api == null) { if (api == null) {
continue; continue;
} }
@ -81,7 +80,8 @@ $(function () {
cfg.class = el.getAttribute('class'); cfg.class = el.getAttribute('class');
cfg.el = el; cfg.el = el;
cfg.api = api; cfg.api = api;
cfg.group = group; cfg.avatar = 'https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg';
cfg.screenshot = 'https://7.dusays.com/2021/02/20/76b86c0226ffd.svg';
sitesjs.layout(cfg); sitesjs.layout(cfg);
} }
}); });