breaking changes: 更新 fancybox 到 4

improvement: 網站資料顯示，但標籤和分類為0時，數量顯示為 0，而不是隱藏
improvement: subtitle 代碼優化， 1.當source設為false，同時sub也沒有配置，將會讀取hexo配置文件的 subtitle,2.無須使用轉義字符
improvement: 禁止ios點擊搜索框，頁面放大的問題

_config.yml

@@ -595,16 +595,13 @@ subtitle:
   loop: true
   # source調用第三方服務
   # source: false 關閉調用
-  # source: 1  調用搏天api的隨機語錄（簡體）
+  # source: 1  調用搏天 api 的隨機語錄（簡體）
   # source: 2  調用一言網的一句話（簡體）
   # source: 3  調用一句網（簡體）
   # source: 4  調用今日詩詞（簡體）
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
-  # 如果有英文逗號' , ',請使用轉義字元 ,
+  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
-  # 如果有英文雙引號' " ',請使用轉義字元 "
-  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
-  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
   sub:
 
 # Loading Animation (加載動畫)
@@ -876,8 +873,8 @@ CDN:
   pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
 
   # photo
-  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
+  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
+  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js
   medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
 
   # snackbar

layout/includes/head.pug

@@ -20,7 +20,7 @@
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width,initial-scale=1")
+meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")
 title= tabTitle
 if pageKeywords
   meta(name="keywords" content=pageKeywords)

layout/includes/page/flink.pug

@@ -13,7 +13,7 @@
           each item in i.link_list
             .flink-list-item
               a(href=url_for(item.link)  title=item.name target="_blank")
-                .flink-item-icon
+                .flink-item-icon.not-lightbox
                   img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                 .flink-item-name= item.name 
                 .flink-item-desc(title=item.descr)= item.descr

layout/includes/sidebar.pug

@@ -3,26 +3,21 @@
   #sidebar-menus
     .avatar-img.is-center
       img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-    .site-data
+    .site-data.is-center
-      if site.posts.length
+      .data-item
-        .data-item.is-center
+        a(href=url_for(config.archive_dir) + '/')
-          .data-item-link
+          .headline= _p('aside.articles') 
-            a(href=url_for(config.archive_dir) + '/')
+          .length-num= site.posts.length
-              .headline= _p('aside.articles') 
-              .length-num= site.posts.length
 
-      if site.tags.length
+      .data-item
-        .data-item.is-center
+        a(href=url_for(config.tag_dir) + '/' )
-          .data-item-link
+          .headline= _p('aside.tags')
-            a(href=url_for(config.tag_dir) + '/' )
+          .length-num= site.tags.length
-              .headline= _p('aside.tags')
+
-              .length-num= site.tags.length
+      .data-item
+        a(href=url_for(config.category_dir) + '/')
+          .headline= _p('aside.categories') 
+          .length-num= site.categories.length
 
-      if site.categories.length
-        .data-item.is-center
-          .data-item-link
-            a(href=url_for(config.category_dir) + '/')
-              .headline= _p('aside.categories') 
-              .length-num= site.categories.length
     hr
     !=partial('includes/header/menu_item', {}, {cache: true})

layout/includes/third-party/subtitle.pug

@@ -1,4 +1,5 @@
-- let source = theme.subtitle.source
+- const { effect,loop,source,sub } = theme.subtitle
+- let subContent = sub || new Array()
 
 case source
   when 1
