breaking changes: 更新 fancybox 到 4

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

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
-            @extend .limit-one-line
+        & > a > div
+          @extend .limit-one-line
 
-          .length-num
-            color: var(--text-highlight-color)
-            font-size: 1.28em
+        .length-num
+          color: var(--text-highlight-color)
+          font-size: 1.28em
 
-          .headline
-            color: var(--font-color)
+        .headline
+          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)
-    else {
-      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-      $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
-        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 (detectJgJsLoad) {
+      runLightbox()
+      btf.initJustifiedGallery($justifiedGallery)
+      return
     }
 
-    if (typeof $.fancybox === 'undefined') {
-      $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
-      $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
-        runFancybox($(ele))
-      })
-    } 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
-      })
+    $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
+    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
+      runLightbox()
+      btf.initJustifiedGallery($justifiedGallery)
     })
+    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 (jgLengthNoZero || fbLengthNoZero) {
+    if ($jgEle.length) {
       btf.isJqueryLoad(() => {
-        jgLengthNoZero && runJustifiedGallery($jgEle)
-        fbLengthNoZero && addFancybox($fancyboxEle)
+        runJustifiedGallery($jgEle)
       })
+      return
     }
+    runLightbox()
   }
 
   /**
@@ -853,7 +856,6 @@ document.addEventListener('DOMContentLoaded', function () {
     addHighlightTool()
     GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
     jqLoadAndRun()
-    GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
     scrollFn()
     addTableWrap()
     clickFnOfTagHide()