breaking changes: 刪除 hide_sidebar_menu_child 配置，改為直接在 menu 配置 close #640

feat: sidebar menu 點擊展開不再限制只能點擊按鈕 #640
feat: TWIKOO 評論圖片添加 lightbox
feat: 升級 facebook comment js 到 v11
fix: 修復可能導致相關文章鏈接出錯的bug #549
improvement: 調整代碼框 ocean theme 下滾動條顏色 close #651
improvement: 當圖片沒有 figcaption 時，不會添加 figcaption 代碼
improvement: 代碼優化

_config.yml

@@ -1,11 +1,7 @@
 # Main menu navigation (導航目錄)
+# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
 # --------------------------------------
 
-# format: name: link || icon
-# sub-menu
-# name || icon:
-#   name: link || icon
-
 menu:
   # Home: / || fas fa-home
   # Archives: /archives/ || fas fa-archive
@@ -17,9 +13,6 @@ menu:
   # Link: /link/ || fas fa-link
   # About: /about/ || fas fa-heart
 
-# Hide the child menu items in mobile sidebar
-hide_sidebar_menu_child: false
-
 # Code Blocks (代碼相關)
 # --------------------------------------
 

layout/includes/additional-js.pug

@@ -7,9 +7,11 @@ div
 
   if theme.medium_zoom
     script(src=url_for(theme.CDN.medium_zoom))
+  else if theme.fancybox
+    script(src=url_for(theme.CDN.fancybox))
 
   if theme.instantpage
-    script(src=url_for(theme.CDN.instantpage) type="module")
+    script(src=url_for(theme.CDN.instantpage), type='module')
 
   if theme.lazyload.enable
     script(src=url_for(theme.CDN.lazyload))
@@ -18,21 +20,22 @@ div
     script(src=url_for(theme.CDN.snackbar))
 
   if theme.pangu.enable
-    !=partial('includes/third-party/pangu.pug', {}, {cache: true})
+    != partial("includes/third-party/pangu.pug", {}, { cache: true })
 
   //- search
   if theme.algolia_search.enable
+    script(src=url_for(theme.CDN.algolia_search))
     script(src=url_for(theme.CDN.algolia_js))
   else if theme.local_search.enable
     script(src=url_for(theme.CDN.local_search))
 
   if theme.preloader
-    !=partial('includes/loading/loading-js', {}, {cache: true})
+    != partial("includes/loading/loading-js", {}, { cache: true })
 
   .js-pjax
     if needLoadCountJs
-      !=partial('includes/third-party/card-post-count/index', {}, {cache: true})
+      != partial("includes/third-party/card-post-count/index", {}, { cache: true })
-    
+
     if loadSubJs
       include ./third-party/subtitle.pug
 
@@ -41,20 +44,20 @@ div
     if commentsJsLoad
       include ./third-party/comments/js.pug
 
-  !=partial('includes/third-party/prismjs', {}, {cache: true})
+  != partial("includes/third-party/prismjs", {}, { cache: true })
 
   if theme.aside.enable && theme.newest_comments.enable
     if theme.pjax.enable
-      !=partial('includes/third-party/newest-comments/index', {}, {cache: true})
+      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
     else if (!is_post() && page.aside !== false)
-      !=partial('includes/third-party/newest-comments/index', {}, {cache: true})
+      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
 
-  !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
+  != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
 
-  !=partial('includes/third-party/effect', {}, {cache: true})
+  != partial("includes/third-party/effect", {}, { cache: true })
+
+  != partial("includes/third-party/chat/index", {}, { cache: true })
 
-  !=partial('includes/third-party/chat/index', {}, {cache: true})
-  
   if theme.aplayerInject && theme.aplayerInject.enable
     if theme.pjax.enable || theme.aplayerInject.per_page
       include ./third-party/aplayer.pug
@@ -62,7 +65,7 @@ div
       include ./third-party/aplayer.pug
 
   if theme.pjax.enable
-    !=partial('includes/third-party/pjax', {}, {cache: true})
+    != partial("includes/third-party/pjax", {}, { cache: true })
-    
+
   if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
     script(async data-pjax src=url_for(theme.CDN.busuanzi))

layout/includes/head.pug

@@ -54,7 +54,9 @@ if (theme.snackbar && theme.snackbar.enable)
 
 if theme.algolia_search.enable
   link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'")
-  script(src=url_for(theme.CDN.algolia_search) defer)
+
+if theme.fancybox
+  link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'")
 
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})