@@ -7,14 +8,14 @@ case source
         fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
           .then(response => response.json())
           .then(data => {
-            if (!{theme.subtitle.effect}) {
+            if (!{effect}) {
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+              const sub = !{JSON.stringify(subContent)}
-              var both = sub.unshift(data.text)
+              sub.unshift(data.text)
-              typed = new Typed('#subtitle', {
+              window.typed = new Typed('#subtitle', {
                 strings: sub,
                 startDelay: 300,
                 typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
+                loop: !{loop},
                 backSpeed: 50,
               })
             } else {
@@ -23,7 +24,7 @@ case source
           })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -39,15 +40,15 @@ case source
         fetch('https://v1.hitokoto.cn')
           .then(response => response.json())
           .then(data => {
-            if (!{theme.subtitle.effect}) {
+            if (!{effect}) {
-              var from = '出自 ' + data.from
+              const from = '出自 ' + data.from
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+              const sub = !{JSON.stringify(subContent)}
-              var both = sub.unshift(data.hitokoto, from)
+              sub.unshift(data.hitokoto, from)
-              var typed = new Typed('#subtitle', {
+              window.typed = new Typed('#subtitle', {
                 strings: sub,
                 startDelay: 300,
                 typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
+                loop: !{loop},
                 backSpeed: 50,
               })
             } else {
@@ -56,7 +57,7 @@ case source
           })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -70,16 +71,16 @@ case source
     script.
       function subtitleType () {
         getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
-          var con = str[0]
+          const con = str[0]
-          if (!{theme.subtitle.effect}) {
+          if (!{effect}) {
-            var from = '出自 ' + str[1]
+            const from = '出自 ' + str[1]
-            var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+            const sub = !{JSON.stringify(subContent)}
-            var both = sub.unshift(con, from)
+            sub.unshift(con, from)
-            var typed = new Typed('#subtitle', {
+            window.typed = new Typed('#subtitle', {
               strings: sub,
               startDelay: 300,
               typeSpeed: 150,
-              loop: !{theme.subtitle.loop},
+              loop: !{loop},
               backSpeed: 50,
             })
           } else {
@@ -88,7 +89,7 @@ case source
         })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -102,16 +103,16 @@ case source
     script.
       function subtitleType () {
         getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
-          jinrishici.load(function (result) {
+          jinrishici.load(result =>{
-            if (!{theme.subtitle.effect}) {
+            if (!{effect}) {
-              var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
+              const sub = !{JSON.stringify(subContent)}
-              var content = result.data.content
+              const content = result.data.content
-              var both = sub.unshift(content)
+              sub.unshift(content)
-              var typed = new Typed('#subtitle', {
+              window.typed = new Typed('#subtitle', {
                 strings: sub,
                 startDelay: 300,
                 typeSpeed: 150,
-                loop: !{theme.subtitle.loop},
+                loop: !{loop},
                 backSpeed: 50,
               })
             } else {
@@ -121,7 +122,7 @@ case source
         })
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {
@@ -132,22 +133,23 @@ case source
       }
 
   default
+    - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
-        if (!{theme.subtitle.effect}) { 
+        if (!{effect}) { 
-          var typed = new Typed("#subtitle", {
+          window.typed = new Typed("#subtitle", {
-            strings: "!{theme.subtitle.sub}".split(","),
+            strings: !{JSON.stringify(subContent)},
             startDelay: 300,
             typeSpeed: 150,
-            loop: !{theme.subtitle.loop},
+            loop: !{loop},
             backSpeed: 50
           })
         } else {
-          document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
+          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
         }
       }
 
-      if (!{theme.subtitle.effect}) {
+      if (!{effect}) {
         if (typeof Typed === 'function') {
           subtitleType()
         } else {

layout/includes/widget/card_author.pug

@@ -6,24 +6,21 @@ if theme.aside.card_author.enable
       .author-info__name= config.author
       .author-info__description!= theme.aside.card_author.description || config.description
 
-    .card-info-data
+    .card-info-data.is-center
-      if site.posts.length
+      .card-info-data-item
-        .card-info-data-item.is-center
+        a(href=url_for(config.archive_dir) + '/')
-          a(href=url_for(config.archive_dir) + '/')
+          .headline= _p('aside.articles') 
-            .headline= _p('aside.articles') 
+          .length-num= site.posts.length
-            .length-num= site.posts.length
 
-      if site.tags.length
+      .card-info-data-item
-        .card-info-data-item.is-center
+        a(href=url_for(config.tag_dir) + '/')
-          a(href=url_for(config.tag_dir) + '/')
+          .headline= _p('aside.tags')
-            .headline= _p('aside.tags')
+          .length-num= site.tags.length
-            .length-num= site.tags.length
 
-      if site.categories.length
+      .card-info-data-item
-        .card-info-data-item.is-center
+        a(href=url_for(config.category_dir) + '/')
-          a(href=url_for(config.category_dir) + '/')
+          .headline= _p('aside.categories') 
-            .headline= _p('aside.categories') 
+          .length-num= site.categories.length
-            .length-num= site.categories.length
 
     if theme.aside.card_author.button.enable
       a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)

package.json

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

scripts/tag/gallery.js

@@ -19,7 +19,7 @@ function galleryGroup (args) {
   const img = urlFor(args[3])
 
   return `
-  <figure class="gallery-group">
+  <figure class="gallery-group not-lightbox">
   <img class="gallery-group-img" src='${img}' alt="Group Image Gallery">
   <figcaption>
   <div class="gallery-group-name">${name}</div>

source/css/_global/index.styl

@@ -199,9 +199,6 @@ if $site-name-font
       transform: scaleX(1)
 
 img
-  max-width: 100%
-  transition: all .2s
-
   &[src=''],
   &:not([src])
     opacity: 0

source/css/_layout/post.styl

@@ -154,6 +154,7 @@ no-beautify()
   img
     display: block
     margin: 0 auto .8rem
+    max-width: 100%
 
   p
     margin: 0 0 .8rem

source/css/_layout/sidebar.styl

@@ -34,16 +34,15 @@
       .data-item
         display: table-cell
 
-        .data-item-link
+        & > a > div
-          & > a > div
+          @extend .limit-one-line
-            @extend .limit-one-line
 
-          .length-num
+        .length-num
-            color: var(--text-highlight-color)
+          color: var(--text-highlight-color)
-            font-size: 1.28em
+          font-size: 1.28em
 
-          .headline
+        .headline
-            color: var(--font-color)
+          color: var(--font-color)
 
     hr
       margin: 1rem auto

source/css/_tags/gallery.styl

@@ -27,7 +27,7 @@ figure.gallery-group
   img
     position: relative
     margin: 0 !important
-    max-width: none
+    max-width: none !important
     width: calc(100% + 20px)
     height: 250px
     backface-visibility: hidden

source/js/main.js

@@ -234,11 +234,57 @@ document.addEventListener('DOMContentLoaded', function () {
     })
   }
 
+  /**
+ * fancybox和 mediumZoom
+ */
+  const addFancybox = () => {
+    const runFancybox = () => {
+      document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').forEach(i => {
+        const lazyloadSrc = i.dataset.lazySrc || i.src
+        const dataCaption = i.alt || ''
+        btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc })
+      })
+
+      Fancybox.destroy()
+      Fancybox.bind('[data-fancybox]', {
+        Hash: false
+      })
+    }
+
+    if (typeof Fancybox !== 'function') {
+      const ele = document.createElement('link')
+      ele.rel = 'stylesheet'
+      ele.href = GLOBAL_CONFIG.source.fancybox.css
+      document.head.appendChild(ele)
+
+      getScript(`${GLOBAL_CONFIG.source.fancybox.js}`).then(() => {
+        runFancybox()
+      })
+    } else {
+      runFancybox()
+    }
+  }
+
+  const addMediumZoom = () => {
+    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img'))
+    zoom.on('open', e => {
+      const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
+      zoom.update({
+        background: photoBg
+      })
+    })
+  }
+
+  // It needs to call it after the Justified Gallery done, or the fancybox maybe not work
+  const runLightbox = () => {
+    GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
+    GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox()
+  }
+
   /**
  * justified-gallery 圖庫排版
  * 需要 jQuery
  */
-
   let detectJgJsLoad = false
   const runJustifiedGallery = function (ele) {
     const $justifiedGallery = $(ele)
@@ -251,72 +297,29 @@ document.addEventListener('DOMContentLoaded', function () {
       })
     }
 
-    if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
+    if (detectJgJsLoad) {
-    else {
+      runLightbox()
-      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
+      btf.initJustifiedGallery($justifiedGallery)
-      $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
+      return
-        btf.initJustifiedGallery($justifiedGallery)
-      })
-      detectJgJsLoad = true
-    }
-  }
-
-  /**
- * fancybox和 mediumZoom
- */
-  const addFancybox = function (ele) {
-    const runFancybox = (ele) => {
-      ele.each(function (i, o) {
-        const $this = $(o)
-        const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
-        const dataCaption = $this.attr('alt') || ''
-        $this.wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`)
-      })
-
-      $().fancybox({
-        selector: '[data-fancybox]',
-        loop: true,
-        transitionEffect: 'slide',
-        protect: true,
-        buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
-        hash: false
-      })
     }
 
-    if (typeof $.fancybox === 'undefined') {
+    $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
+    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
-      $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
+      runLightbox()
-        runFancybox($(ele))
+      btf.initJustifiedGallery($justifiedGallery)
-      })
-    } else {
-      runFancybox($(ele))
-    }
-  }
-
-  const addMediumZoom = () => {
-    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.flink-item-icon) > img'))
-    zoom.on('open', e => {
-      const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
-      zoom.update({
-        background: photoBg
-      })
     })
+    detectJgJsLoad = true
   }
 
   const jqLoadAndRun = () => {
-    const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
-      ? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.flink-item-icon) > img, #article-container > img')
-      : []
-    const fbLengthNoZero = $fancyboxEle.length > 0
     const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
-    const jgLengthNoZero = $jgEle.length > 0
+    if ($jgEle.length) {
-
-    if (jgLengthNoZero || fbLengthNoZero) {
       btf.isJqueryLoad(() => {
-        jgLengthNoZero && runJustifiedGallery($jgEle)
+        runJustifiedGallery($jgEle)
-        fbLengthNoZero && addFancybox($fancyboxEle)
       })
+      return
     }
+    runLightbox()
   }
 
   /**
@@ -853,7 +856,6 @@ document.addEventListener('DOMContentLoaded', function () {
     addHighlightTool()
     GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
     jqLoadAndRun()
-    GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
     scrollFn()
     addTableWrap()
     clickFnOfTagHide()