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: related_posts:
enable: false enable: false
max_count: 5 max_count: 5
placeholder_img: https://7.dusays.com/2021/02/20/76b86c0226ffd.svg
######## Comments ######## ######## Comments ########
@ -148,5 +146,10 @@ plugins:
js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js
distance: 8px distance: 8px
duration: 500 # ms duration: 500 # ms
interval: 50 # ms interval: 100 # ms
scale: 1 # 0.1~1 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) { if (newImgTag.includes(' class="') == false) {
newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4); newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4);
} }
// class 中增加 lazyload // class 中增加 lazy
newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){ newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){
var newClass = value; var newClass = value;
if (newClass.length > 0) { if (newClass.length > 0) {
newClass += ' '; newClass += ' ';
} }
newClass += 'lazyload'; newClass += 'lazy';
if (value) { if (value) {
return ori.replace(value, newClass); return ori.replace(value, newClass);
} else { } else {
@ -42,7 +42,7 @@ function lazyProcess(htmlContent) {
}); });
// 加载图 // 加载图
const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII='; 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; 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){ function generateHTML(list){
var el = ''; 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">' el += '<div class="img">'
if (list.img && list.img != "") { if (list.img && list.img != "") {
el += '<img src="' + list.img + '" />'; el += '<img src="' + list.img + '" />';
} else { } else {
el += '<img src="' + cfg.placeholder_img + '" />'; el += '<img src="' + hexo.theme.config.default.cover + '" />';
} }
el += '</div>'; 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) { if (friend.url && friend.title) {
var cell = '<div class="user-card">'; var cell = '<div class="user-card">';
cell += '<a class="card-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 || 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 += '<div class="name"><span>' + friend.title + '</span></div>';
cell += '</a></div>' cell += '</a></div>'
return cell; return cell;
@ -57,9 +57,6 @@ 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>';

7
scripts/tags/site.js
View File

@ -35,9 +35,9 @@ hexo.extend.tag.register('sites', function(args) {
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="card-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.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
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 || 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="title">' + site.title + '</span>';
cell += '<span class="desc">' + (site.description || site.url) + '</span>'; cell += '<span class="desc">' + (site.description || site.url) + '</span>';
cell += '</div>'; cell += '</div>';
@ -61,9 +61,6 @@ 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>';

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

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

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

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

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' if hexo-config('plugins.lazyload.transition') == 'blur'
img.lazyload img.lazy
trans2pro: transform 1s filter 0.25s trans-cover filter
&:not(.loaded) &:not(.loaded)
filter blur(8px) filter blur(8px)
&.loaded &.loaded,&.error
filter none filter none
.group-body .site-card .card-link>img .group-body .site-card .card-link>img
trans2: box-shadow filter trans-site filter
.group-body .user-card .card-link>img .group-body .user-card .card-link>img
trans3: box-shadow filter transform trans-user filter
else else
img.lazyload img.lazy
trans2pro: transform 1s opacity 0.5s trans-cover opacity 0.5s
&:not(.loaded) &:not(.loaded)
opacity: 0 opacity: 0
&.loaded &.loaded,&.error
opacity: 1 opacity: 1
.group-body .site-card .card-link>img .group-body .site-card .card-link>img
trans2: box-shadow opacity trans-site opacity
.group-body .user-card .card-link>img .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 // Set the options globally
// to make LazyLoad self-initialize // to make LazyLoad self-initialize
window.lazyLoadOptions = { window.lazyLoadOptions = {
elements_selector: ".lazyload", elements_selector: ".lazy",
threshold: 0 threshold: 0
}; };
// Listen to the initialization event // Listen to the initialization event