layout/includes/head/config.pug

@@ -116,10 +116,6 @@ script.
       justifiedGallery: {
         js: '!{url_for(theme.CDN.justifiedGallery_js)}',
         css: '!{url_for(theme.CDN.justifiedGallery_css)}'
-      },
-      fancybox: {
-        js: '!{url_for(theme.CDN.fancybox)}',
-        css: '!{url_for(theme.CDN.fancybox_css)}'
       }
     },
     isPhotoFigcaption: !{theme.photofigcaption},

layout/includes/header/menu_item.pug

@@ -1,26 +1,27 @@
 if theme.menu
-  //- for mobile sidebar
-  - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''
-
   .menus_items
     each value, label in theme.menu
       if typeof value !== 'object'
         .menus_item
-          a.site-page(href=url_for(trim(value.split('||')[0])))
+          - const valueArray = value.split('||')
-            if value.split('||')[1]
+          a.site-page(href=url_for(trim(valueArray[0])))
-              i.fa-fw(class=trim(value.split('||')[1]))
+            if valueArray[1]
+              i.fa-fw(class=trim(valueArray[1]))
             span=' '+label
       else
         .menus_item
-          a.site-page(href='javascript:void(0);')
+          - const labelArray = label.split('||')
-            if label.split('||')[1]
+          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
-              i.fa-fw(class=trim(label.split('||')[1]))
+          a.site-page.group(class=`${hideClass}` href='javascript:void(0);')
-            span=' '+ trim(label.split('||')[0])
+            if labelArray[1]
-            i.fas.fa-chevron-down.expand(class=sidebarChildHide)
+              i.fa-fw(class=trim(labelArray[1]))
+            span=' '+ trim(labelArray[0])
+            i.fas.fa-chevron-down
           ul.menus_item_child
             each val,lab in value 
+              - const valArray = val.split('||')
               li
-                a.site-page.child(href=url_for(trim(val.split('||')[0])))
+                a.site-page.child(href=url_for(trim(valArray[0])))
-                  if val.split('||')[1]
+                  if valArray[1]
-                    i.fa-fw(class=trim(val.split('||')[1]))
+                    i.fa-fw(class=trim(valArray[1]))
                   span=' '+ lab

layout/includes/third-party/comments/facebook_comments.pug

@@ -7,7 +7,7 @@ script.
     if (typeof FB === 'object') FB.XFBML.parse()
     else {
       let ele = document.createElement('script')
-      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v10.0')
+      ele.setAttribute('src','https://connect.facebook.net/!{theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v11.0')
       ele.setAttribute('async', 'true')
       ele.setAttribute('defer', 'true')
       ele.setAttribute('crossorigin', 'anonymous')

layout/includes/third-party/comments/twikoo.pug

@@ -5,7 +5,10 @@ script.
       twikoo.init(Object.assign({
         el: '#twikoo-wrap',
         envId: '!{theme.twikoo.envId}',
-        region: '!{theme.twikoo.region}'
+        region: '!{theme.twikoo.region}',
+        onCommentLoaded: function () {
+          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
+        }
       }, !{JSON.stringify(theme.twikoo.option)}))
     }
 

layout/includes/third-party/comments/utterances.pug

@@ -13,13 +13,13 @@ script.
   }
 
   function utterancesTheme () {
-    if (document.querySelector('.utterances-frame')) {
+    const iframe = document.querySelector('.utterances-frame')
+    if (iframe) {
       const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
       const message = {
         type: 'set-theme',
         theme: theme
       };
-      const iframe = document.querySelector('.utterances-frame');
       iframe.contentWindow.postMessage(message, 'https://utteranc.es');
     }
   }

package.json

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

scripts/helpers/related_post.js

@@ -46,11 +46,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
 
   if (relatedPosts.length > 0) {
     result += '<div class="relatedPosts">'
-    result +=
+    result += `<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>${headlineLang}</span></div>`
-      '<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>' +
-      ' ' +
-      headlineLang +
-      '</span></div>'
     result += '<div class="relatedPosts-list">'
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
@@ -58,32 +54,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
         relatedPosts[i].cover === false
           ? relatedPosts[i].randomcover
           : relatedPosts[i].cover
-      result +=
+      result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}">`
-        '<div><a href="' +
+      result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
-        hexoConfig.root +
-        relatedPosts[i].path +
-        '" title="' +
-        relatedPosts[i].title +
-        '">'
-      result +=
-        '<img class="cover" src="' +
-        this.url_for(cover) +
-        '" alt="cover">'
       if (dateType === 'created') {
-        result +=
+        result += `<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> ${this.date(relatedPosts[i].created, hexoConfig.date_format)}</div>`
-          '<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i>' +
-          ' ' +
-          this.date(relatedPosts[i].created, hexoConfig.date_format) +
-          '</div>'
       } else {
-        result +=
+        result += `<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</div>`
-          '<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i>' +
-          ' ' +
-          this.date(relatedPosts[i].updated, hexoConfig.date_format) +
-          '</div>'
       }
-      result +=
+      result += `<div class="title">${relatedPosts[i].title}</div>`
-        '<div class="title">' + relatedPosts[i].title + '</div>'
       result += '</div></a></div>'
     }
 

