Breaking Changes: lazyload 優化 (增加高斯模糊過度特效,增加配置 lazyload 範圍,佔位圖應用到全站)

Breaking Changes: site_verification 優化,需自行配置
This commit is contained in:
Jerry 2021-03-24 21:57:30 +08:00
parent 4b381350a1
commit 6057297f44
16 changed files with 55 additions and 83 deletions

View File

@ -459,25 +459,11 @@ google_adsense:
# Verification (站長驗證)
# --------------------------------------
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:
# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:
# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:
# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:
# Yandex Webmaster tools verification setting
# see https://webmaster.yandex.com/
yandex_site_verification:
site_verification:
# - name: google_site_verification
# content: xxxxxx
# - name: baidu_site_verification
# content: xxxxxxx
# Beautify/Effect (美化/效果)
# --------------------------------------
@ -828,10 +814,12 @@ pangu:
field: site # site/post
# Lazyload (圖片懶加載)
# https://github.com/verlok/lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
enable: false
post: /img/loading.gif
field: site # site/post
placeholder:
blur: false
# PWA
# See https://github.com/JLHwung/hexo-offline

View File

@ -1,14 +1,3 @@
if theme.google_site_verification
meta(name="google-site-verification" content=theme.google_site_verification)
if theme.bing_site_verification
meta(name="msvalidate.01" content=theme.bing_site_verification)
if theme.baidu_site_verification
meta(name="baidu-site-verification" content=theme.baidu_site_verification)
if theme.qihu_site_verification
meta(name="360-site-verification" content=theme.qihu_site_verification)
if theme.yandex_site_verification
meta(name="yandex-verification" content=theme.yandex_site_verification)
if theme.site_verification
each item in theme.site_verification
meta(name=item.name content=item.content)

View File

@ -11,10 +11,7 @@ mixin articleSort(posts)
.article-sort-item(class=no_cover)
if article.cover && theme.cover.archives_enable
a.article-sort-item-img(href=url_for(article.path) title=title)
if theme.lazyload.enable
img(data-lazy-src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
else
img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
.article-sort-item-info
.article-sort-item-time
i.far.fa-calendar-alt

View File

@ -9,10 +9,7 @@ mixin postUI(posts)
if post_cover && theme.cover.index_enable
.post_cover(class=leftOrRight)
a(href=url_for(link) title=title)
if theme.lazyload.enable
img.post_bg(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
else
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
.recent-post-info(class=no_cover)
a.article-title(href=url_for(link) title=title)= title
.article-meta-wrap

View File

@ -13,10 +13,7 @@
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
if theme.lazyload.enable
img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
else
img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
span.flink-item-name= item.name
span.flink-item-desc(title=item.descr)= item.descr
!= page.content

View File

@ -15,10 +15,7 @@ if is_post()
.prev-post(class=hasPageNext)
- var pagination_cover = prev.cover === false ? prev.randomcover : prev.cover
a(href=url_for(prev.path))
if theme.lazyload.enable
img.prev-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
else
img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
.pagination-info
.label=_p('pagination.prev')
.prev_info=prev.title
@ -28,10 +25,7 @@ if is_post()
- var pagination_cover = next.cover == false ? next.randomcover : next.cover
.next-post(class=hasPagePrev)
a(href=url_for(next.path))
if theme.lazyload.enable
img.next-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
else
img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
.pagination-info
.label=_p('pagination.next')
.next_info=next.title

View File

@ -8,9 +8,6 @@
- var clickTo = item.link ? item.link : item.img
li.reward-item
a(href=url_for(clickTo) target='_blank')
if theme.lazyload.enable
img.post-qr-code-img(data-lazy-src=url_for(item.img) alt=item.text)
else
img.post-qr-code-img(src=url_for(item.img) alt=item.text)
img.post-qr-code-img(src=url_for(item.img) alt=item.text)
.post-qr-code-desc=item.text

View File

@ -2,10 +2,7 @@
#menu-mask
#sidebar-menus
.author-avatar
if theme.lazyload.enable
img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
else
img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
.site-data
if site.posts.length
.data-item.is-center

View File

@ -1,10 +1,7 @@
if theme.aside.card_author.enable
.card-widget.card-info
.card-info-avatar.is-center
if theme.lazyload.enable
img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
else
img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
.author-info__name= config.author
.author-info__description!= theme.aside.card_author.description || config.description

View File

@ -14,10 +14,7 @@ if theme.aside.card_recent_post.enable
.aside-list-item(class=no_cover)
if post_cover && theme.cover.aside_enable
a.thumbnail(href=url_for(link) title=title)
if theme.lazyload.enable
img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
else
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
.content
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'

View File

@ -1,6 +1,6 @@
{
"name": "hexo-theme-butterfly",
"version": "3.7.1-b1",
"version": "3.7.5-b1",
"description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json",
"scripts": {

View File

@ -8,9 +8,20 @@
const urlFor = require('hexo-util').url_for.bind(hexo)
hexo.extend.filter.register('after_post_render', data => {
if (!hexo.theme.config.lazyload.enable) return
const bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
data.content = data.content.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
return data
})
if (!hexo.config.theme_config.lazyload.enable) return
function lazyload (htmlContent) {
const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
}
if (hexo.config.theme_config.lazyload.field === 'site') {
hexo.extend.filter.register('after_render:html', function (data) {
return lazyload.call(this, data)
})
} else {
hexo.extend.filter.register('after_post_render', data => {
data.content = lazyload.call(this, data.content)
return data
})
}

View File

@ -41,7 +41,6 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
const limitNum = config.related_post.limit || 6
const dateType = config.related_post.date_type || 'created'
const headlineLang = this._p('post.recommend')
const lazySrc = config.lazyload.enable ? 'data-lazy-src' : 'src'
relatedPosts = relatedPosts.sort(compare('weight'))
@ -67,9 +66,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
relatedPosts[i].title +
'">'
result +=
'<img class="cover" ' +
lazySrc +
'="' +
'<img class="cover" src="' +
this.url_for(cover) +
'" alt="cover">'
if (dateType === 'created') {

View File

@ -206,6 +206,15 @@ img
&:not([src])
opacity: 0
// lazyload blur
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
img
&[data-lazy-src]:not(.loaded)
filter: blur(10px) brightness(1)
&[data-lazy-src].error
filter: none
.img-alt
margin: -.5rem 0 .5rem
color: #858585

View File

@ -94,11 +94,16 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.post-outdate-notice,
.error-img,
#article-container iframe,
img,
.gist,
.ads-wrap
filter: brightness(.8)
img
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
filter: blur(0) brightness(.8)
else
filter: brightness(.8)
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB