🏷️ 更新2.3.5 更新內容查看 https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/2.3.5

README.md

@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.0-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.5-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>

README_CN.md

@@ -1,6 +1,6 @@
 # hexo-theme-butterfly
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.0-blue"/></a>
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/releases"><img alt="Version" src="https://img.shields.io/badge/release-2.3.5-blue"/></a>
 <a href="https://jerryc.me"><img alt="Author" src="https://img.shields.io/badge/author-JerryC-blur"/></a>
 <a href="https://hexo.io"><img alt="Hexo" src="https://img.shields.io/badge/hexo-4.0+-0e83c"/></a>
 <a href="https://nodejs.org/"><img alt="node.js" src="https://img.shields.io/badge/node.js-8.0+-blur"/></a>

_config.yml

@@ -15,10 +15,6 @@ menu:
     - Music || /music/ || fa fa-music
     - Movie || /movies/ || fa fa-film
 
-# Favicon
-# ---------------
-favicon: /img/favicon.ico
-
 # PWA
 # See https://github.com/JLHwung/hexo-offline
 # ---------------
@@ -104,6 +100,10 @@ mermaid:
   # built-in themes: default/forest/dark/neutral
   theme: default
 
+# Favicon
+# ---------------
+favicon: /img/favicon.png
+
 # Post info settings
 # ---------------
 avatar:
@@ -114,7 +114,7 @@ avatar:
 index_img:
 
 # if the banner of page not setting,it will show the top_img
-default_top_img: /img/index.jpg
+default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg
 
 # the banner image of archive page
 archive_img:
@@ -144,7 +144,7 @@ cover:
   position: both
   # 當沒有設置cover時，默認的封面顯示
   default_cover:
-    - /img/post.jpg
+    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
 
 # if the photo link cannot connect,it will show that
 lodding_bg:
@@ -271,7 +271,7 @@ valine:
   emojiCDN: # emoji CDN
   enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
   requiredFields: nick,mail # required fields nick/mail/link
-  bg: /img/comment_bg.png # valine background
+  bg: # valine background
   count: false # dispaly comment count in top_img
 
 # utterances
@@ -375,6 +375,10 @@ related_post:
 # 圖片描述文字
 photofigcaption: false
 
+# anchor
+# when you scroll in post, the url will update according to header id.
+anchor: false
+
 ####    美化/效果    ####
 #--------------------------------
 
@@ -478,6 +482,7 @@ display_mode: light
 # 美化頁面顯示
 beautify:
   enable: false
+  field: post # site/post
   title-prefix-icon: '\f0c1'
   title-prefix-icon-color: '#F47466'
 
@@ -662,9 +667,8 @@ note:
   light_bg_offset: 0
 
 # 圖片懶加載
-# https://github.com/aFarkas/lazysizes
+# https://github.com/ApoorvSaxena/lozad.js
-lazyload:
+lazyload: false
-  enable: true
 
 # 避免重複網址分散seo
 canonical: true
@@ -735,7 +739,7 @@ CDN:
   canvas_ribbon_piao: /js/third-party/piao.js
   canvas_nest: /js/third-party/canvas-nest.js
 
-  lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js
+  lazyload: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
   instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js
   typed: https://cdn.jsdelivr.net/npm/typed.js
   js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js

layout/flink.pug

@@ -8,8 +8,8 @@
             each item in i.link_list
               .md-links-item
                 a(href=url_for(item.link)  title=item.name target="_blank")
-                  if theme.lazyload.enable
+                  if theme.lazyload
-                    img.lazyload(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                    img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
                   else
                     img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
                   .md-links-title= item.name 

layout/includes/additional-js.pug

@@ -42,8 +42,8 @@ if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
 if theme.instantpage.enable
   script(src=url_for(theme.CDN.instantpage) type="module")
 
-if theme.lazyload.enable
+if theme.lazyload
-  script(src=url_for(theme.CDN.lazyload) async="")
+  script(src=url_for(theme.CDN.lazyload))
 
 //- 鼠標特效
 if theme.click_heart && theme.click_heart.enable

layout/includes/head/config.pug

@@ -102,7 +102,9 @@ script.
     highlightLang: !{theme.highlight_lang},
     highlightShrink: '!{theme.highlight_shrink}',
     isFontAwesomeV5: !{theme.fontawesome_v5 && theme.fontawesome_v5.enable},
-    isPhotoFigcaption: !{theme.photofigcaption}
+    isPhotoFigcaption: !{theme.photofigcaption},
+    islazyload: !{theme.lazyload},
+    isanchor: !{theme.anchor}
     
   }
 

layout/includes/mixins/post-ui.pug

@@ -9,8 +9,8 @@ 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
+            if theme.lazyload
-              img.post_bg.lazyload(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+              img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
             else
               img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
       .recent-post-info(class=no_cover)

layout/includes/pagination.pug

@@ -17,8 +17,8 @@ else
       .prev-post(class=hasPageNext)
         - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
         a(href=url_for(page.prev.path))
-          if theme.lazyload.enable
+          if theme.lazyload
-            img.prev_cover.lazyload(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'` )
+            img.prev_cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'` )
           else
             img.prev_cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'` )
           .pagination-info
@@ -30,8 +30,8 @@ else
       - var pagination_cover = page.next.cover == false ? page.next.randomcover : page.next.cover
       .next-post(class=hasPagePrev)
         a(href=url_for(page.next.path))
-          if theme.lazyload.enable
+          if theme.lazyload
-            img.next_cover.lazyload(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'`)
+            img.next_cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'`)
           else
             img.next_cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.lodding_bg.post_page)}'`)
           .pagination-info

layout/includes/post/reward.pug

@@ -6,6 +6,6 @@
       ul.reward-all
         each item in theme.reward.QR_code
           li.reward-item
-            img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
+            img.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
             .post-qr-code__desc=(item.itemlist||item).text
 

layout/includes/widget/card_recent_post.pug

@@ -15,8 +15,8 @@
             a(href=url_for(link))
               if post_cover && theme.cover.aside_enable
                 .aside-post-cover
-                  if theme.lazyload.enable
+                  if theme.lazyload
-                    img.aside-post-bg.lazyload(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+                    img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
                   else
                     img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
               .aside-post-title(class=no_cover)

layout/post.pug

@@ -2,7 +2,7 @@ extends includes/layout.pug
 
 block content
   article#post(class="")
-    #article-container!=page.content
+    #article-container.post-content!=page.content
     include includes/post/post-copyright.pug
     .tag_share
       if (theme.post_meta.post.tags)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "2.3.0",
+  "version": "2.3.5",
   "private": true,
   "engines": {
     "node": ">=8.10.0"

scripts/filters/post_lazyload.js

@@ -2,36 +2,19 @@
  * Butterfly
  * lazyload
  * replace src to data-src
- * add class 'lazyload'
  */
 
 'use strict'
 
-const url_for = require('hexo-util').url_for.bind(hexo)
+const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function lazyProcess (htmlContent) {
-  var bg = url_for(hexo.theme.config.lodding_bg.post)
+  var bg = hexo.theme.config.lodding_bg.post ? urlFor(hexo.theme.config.lodding_bg.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
-  return htmlContent.replace(
+  return htmlContent.replace(/(<img .*?src=)/ig, `$1 ${bg} data-src=`)
-    /<img(.*?)src="(.*?)"(.*?)>/gi,
-    (str, p1, p2, p3) => {
-      if (/data-src/gi.test(str)) {
-        return str
-      }
-      if (/class="(.*?)"/gi.test(str)) {
-        str = str.replace(/class="(.*?)"/gi, (classStr, p1) => {
-          return classStr.replace(p1, `${p1} lazyload`)
-        })
-        str = str.replace(p2, `${bg}`)
-        return str.replace('>', ` data-src="${p2}">`)
-      }
-      str = str.replace(p2, `${bg}`)
-      return str.replace(p3, ` class="lazyload" data-src="${p2}" ${p3}`)
-    }
-  )
 }
 
 var processPost = function (data) {
-  if (!hexo.theme.config.lazyload.enable) return
+  if (!hexo.theme.config.lazyload) return
   data.content = lazyProcess.call(this, data.content)
   return data
 }

scripts/helpers/related_post.js

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

source/css/_layout/post.styl

@@ -1,147 +1,157 @@
-#article-container
+beautify()
-  if hexo-config('beautify.enable')
+  headStyle(fontsize)
-    headStyle(fontsize)
+    padding-left: unit(fontsize + .4, 'rem')
-      padding-left: unit(fontsize + .4, 'rem')
 
-      code
+    code
-        font-size: unit(fontsize, 'rem')
+      font-size: unit(fontsize, 'rem')
 
+    &:before
+      margin-left: unit((-(fontsize + .2)), 'rem')
+      font-size: unit(fontsize, 'rem')
+
+    &:hover
+      padding-left: unit(fontsize + .6, 'rem')
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    cursor: pointer
+    transition: all .2s ease-out
+
+    &:before
+      position: absolute
+      top: calc(50% - .35rem)
+      color: $title-prefix-icon-color
+      content: $title-prefix-icon
+      font-style: normal
+      font-variant: normal
+      line-height: 1
+      transition: all .2s ease-out
+      text-rendering: auto
+      -webkit-font-smoothing: antialiased
+
+      if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+        font-weight: 600
+        font-family: 'Font Awesome 5 Free'
+      else
+        font-weight: normal
+        font-family: FontAwesome
+
+    &:hover
       &:before
-        margin-left: unit((-(fontsize + .2)), 'rem')
+        color: $light-blue
-        font-size: unit(fontsize, 'rem')
+
+  h1
+    headStyle(1)
+
+  h2
+    headStyle(.9)
+
+  h3
+    headStyle(.8)
+
+  h4
+    headStyle(.7)
+
+  h5
+    headStyle(.6)
+
+  h6
+    headStyle(.6)
+
+  ol,
+  ul
+    margin-top: .4rem
+    padding: 0 0 0 .8rem
+    list-style: none
+    counter-reset: li
+
+    p
+      margin: 0 0 .5rem
+
+    ol,
+    ul
+      padding-left: .5rem
+
+    li
+      position: relative
+      margin: .2rem 0
+      padding: .1rem .5rem .1rem 1.5rem
 
       &:hover
-        padding-left: unit(fontsize + .6, 'rem')
+        &:before
-
+          transform: rotate(360deg)
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6
-      cursor: pointer
-      transition: all .2s ease-out
 
       &:before
         position: absolute
-        top: calc(50% - .35rem)
+        top: 0
-        color: $title-prefix-icon-color
+        left: 0
-        content: $title-prefix-icon
+        background: $light-blue
-        font-style: normal
+        color: $card-bg
-        font-variant: normal
+        cursor: pointer
-        line-height: 1
+        transition: all .3s ease-out
-        transition: all .2s ease-out
-        text-rendering: auto
-        -webkit-font-smoothing: antialiased
 
-        if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+  ol
-          font-weight: 600
+    > li
-          font-family: 'Font Awesome 5 Free'
+      &:before
-        else
+        margin-top: .2rem
-          font-weight: normal
+        width: w = 1.2rem
-          font-family: FontAwesome
+        height: h = w
+        border-radius: .5 * w
+        content: counter(li)
+        counter-increment: li
+        text-align: center
+        font-size: .6rem
+        line-height: h
 
+  ul
+    > li
       &:hover
         &:before
-          color: $light-blue
+          border-color: $theme-button-hover-color
 
-    h1
+      &:before
-      headStyle(1)
+        $w = .3rem
+        top: 10px
+        margin-left: .45rem
+        width: w = $w
+        height: h = w
+        border: .5 * w solid $light-blue
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
 
-    h2
+no-beautify()
-      headStyle(.9)
+  ol,
+  ul
+    margin-top: .4rem
 
-    h3
+    p
-      headStyle(.8)
+      margin: 0 0 .5rem
-
-    h4
-      headStyle(.7)
-
-    h5
-      headStyle(.6)
-
-    h6
-      headStyle(.6)
 
     ol,
     ul
-      margin-top: .4rem
+      padding-left: .5rem
-      padding: 0 0 0 .8rem
-      list-style: none
-      counter-reset: li
 
-      p
+    li
-        margin: 0 0 .5rem
+      position: relative
+      margin: .3rem 0
+      padding-left: .3rem
 
-      ol,
+#article-container
-      ul
+  if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
-        padding-left: .5rem
+    beautify()
+  else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
+    no-beautify()
 
-      li
+    &.post-content
-        position: relative
+      beautify()
-        margin: .2rem 0
-        padding: .1rem .5rem .1rem 1.5rem
-
-        &:hover
-          &:before
-            transform: rotate(360deg)
-
-        &:before
-          position: absolute
-          top: 0
-          left: 0
-          background: $light-blue
-          color: $card-bg
-          cursor: pointer
-          transition: all .3s ease-out
-
-    ol
-      > li
-        &:before
-          margin-top: .2rem
-          width: w = 1.2rem
-          height: h = w
-          border-radius: .5 * w
-          content: counter(li)
-          counter-increment: li
-          text-align: center
-          font-size: .6rem
-          line-height: h
-
-    ul
-      > li
-        &:hover
-          &:before
-            border-color: $theme-button-hover-color
-
-        &:before
-          $w = .3rem
-          top: 10px
-          margin-left: .45rem
-          width: w = $w
-          height: h = w
-          border: .5 * w solid $light-blue
-          border-radius: w
-          background: transparent
-          content: ''
-          line-height: h
   else
-    ol,
+    no-beautify()
-    ul
-      margin-top: .4rem
-      counter-reset: li
-
-      p
-        margin: 0 0 .5rem
-
-      ol,
-      ul
-        padding-left: .5rem
-
-      li
-        position: relative
-        margin: .3rem 0
-        padding-left: .3rem
 
 a
   color: $a-link-color

source/img/post_loadding.svg

@@ -1 +0,0 @@
-<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-pacman" style="background: none;"><g ng-attr-style="display:{{config.showBean}}" style="display:block"><circle cx="74.5405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.536s" repeatCount="indefinite"></animate></circle><circle cx="94.9405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="-0.264s" repeatCount="indefinite"></animate></circle><circle cx="54.7405" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="#a3d9ef"><animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="0.8" begin="0s" repeatCount="indefinite"></animate></circle></g><g ng-attr-transform="translate({{config.showBeanOffset}} 0)" transform="translate(-15 0)"><path d="M50 50L20 50A30 30 0 0 0 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path><path d="M50 50L20 50A30 30 0 0 1 80 50Z" ng-attr-fill="{{config.c1}}" fill="#82bbe4" transform="rotate(-29.6108 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1" dur="0.8s" begin="0s" repeatCount="indefinite"></animateTransform></path></g></svg>

source/js/main.js

@@ -445,6 +445,13 @@ $(function () {
     })
   }
 
+  /**
+   * lazyload
+   */
+  if (GLOBAL_CONFIG.islazyload) {
+    window.lozad('img').observe()
+  }
+
   /**
    * 滾動處理
    */
@@ -532,11 +539,13 @@ $(function () {
       }, 100)
     }
 
-    // function updateAnchor (anchor) {
+    // anchor
-    //   if (window.history.replaceState && anchor !== window.location.hash) {
+    var isanchor = GLOBAL_CONFIG.isanchor
-    //     window.history.replaceState(null, null, anchor)
+    var updateAnchor = function (anchor) {
-    //   }
+      if (window.history.replaceState && anchor !== window.location.hash) {
-    // }
+        window.history.replaceState(undefined, undefined, anchor)
+      }
+    }
 
     // find head position & add active class
     // DOM Hierarchy:
@@ -565,7 +574,7 @@ $(function () {
 
       var currentActive = $('.toc-link.active')
       if (currentId && currentActive.attr('href') !== currentId) {
-        // updateAnchor(currentId)
+        if (isanchor) updateAnchor(currentId)
 
         $('.toc-link').removeClass('active')
 
@@ -711,11 +720,7 @@ $(function () {
 
   $darkModeButtom.click(function () {
     switchReadMode()
-    try {
+    if (typeof utterancesTheme === 'function') utterancesTheme()
-      utterancesTheme()
-    } catch (e) {
-      return false
-    }
   })
 
   /**