source/css/_highlight/highlight.styl

@@ -212,7 +212,8 @@ blockquote
         & > i
           transform: rotate(180deg)
 
-        & + table
+        & + table,
+        & + pre
           margin-bottom: 1.8em
 
       &:not(.expand-done)

source/css/_highlight/theme.styl

@@ -63,7 +63,7 @@ if $highlight_theme == 'ocean'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
-  $highlight-scrollbar = darken($highlight-background, 5)
+  $highlight-scrollbar = darken($highlight-foreground, 40)
 
   if $highlighEnable
     $highlight-comment = rgba(101, 115, 126, .8)

source/css/_layout/head.styl

@@ -293,10 +293,10 @@
         .menus_item_child
           display: block
 
-        i.expand
+        & > a > i:last-child
-          transform: rotate(180deg) !important
+          transform: rotate(180deg)
 
-      i.expand
+      & > a > i:last-child
         padding: 4px
         transition: transform .3s
 

source/css/_layout/sidebar.styl

@@ -65,18 +65,20 @@
           width: 15%
           text-align: left
 
-      .expand
+        &.group
-        position: absolute
+          & > i:last-child
-        top: .78em
+            position: absolute
-        right: .9rem
+            top: .78em
-        transition: transform .3s
+            right: .9rem
+            transition: transform .3s
 
-        &.hide
+          &.hide
-          transform: rotate(90deg) !important
+            & > i:last-child
+              transform: rotate(90deg)
+
+            & + .menus_item_child
+              display: none
 
       .menus_item_child
         margin: 0
-        list-style: none
+        list-style: none
-
-        if hexo-config('hide_sidebar_menu_child')
-          display: none

source/js/main.js

