feat: 修改 toc 打開效果

feat: 適配 hexo-blog-encrypt
fix: 修復 hexo 新版本下，prismjs 的問題
improvement: 在 pjax 關閉的情況下。減少不必要的全局變量
improvement: 更新依賴版本
improvement: 頁面進入效果優化
improvement: 添加平滑滾動
improvement: 兼容性優化
improvement: 優化 lighthouse 分數
improvement: 優化代碼

source/css/_global/function.styl

@@ -134,16 +134,14 @@ if hexo-config('enter_transitions')
   #footer
     animation: bottom-top 1s
 
-  #page-header:not(.full_page)
+  #page-header:not(.full_page),
+  #nav.show
     animation: header-effect 1s
 
   #site-title,
   #site-subtitle
     animation: titleScale 1s
 
-  #nav.show
-    animation: headerNoOpacity 1s
-
   canvas:not(#ribbon-canvas),
   #web_bg
     animation: to_show 4s
@@ -182,27 +180,16 @@ if hexo-config('avatar.effect') == true
 
 @keyframes header-effect
   0%
-    opacity: 0
-    transform: translateY(-50px)
-
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes headerNoOpacity
-  0%
-    transform: translateY(-50px)
+    transform: translateY(-35px)
 
   100%
     transform: translateY(0)
 
 @keyframes bottom-top
   0%
-    opacity: 0
-    transform: translateY(50px)
+    transform: translateY(35px)
 
   100%
-    opacity: 1
     transform: translateY(0)
 
 @keyframes titleScale

source/css/_global/index.styl

@@ -46,6 +46,7 @@ body
   font-family: $font-family
   line-height: $text-line-height
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+  scroll-behavior: smooth
 
   if !hexo-config('copy.enable')
     user-select: none

source/css/_layout/head.styl

@@ -117,6 +117,7 @@
       box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
 
       a,
+      span.site-page,
       .site-name
         color: var(--font-color)
         text-shadow: none
@@ -140,6 +141,7 @@
           text-shadow: none
 
       a,
+      span.site-page,
       #toggle-menu
         color: var(--font-color)
         text-shadow: none
@@ -290,7 +292,8 @@
     &:hover
       color: var(--white)
 
-  a
+  a,
+  span.site-page
     color: var(--light-grey)
 
     &:hover
@@ -312,10 +315,10 @@
         .menus_item_child
           display: block
 
-        & > a > i:last-child
+        & > span > i:last-child
           transform: rotate(180deg)
 
-      & > a > i:last-child
+      & > span > i:last-child
         padding: 4px
         transition: transform .3s
 
@@ -370,7 +373,7 @@
     .menus_items
       display: none
 
-    #search-button span
+    #search-button span:not(.site-page)
       display: none
 
   #search-button

source/css/_layout/sidebar.styl

@@ -40,9 +40,10 @@
         position: relative
         display: block
         padding: 3px 28px 3px 20px
+        border-radius: 6px
         color: var(--font-color)
         font-size: 1.15em
-        border-radius: 6px
+        cursor: pointer
 
         &:hover
           background: var(--text-bg-hover)

source/css/_layout/third-party.styl

@@ -74,8 +74,9 @@ if hexo-config('waline.bg')
     margin: 0 0 .8em
     padding: 6px 0 16px
 
-.katex-wrap
-  overflow: auto
+.katex-display
+  overflow: auto hidden
+  padding: 5px
 
   if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
     &::-webkit-scrollbar
@@ -132,4 +133,4 @@ mjx-assistive-mml
 
 +maxWidth768()
   .fancybox__toolbar__column.is-middle
-    display: none
+    display: none

source/js/main.js

@@ -180,6 +180,7 @@ document.addEventListener('DOMContentLoaded', function () {
    * PhotoFigcaption
    */
   const addPhotoFigcaption = () => {
+    if (!GLOBAL_CONFIG.isPhotoFigcaption) return
     document.querySelectorAll('#article-container img').forEach(item => {
       const altValue = item.title || item.alt
       if (!altValue) return
@@ -333,7 +334,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (typeof InfiniteGrid === 'function') {
       init()
     } else {
-      await getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
+      await btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
       init()
     }
   }
@@ -461,6 +462,9 @@ document.addEventListener('DOMContentLoaded', function () {
           $cardToc.scrollTop = sidebarScrollTop - 150
         }
       }
+
+      // 處理 hexo-blog-encrypt 事件
+      $cardToc.style.display = 'block'
     }
 
     // find head position & add active class
@@ -563,13 +567,13 @@ document.addEventListener('DOMContentLoaded', function () {
     darkmode: () => { // switch between light and dark mode
       const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
       if (willChangeMode === 'dark') {
-        activateDarkMode()
+        btf.activateDarkMode()
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
       } else {
-        activateLightMode()
+        btf.activateLightMode()
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
       }
-      saveToLocal.set('theme', willChangeMode, 2)
+      btf.saveToLocal.set('theme', willChangeMode, 2)
       handleThemeChange(willChangeMode)
     },
     'rightside-config': item => { // Show or hide rightside-hide-btn
@@ -589,15 +593,24 @@ document.addEventListener('DOMContentLoaded', function () {
     'hide-aside-btn': () => { // Hide aside
       const $htmlDom = document.documentElement.classList
       const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
-      saveToLocal.set('aside-status', saveStatus, 2)
+      btf.saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
-    'mobile-toc-button': item => { // Show mobile toc
+    'mobile-toc-button': function (p, item) { // Show mobile toc
       const tocEle = document.getElementById('card-toc')
       tocEle.style.transition = 'transform 0.3s ease-in-out'
+
+      const tocEleHeight = tocEle.clientHeight
+      const btData = item.getBoundingClientRect()
+
+      const tocEleBottom = window.innerHeight - btData.bottom - 30
+      if (tocEleHeight > tocEleBottom) {
+        tocEle.style.transformOrigin = `right ${tocEleHeight - tocEleBottom - btData.height / 2}px`
+      }
+
       tocEle.classList.toggle('open')
       tocEle.addEventListener('transitionend', () => {
-        tocEle.style.transition = ''
+        tocEle.style.cssText = ''
       }, { once: true })
     },
     'chat-btn': () => { // Show chat
@@ -611,7 +624,7 @@ document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('rightside').addEventListener('click', function (e) {
     const $target = e.target.closest('[id]')
     if ($target && rightSideFn[$target.id]) {
-      rightSideFn[$target.id](this)
+      rightSideFn[$target.id](this, $target)
     }
   })
 
@@ -812,6 +825,10 @@ document.addEventListener('DOMContentLoaded', function () {
       threshold: 0,
       data_src: 'lazy-src'
     })
+
+    btf.addGlobalFn('pjaxComplete', () => {
+      window.lazyLoadInstance.update()
+    }, 'lazyload')
   }
 
   const relativeDate = function (selector) {
@@ -835,14 +852,29 @@ document.addEventListener('DOMContentLoaded', function () {
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
 
     if (GLOBAL_CONFIG.autoDarkmode) {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-        if (saveToLocal.get('theme') !== undefined) return
+      window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
+        if (btf.saveToLocal.get('theme') !== undefined) return
         e.matches ? handleThemeChange('dark') : handleThemeChange('light')
       })
     }
   }
 
-  window.refreshFn = function () {
+  const forPostFn = () => {
+    addHighlightTool()
+    addPhotoFigcaption()
+
+    btf.removeGlobalFnEvent('justifiedGallery')
+    const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
+    galleryContainer.length && addJustifiedGallery(galleryContainer)
+
+    runLightbox()
+    scrollFnToDo()
+    addTableWrap()
+    clickFnOfTagHide()
+    tabsFn()
+  }
+
+  const refreshFn = () => {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
@@ -855,24 +887,24 @@ document.addEventListener('DOMContentLoaded', function () {
       toggleCardCategory()
     }
 
-    scrollFnToDo()
     GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
-    addHighlightTool()
-    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
     scrollFn()
 
-    btf.removeGlobalFnEvent('justifiedGallery')
-    const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
-    galleryContainer.length && addJustifiedGallery(galleryContainer)
-
-    runLightbox()
-    addTableWrap()
-    clickFnOfTagHide()
-    tabsFn()
+    forPostFn()
     switchComments()
     openMobileMenu()
   }
 
+  btf.addGlobalFn('pjaxComplete', refreshFn, 'refreshFn')
   refreshFn()
   unRefreshFn()
+
+  // 處理 hexo-blog-encrypt 事件
+  window.addEventListener('hexo-blog-decrypt', e => {
+    forPostFn()
+    window.translateFn.translateInitialization()
+    Object.values(window.globalFn.encrypt).forEach(fn => {
+      fn()
+    })
+  })
 })

source/js/tw_cn.js

@@ -4,9 +4,9 @@ document.addEventListener('DOMContentLoaded', function () {
   let currentEncoding = defaultEncoding
   const targetEncodingCookie = 'translate-chn-cht'
   let targetEncoding =
-    saveToLocal.get(targetEncodingCookie) === undefined
+    btf.saveToLocal.get(targetEncodingCookie) === undefined
       ? defaultEncoding
-      : Number(saveToLocal.get('translate-chn-cht'))
+      : Number(btf.saveToLocal.get('translate-chn-cht'))
   let translateButtonObject
   const isSnackbar = snackbarData !== undefined
 
@@ -63,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function () {
       translateButtonObject.textContent = msgToSimplifiedChinese
       isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht)
     }
-    saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
+    btf.saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
     setLang()
     translateBody()
   }
@@ -114,9 +114,10 @@ document.addEventListener('DOMContentLoaded', function () {
   window.translateFn = {
     translatePage,
     Traditionalized,
-    Simplized
+    Simplized,
+    translateInitialization
   }
 
   translateInitialization()
-  document.addEventListener('pjax:complete', translateInitialization)
+  btf.addGlobalFn('pjaxComplete', translateInitialization, 'translateInitialization')
 })

source/js/utils.js

@@ -1,296 +1,288 @@
-const btf = {
-  debounce: (func, wait = 0, immediate = false) => {
-    let timeout
-    return (...args) => {
-      const later = () => {
-        timeout = null
-        if (!immediate) func(...args)
-      }
-      const callNow = immediate && !timeout
-      clearTimeout(timeout)
-      timeout = setTimeout(later, wait)
-      if (callNow) func(...args)
-    }
-  },
-
-  throttle: function (func, wait, options = {}) {
-    let timeout, context, args
-    let previous = 0
-
-    const later = () => {
-      previous = options.leading === false ? 0 : new Date().getTime()
-      timeout = null
-      func.apply(context, args)
-      if (!timeout) context = args = null
-    }
-
-    const throttled = (...params) => {
-      const now = new Date().getTime()
-      if (!previous && options.leading === false) previous = now
-      const remaining = wait - (now - previous)
-      context = this
-      args = params
-      if (remaining <= 0 || remaining > wait) {
-        if (timeout) {
-          clearTimeout(timeout)
+(() => {
+  const btfFn = {
+    debounce: (func, wait = 0, immediate = false) => {
+      let timeout
+      return (...args) => {
+        const later = () => {
           timeout = null
+          if (!immediate) func(...args)
         }
-        previous = now
+        const callNow = immediate && !timeout
+        clearTimeout(timeout)
+        timeout = setTimeout(later, wait)
+        if (callNow) func(...args)
+      }
+    },
+
+    throttle: function (func, wait, options = {}) {
+      let timeout, context, args
+      let previous = 0
+
+      const later = () => {
+        previous = options.leading === false ? 0 : new Date().getTime()
+        timeout = null
         func.apply(context, args)
         if (!timeout) context = args = null
-      } else if (!timeout && options.trailing !== false) {
-        timeout = setTimeout(later, remaining)
       }
-    }
 
-    return throttled
-  },
-
-  sidebarPaddingR: () => {
-    const innerWidth = window.innerWidth
-    const clientWidth = document.body.clientWidth
-    const paddingRight = innerWidth - clientWidth
-    if (innerWidth !== clientWidth) {
-      document.body.style.paddingRight = paddingRight + 'px'
-    }
-  },
-
-  snackbarShow: (text, showAction = false, duration = 2000) => {
-    const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
-    const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
-    Snackbar.show({
-      text,
-      backgroundColor: bg,
-      showAction,
-      duration,
-      pos: position,
-      customClass: 'snackbar-css'
-    })
-  },
-
-  diffDate: (d, more = false) => {
-    const dateNow = new Date()
-    const datePost = new Date(d)
-    const dateDiff = dateNow.getTime() - datePost.getTime()
-    const minute = 1000 * 60
-    const hour = minute * 60
-    const day = hour * 24
-    const month = day * 30
-    const { dateSuffix } = GLOBAL_CONFIG
-
-    if (!more) return parseInt(dateDiff / day)
-
-    const monthCount = dateDiff / month
-    const dayCount = dateDiff / day
-    const hourCount = dateDiff / hour
-    const minuteCount = dateDiff / minute
-
-    if (monthCount > 12) return datePost.toISOString().slice(0, 10)
-    if (monthCount >= 1) return `${parseInt(monthCount)} ${dateSuffix.month}`
-    if (dayCount >= 1) return `${parseInt(dayCount)} ${dateSuffix.day}`
-    if (hourCount >= 1) return `${parseInt(hourCount)} ${dateSuffix.hour}`
-    if (minuteCount >= 1) return `${parseInt(minuteCount)} ${dateSuffix.min}`
-    return dateSuffix.just
-  },
-
-  loadComment: (dom, callback) => {
-    if ('IntersectionObserver' in window) {
-      const observerItem = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          callback()
-          observerItem.disconnect()
+      const throttled = (...params) => {
+        const now = new Date().getTime()
+        if (!previous && options.leading === false) previous = now
+        const remaining = wait - (now - previous)
+        context = this
+        args = params
+        if (remaining <= 0 || remaining > wait) {
+          if (timeout) {
+            clearTimeout(timeout)
+            timeout = null
+          }
+          previous = now
+          func.apply(context, args)
+          if (!timeout) context = args = null
+        } else if (!timeout && options.trailing !== false) {
+          timeout = setTimeout(later, remaining)
         }
-      }, { threshold: [0] })
-      observerItem.observe(dom)
-    } else {
-      callback()
-    }
-  },
+      }
 
-  scrollToDest: (pos, time = 500) => {
-    const currentPos = window.pageYOffset
-    const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
-    if (currentPos > pos || isNavFixed) pos = pos - 70
+      return throttled
+    },
 
-    if ('scrollBehavior' in document.documentElement.style) {
-      window.scrollTo({
-        top: pos,
-        behavior: 'smooth'
+    sidebarPaddingR: () => {
+      const innerWidth = window.innerWidth
+      const clientWidth = document.body.clientWidth
+      const paddingRight = innerWidth - clientWidth
+      if (innerWidth !== clientWidth) {
+        document.body.style.paddingRight = paddingRight + 'px'
+      }
+    },
+
+    snackbarShow: (text, showAction = false, duration = 2000) => {
+      const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
+      const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
+      Snackbar.show({
+        text,
+        backgroundColor: bg,
+        showAction,
+        duration,
+        pos: position,
+        customClass: 'snackbar-css'
       })
-      return
-    }
+    },
 
-    let start = null
-    pos = +pos
-    window.requestAnimationFrame(function step (currentTime) {
-      start = !start ? currentTime : start
-      const progress = currentTime - start
-      if (currentPos < pos) {
-        window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
+    diffDate: (d, more = false) => {
+      const dateNow = new Date()
+      const datePost = new Date(d)
+      const dateDiff = dateNow.getTime() - datePost.getTime()
+      const minute = 1000 * 60
+      const hour = minute * 60
+      const day = hour * 24
+      const month = day * 30
+      const { dateSuffix } = GLOBAL_CONFIG
+
+      if (!more) return parseInt(dateDiff / day)
+
+      const monthCount = dateDiff / month
+      const dayCount = dateDiff / day
+      const hourCount = dateDiff / hour
+      const minuteCount = dateDiff / minute
+
+      if (monthCount > 12) return datePost.toISOString().slice(0, 10)
+      if (monthCount >= 1) return `${parseInt(monthCount)} ${dateSuffix.month}`
+      if (dayCount >= 1) return `${parseInt(dayCount)} ${dateSuffix.day}`
+      if (hourCount >= 1) return `${parseInt(hourCount)} ${dateSuffix.hour}`
+      if (minuteCount >= 1) return `${parseInt(minuteCount)} ${dateSuffix.min}`
+      return dateSuffix.just
+    },
+
+    loadComment: (dom, callback) => {
+      if ('IntersectionObserver' in window) {
+        const observerItem = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            callback()
+            observerItem.disconnect()
+          }
+        }, { threshold: [0] })
+        observerItem.observe(dom)
       } else {
-        window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
+        callback()
       }
-      if (progress < time) {
-        window.requestAnimationFrame(step)
-      } else {
-        window.scrollTo(0, pos)
+    },
+
+    scrollToDest: (pos, time = 500) => {
+      const currentPos = window.pageYOffset
+      const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
+      if (currentPos > pos || isNavFixed) pos = pos - 70
+
+      if ('scrollBehavior' in document.documentElement.style) {
+        window.scrollTo({
+          top: pos,
+          behavior: 'smooth'
+        })
+        return
       }
-    })
-  },
 
-  animateIn: (ele, text) => {
-    ele.style.display = 'block'
-    ele.style.animation = text
-  },
-
-  animateOut: (ele, text) => {
-    ele.addEventListener('animationend', function f () {
-      ele.style.display = ''
-      ele.style.animation = ''
-      ele.removeEventListener('animationend', f)
-    })
-    ele.style.animation = text
-  },
-
-  wrap: (selector, eleType, options) => {
-    const createEle = document.createElement(eleType)
-    for (const [key, value] of Object.entries(options)) {
-      createEle.setAttribute(key, value)
-    }
-    selector.parentNode.insertBefore(createEle, selector)
-    createEle.appendChild(selector)
-  },
-
-  isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
-
-  getEleTop: ele => {
-    let actualTop = ele.offsetTop
-    let current = ele.offsetParent
-
-    while (current !== null) {
-      actualTop += current.offsetTop
-      current = current.offsetParent
-    }
-
-    return actualTop
-  },
-
-  loadLightbox: ele => {
-    const service = GLOBAL_CONFIG.lightbox
-
-    if (service === 'mediumZoom') {
-      mediumZoom(ele, { background: 'var(--zoom-bg)' })
-    }
-
-    if (service === 'fancybox') {
-      Array.from(ele).forEach(i => {
-        if (i.parentNode.tagName !== 'A') {
-          const dataSrc = i.dataset.lazySrc || i.src
-          const dataCaption = i.title || i.alt || ''
-          btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
+      let start = null
+      pos = +pos
+      window.requestAnimationFrame(function step (currentTime) {
+        start = !start ? currentTime : start
+        const progress = currentTime - start
+        if (currentPos < pos) {
+          window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
+        } else {
+          window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
+        }
+        if (progress < time) {
+          window.requestAnimationFrame(step)
+        } else {
+          window.scrollTo(0, pos)
         }
       })
+    },
 
-      if (!window.fancyboxRun) {
-        Fancybox.bind('[data-fancybox]', {
-          Hash: false,
-          Thumbs: {
-            showOnStart: false
-          },
-          Images: {
-            Panzoom: {
-              maxScale: 4
-            }
-          },
-          Carousel: {
-            transition: 'slide'
-          },
-          Toolbar: {
-            display: {
-              left: ['infobar'],
-              middle: [
-                'zoomIn',
-                'zoomOut',
-                'toggle1to1',
-                'rotateCCW',
-                'rotateCW',
-                'flipX',
-                'flipY'
-              ],
-              right: ['slideshow', 'thumbs', 'close']
-            }
+    animateIn: (ele, text) => {
+      ele.style.display = 'block'
+      ele.style.animation = text
+    },
+
+    animateOut: (ele, text) => {
+      ele.addEventListener('animationend', function f () {
+        ele.style.display = ''
+        ele.style.animation = ''
+        ele.removeEventListener('animationend', f)
+      })
+      ele.style.animation = text
+    },
+
+    wrap: (selector, eleType, options) => {
+      const createEle = document.createElement(eleType)
+      for (const [key, value] of Object.entries(options)) {
+        createEle.setAttribute(key, value)
+      }
+      selector.parentNode.insertBefore(createEle, selector)
+      createEle.appendChild(selector)
+    },
+
+    isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
+
+    getEleTop: ele => {
+      let actualTop = ele.offsetTop
+      let current = ele.offsetParent
+
+      while (current !== null) {
+        actualTop += current.offsetTop
+        current = current.offsetParent
+      }
+
+      return actualTop
+    },
+
+    loadLightbox: ele => {
+      const service = GLOBAL_CONFIG.lightbox
+
+      if (service === 'mediumZoom') {
+        mediumZoom(ele, { background: 'var(--zoom-bg)' })
+      }
+
+      if (service === 'fancybox') {
+        Array.from(ele).forEach(i => {
+          if (i.parentNode.tagName !== 'A') {
+            const dataSrc = i.dataset.lazySrc || i.src
+            const dataCaption = i.title || i.alt || ''
+            btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
           }
         })
-        window.fancyboxRun = true
-      }
-    }
-  },
 
-  setLoading: {
-    add: ele => {
-      const html = `
+        if (!window.fancyboxRun) {
+          Fancybox.bind('[data-fancybox]', {
+            Hash: false,
+            Thumbs: {
+              showOnStart: false
+            },
+            Images: {
+              Panzoom: {
+                maxScale: 4
+              }
+            },
+            Carousel: {
+              transition: 'slide'
+            },
+            Toolbar: {
+              display: {
+                left: ['infobar'],
+                middle: [
+                  'zoomIn',
+                  'zoomOut',
+                  'toggle1to1',
+                  'rotateCCW',
+                  'rotateCW',
+                  'flipX',
+                  'flipY'
+                ],
+                right: ['slideshow', 'thumbs', 'close']
+              }
+            }
+          })
+          window.fancyboxRun = true
+        }
+      }
+    },
+
+    setLoading: {
+      add: ele => {
+        const html = `
         <div class="loading-container">
           <div class="loading-item">
             <div></div><div></div><div></div><div></div><div></div>
           </div>
         </div>
       `
-      ele.insertAdjacentHTML('afterend', html)
+        ele.insertAdjacentHTML('afterend', html)
+      },
+      remove: ele => {
+        ele.nextElementSibling.remove()
+      }
     },
-    remove: ele => {
-      ele.nextElementSibling.remove()
+
+    updateAnchor: (anchor) => {
+      if (anchor !== window.location.hash) {
+        if (!anchor) anchor = location.pathname
+        const title = GLOBAL_CONFIG_SITE.title
+        window.history.replaceState({
+          url: location.href,
+          title
+        }, title, anchor)
+      }
+    },
+
+    getScrollPercent: (currentTop, ele) => {
+      const docHeight = ele.clientHeight
+      const winHeight = document.documentElement.clientHeight
+      const headerHeight = ele.offsetTop
+      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+      const scrollPercent = (currentTop - headerHeight) / (contentMath)
+      const scrollPercentRounded = Math.round(scrollPercent * 100)
+      const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
+      return percentage
+    },
+
+    addEventListenerPjax: (ele, event, fn, option = false) => {
+      ele.addEventListener(event, fn, option)
+      btf.addGlobalFn('pjax', () => {
+        ele.removeEventListener(event, fn, option)
+      })
+    },
+
+    removeGlobalFnEvent: (key, parent = window) => {
+      const { globalFn = {} } = parent
+      const keyObj = globalFn[key] || {}
+      const keyArr = Object.keys(keyObj)
+      if (!keyArr.length) return
+      keyArr.forEach(i => {
+        keyObj[i]()
+      })
+      delete parent.globalFn[key]
     }
-  },
-
-  updateAnchor: (anchor) => {
-    if (anchor !== window.location.hash) {
-      if (!anchor) anchor = location.pathname
-      const title = GLOBAL_CONFIG_SITE.title
-      window.history.replaceState({
-        url: location.href,
-        title
-      }, title, anchor)
-    }
-  },
-
-  getScrollPercent: (currentTop, ele) => {
-    const docHeight = ele.clientHeight
-    const winHeight = document.documentElement.clientHeight
-    const headerHeight = ele.offsetTop
-    const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
-    const scrollPercent = (currentTop - headerHeight) / (contentMath)
-    const scrollPercentRounded = Math.round(scrollPercent * 100)
-    const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
-    return percentage
-  },
-
-  addGlobalFn: (key, fn, name = false, parent = window) => {
-    const globalFn = parent.globalFn || {}
-    const keyObj = globalFn[key] || {}
-
-    if (name && keyObj[name]) return
-
-    name = name || Object.keys(keyObj).length
-    keyObj[name] = fn
-    globalFn[key] = keyObj
-    parent.globalFn = globalFn
-  },
-
-  addEventListenerPjax: (ele, event, fn, option = false) => {
-    ele.addEventListener(event, fn, option)
-    btf.addGlobalFn('pjax', () => {
-      ele.removeEventListener(event, fn, option)
-    })
-  },
-
-  removeGlobalFnEvent: (key, parent = window) => {
-    const { globalFn = {} } = parent
-    const keyObj = globalFn[key] || {}
-    const keyArr = Object.keys(keyObj)
-    if (!keyArr.length) return
-    keyArr.forEach(i => {
-      keyObj[i]()
-    })
-    delete parent.globalFn[key]
   }
-}
+
+  window.btf = { ...window.btf, ...btfFn }
+})()