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

Breaking Changes: site_verification 優化，需自行配置

_config.yml

@@ -459,25 +459,11 @@ google_adsense:
 # Verification (站長驗證)
 # --------------------------------------
 
-# Google Webmaster tools verification setting
+site_verification:
-# See: https://www.google.com/webmasters/
+  # - name: google_site_verification
-google_site_verification:
+  #   content: xxxxxx
-
+  # - name: baidu_site_verification
-# Bing Webmaster tools verification setting
+  #   content: xxxxxxx
-# 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:
 
 # 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

layout/includes/head/site_verification.pug

@@ -1,14 +1,3 @@
-if theme.google_site_verification
+if theme.site_verification
-  meta(name="google-site-verification" content=theme.google_site_verification)
+  each item in theme.site_verification
-
+    meta(name=item.name content=item.content)
-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)

layout/includes/mixins/article-sort.pug

@@ -11,9 +11,6 @@ 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)}'`)
         .article-sort-item-info
           .article-sort-item-time

layout/includes/mixins/post-ui.pug

@@ -9,9 +9,6 @@ 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)
       .recent-post-info(class=no_cover)
         a.article-title(href=url_for(link) title=title)= title

layout/includes/page/flink.pug

@@ -13,9 +13,6 @@
           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 )
                 span.flink-item-name= item.name 
                 span.flink-item-desc(title=item.descr)= item.descr

layout/includes/pagination.pug

@@ -15,9 +15,6 @@ 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')
           .pagination-info
             .label=_p('pagination.prev')
@@ -28,9 +25,6 @@ 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')
           .pagination-info
             .label=_p('pagination.next')

layout/includes/post/reward.pug

@@ -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)
           .post-qr-code-desc=item.text
 

layout/includes/sidebar.pug

@@ -2,9 +2,6 @@
   #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")
     .site-data
       if site.posts.length

layout/includes/widget/card_author.pug

@@ -1,9 +1,6 @@
 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")
       .author-info__name= config.author
       .author-info__description!= theme.aside.card_author.description || config.description

layout/includes/widget/card_recent_post.pug

@@ -14,9 +14,6 @@ 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)
           .content
             a.title(href=url_for(link) title=title)= title

package.json

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

scripts/filters/post_lazyload.js

@@ -8,9 +8,20 @@
 
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
-hexo.extend.filter.register('after_post_render', data => {
+if (!hexo.config.theme_config.lazyload.enable) return
-  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='
+function lazyload (htmlContent) {
-  data.content = data.content.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
+  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
-})
+  })
+}

scripts/helpers/related_post.js

@@ -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" ' +
+        '<img class="cover" src="' +
-        lazySrc +
-        '="' +
         this.url_for(cover) +
         '" alt="cover">'
       if (dateType === 'created') {

source/css/_global/index.styl

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

source/css/_mode/darkmode.styl

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