@@ -67,8 +67,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * 首頁top_img底下的箭頭
+   * 首頁top_img底下的箭頭
- */
+   */
   const scrollDownInIndex = () => {
     const $scrollDownEle = document.getElementById('scroll-down')
     $scrollDownEle && $scrollDownEle.addEventListener('click', function () {
@@ -77,9 +77,9 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * 代碼
+   * 代碼
- * 只適用於Hexo默認的代碼渲染
+   * 只適用於Hexo默認的代碼渲染
- */
+   */
   const addHighlightTool = function () {
     const highLight = GLOBAL_CONFIG.highlight
     if (!highLight) return
@@ -220,76 +220,38 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * PhotoFigcaption
+   * PhotoFigcaption
- */
+   */
   function addPhotoFigcaption () {
     document.querySelectorAll('#article-container img').forEach(function (item) {
       const parentEle = item.parentNode
-      if (!parentEle.parentNode.classList.contains('justified-gallery')) {
+      const altValue = item.alt
+      if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
         const ele = document.createElement('div')
         ele.className = 'img-alt is-center'
-        ele.textContent = item.getAttribute('alt')
+        ele.textContent = altValue
         parentEle.insertBefore(ele, item.nextSibling)
       }
     })
   }
 
   /**
- * fancybox和 mediumZoom
+   * Lightbox
- */
+   * It needs to call it after the Justified Gallery done, or the fancybox maybe not work
-  const addFancybox = () => {
+   */
-    const runFancybox = () => {
-      document.querySelectorAll('#article-container img:not(.no-lightbox)').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 img:not(.no-lightbox)'))
-    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()
+    btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
-    GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox()
   }
 
   /**
- * justified-gallery 圖庫排版
+   * justified-gallery 圖庫排版
- * 需要 jQuery
+   * 需要 jQuery
- */
+   */
   let detectJgJsLoad = false
   const runJustifiedGallery = function (ele) {
     const $justifiedGallery = $(ele)
     const $imgList = $justifiedGallery.find('img')
-    $imgList.unwrap()
+    $imgList.unwrap() // remove <p> tag
     if ($imgList.length) {
       $imgList.each(function (i, o) {
         if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
@@ -297,17 +259,15 @@ document.addEventListener('DOMContentLoaded', function () {
       })
     }
 
+    runLightbox()
+
     if (detectJgJsLoad) {
-      runLightbox()
       btf.initJustifiedGallery($justifiedGallery)
       return
     }
 
     $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
+    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) })
-      runLightbox()
-      btf.initJustifiedGallery($justifiedGallery)
-    })
     detectJgJsLoad = true
   }
 
@@ -323,8 +283,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * 滾動處理
+   * 滾動處理
- */
+   */
   const scrollFn = function () {
     const $rightside = document.getElementById('rightside')
     const innerHeight = window.innerHeight + 56
@@ -387,8 +347,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- *  toc
+  *  toc
- */
+  */
   const tocFn = function () {
     const $cardTocLayout = document.getElementById('card-toc')
     const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
@@ -517,8 +477,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * Rightside
+   * Rightside
- */
+   */
   const rightSideFn = {
     switchReadMode: () => { // read-mode
       const $body = document.body
@@ -582,7 +542,6 @@ document.addEventListener('DOMContentLoaded', function () {
       }
 
       saveToLocal.set('global-font-size', newValue, 2)
-      // document.getElementById('font-text').innerText = newValue
     }
   }
 
@@ -616,34 +575,21 @@ document.addEventListener('DOMContentLoaded', function () {
   })
 
   /**
- * menu
+   * menu
- * 側邊欄sub-menu 展開/收縮
+   * 側邊欄sub-menu 展開/收縮
- * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
+   * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
- */
+   */
-  const clickFnOfSubMenu = function () {
+  const clickFnOfSubMenu = () => {
-    document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) {
+    document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
-      e.addEventListener('click', function () {
+      item.addEventListener('click', function () {
         this.classList.toggle('hide')
-        const $dom = this.parentNode.nextElementSibling
-        if (btf.isHidden($dom)) {
-          $dom.style.display = 'block'
-        } else {
-          $dom.style.display = 'none'
-        }
-      })
-    })
-
-    window.addEventListener('touchmove', function (e) {
-      const $menusChild = document.querySelectorAll('#nav .menus_item_child')
-      $menusChild.forEach(item => {
-        if (!btf.isHidden(item)) item.style.display = 'none'
       })
     })
   }
 
   /**
- * 複製時加上版權信息
+   * 複製時加上版權信息
- */
+   */
   const addCopyright = () => {
     const copyright = GLOBAL_CONFIG.copyright
     document.body.oncopy = (e) => {
@@ -667,8 +613,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * 網頁運行時間
+   * 網頁運行時間
- */
+   */
   const addRuntime = () => {
     const $runtimeCount = document.getElementById('runtimeshow')
     if ($runtimeCount) {
@@ -678,8 +624,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * 最後一次更新時間
+   * 最後一次更新時間
- */
+   */
   const addLastPushDate = () => {
     const $lastPushDateItem = document.getElementById('last-push-date')
     if ($lastPushDateItem) {
@@ -689,8 +635,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * table overflow
+   * table overflow
- */
+   */
   const addTableWrap = function () {
     const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
     if ($table.length) {
@@ -701,8 +647,8 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   /**
- * tag-hide
+   * tag-hide
- */
+   */
   const clickFnOfTagHide = function () {
     const $hideInline = document.querySelectorAll('#article-container .hide-button')
     if ($hideInline.length) {

source/js/utils.js

@@ -246,6 +246,33 @@ const btf = {
     }
 
     return actualTop
-  }
+  },
 
+  loadLightbox: ele => {
+    const service = GLOBAL_CONFIG.lightbox
+
+    if (service === 'mediumZoom') {
+      const zoom = mediumZoom(ele)
+      zoom.on('open', e => {
+        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
+        zoom.update({
+          background: photoBg
+        })
+      })
+    }
+
+    if (service === 'fancybox') {
+      ele.forEach(i => {
+        if (i.parentNode.tagName !== 'A') {
+          const dataSrc = i.dataset.lazySrc || i.src
+          const dataCaption = i.alt || ''
+          btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
+        }
+      })
+
+      Fancybox.bind('[data-fancybox]', {
+        Hash: false
+      })
+    }
+  }
 }