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

lazy

This commit is contained in:
xaoxuu 2021-03-04 23:38:41 +08:00
parent a1eb248917
commit 07fa734341
9 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_config.yml
View File

@ -63,8 +63,6 @@ article:
related_posts:
enable: false
max_count: 5
placeholder_img: https://7.dusays.com/2021/02/20/76b86c0226ffd.svg
######## Comments ########
@ -148,5 +146,10 @@ plugins:
js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js
distance: 8px
duration: 500 # ms
interval: 50 # ms
interval: 100 # ms
scale: 1 # 0.1~1
default:
avatar: https://7.dusays.com/2021/03/03/87519671e4837.svg
link: https://7.dusays.com/2021/02/20/8f277b4ee0ecd.svg
cover: https://7.dusays.com/2021/02/20/76b86c0226ffd.svg

6
scripts/filters/lib/img_lazyload.js
View File

@ -27,13 +27,13 @@ function lazyProcess(htmlContent) {
if (newImgTag.includes(' class="') == false) {
newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4);
}
// class 中增加 lazyload
// class 中增加 lazy
newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){
var newClass = value;
if (newClass.length > 0) {
newClass += ' ';
}
newClass += 'lazyload';
newClass += 'lazy';
if (value) {
return ori.replace(value, newClass);
} else {
@ -42,7 +42,7 @@ function lazyProcess(htmlContent) {
});
// 加载图
const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=';
newImgTag = newImgTag.replace(src_value, src_value + '" data-srcset="' + src_value + '" srcset="' + loadingImg);
newImgTag = newImgTag.replace(src_value, loadingImg + '" data-src="' + src_value);
return newImgTag;
});
}

6
scripts/helpers/related_posts.js
View File

@ -26,14 +26,14 @@ hexo.extend.helper.register('popular_posts_wrapper', function(args){
function generateHTML(list){
var el = '';
el += '<a class="item" href="' + list.path + '" title="' + list.title + '" rel="bookmark ">';
el += '<a class="item" href="' + list.path + '" title="' + list.title + '">';
if (cfg.placeholder_img && cfg.placeholder_img.length > 0) {
if (hexo.theme.config.default.cover) {
el += '<div class="img">'
if (list.img && list.img != "") {
el += '<img src="' + list.img + '" />';
} else {
el += '<img src="' + cfg.placeholder_img + '" />';
el += '<img src="' + hexo.theme.config.default.cover + '" />';
}
el += '</div>';
}

5
scripts/tags/friends.js
View File

@ -35,7 +35,7 @@ hexo.extend.tag.register('friends', function(args) {
if (friend.url && friend.title) {
var cell = '<div class="user-card">';
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 || hexo.theme.config.default.avatar) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.avatar + '&quot;;"/>';
cell += '<div class="name"><span>' + friend.title + '</span></div>';
cell += '</a></div>'
return cell;
@ -57,9 +57,6 @@ hexo.extend.tag.register('friends', function(args) {
el += '<div class="friendsjs-wrap"';
el += ' id="friends-api"';
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 += '<div class="group-body"></div>';
el += '</div>';

7
scripts/tags/site.js
View File

@ -35,9 +35,9 @@ hexo.extend.tag.register('sites', function(args) {
if (site.url && site.title) {
var cell = '<div class="site-card">';
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.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
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 || hexo.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.link + '&quot;;"/>';
cell += '<span class="title">' + site.title + '</span>';
cell += '<span class="desc">' + (site.description || site.url) + '</span>';
cell += '</div>';
@ -61,9 +61,6 @@ hexo.extend.tag.register('sites', function(args) {
el += '<div class="sitesjs-wrap"';
el += ' id="sites-api"';
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 += '<div class="group-body"></div>';
el += '</div>';

2
source/css/_layout/partial/related_posts.styl
View File

@ -33,7 +33,7 @@
width: 100%
height: 100%
object-fit: cover
&:not(.lazyload)
&:not(.lazy)
trans1: transform 1s
@media screen and (max-width: $device-tablet)
width: 70vw

6
source/css/_layout/post_list.styl
View File

@ -80,7 +80,7 @@
height: 240px
@media screen and (max-width: $device-mobile-m)
height: 200px
&:not(.lazyload)
&:not(.lazy)
trans1: transform 1s
.post-list .post-card.post.photo .post-cover img
height: 400px
@ -116,8 +116,8 @@
align-items: center
img
object-fit: contain
img:not(.lazyload)
trans1: transform 0.75s
&:not(.lazy)
trans1: transform 0.75s
.post-list .post-card.wiki article .excerpt
margin: 1rem
min-width: 220px

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

@ -1,22 +1,29 @@
trans-cover($p, $t = 0.28s)
trans2pro: transform 1s $p $t
trans-site($p)
trans2: box-shadow $p
trans-user($p)
trans3: box-shadow transform $p
if hexo-config('plugins.lazyload.transition') == 'blur'
img.lazyload
trans2pro: transform 1s filter 0.25s
img.lazy
trans-cover filter
&:not(.loaded)
filter blur(8px)
&.loaded
&.loaded,&.error
filter none
.group-body .site-card .card-link>img
trans2: box-shadow filter
trans-site filter
.group-body .user-card .card-link>img
trans3: box-shadow filter transform
trans-user filter
else
img.lazyload
trans2pro: transform 1s opacity 0.5s
img.lazy
trans-cover opacity 0.5s
&:not(.loaded)
opacity: 0
&.loaded
&.loaded,&.error
opacity: 1
.group-body .site-card .card-link>img
trans2: box-shadow opacity
trans-site opacity
.group-body .user-card .card-link>img
trans3: box-shadow opacity transform
trans-user opacity

2
source/js/main.js
View File

@ -260,7 +260,7 @@ if (stellar.plugins.lazyload) {
// Set the options globally
// to make LazyLoad self-initialize
window.lazyLoadOptions = {
elements_selector: ".lazyload",
elements_selector: ".lazy",
threshold: 0
};
// Listen to the initialization event