breaking changes: toc 配置更改，頁面支持 toc 顯示 close #636

feat: 代碼框設置高度限制，展開後按鈕不會消失，可點擊再次摺疊 close #637
feat: 增加 no-lightbox class 偵測，可配置 fancybox 和 medium-zoom 不應用於圖片 #636
fix: 修復開啟 lazyload 時， fancybox 的縮略圖顯示 lazyload 加載圖片的 bug

_config.yml

@@ -175,7 +175,8 @@ index_post_content:
 
 # toc (目錄)
 toc:
-  enable: true
+  post: true
+  page: false
   number: true
   style_simple: false
 

layout/includes/head/config_site.pug

@@ -1,13 +1,22 @@
 -
+  const titleVal = pageTitle.replace(/'/ig,"\\'")
+
   let isHighlightShrink
   if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
   else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
   else isHighlightShrink = theme.highlight_shrink
 
-  var pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
-  var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
-
-  let titleVal = pageTitle.replace(/'/ig,"\\'")
+  var showToc = false
+  if (theme.aside.enable) {
+    let tocEnable = false
+    if (is_post()) {
+      if (theme.toc.post) tocEnable = true
+    } else if (is_page()) {
+      if (theme.toc.page) tocEnable = true
+    }
+    const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable
+    showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true )
+  }
 -
 
 script#config-diff.

layout/includes/page/flink.pug

@@ -13,8 +13,8 @@
           each item in i.link_list
             .flink-list-item
               a(href=url_for(item.link)  title=item.name target="_blank")
-                .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-icon
+                  img.no-lightbox(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
     != page.content

layout/includes/rightside.pug

@@ -21,13 +21,13 @@
       if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size)
         button#rightside_config(type="button" title=_p("rightside.setting"))
           i.fas.fa-cog.fa-spin
-      if showToc
-        button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
-          i.fas.fa-list-ul
     else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
       button#rightside_config(type="button" title=_p("rightside.setting"))
         i.fas.fa-cog.fa-spin
 
+    if showToc
+      button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
+        i.fas.fa-list-ul
     if theme.chat_btn
       button#chat_btn(type="button" title=_p("rightside.chat_btn"))
         i.fas.fa-sms

layout/includes/widget/index.pug

@@ -20,6 +20,8 @@
     !=partial('includes/widget/card_top_self', {}, {cache: true})      
 
     .sticky_layout
+      if showToc
+        include ./card_post_toc.pug
       !=partial('includes/widget/card_recent_post', {}, {cache: true})
       !=partial('includes/widget/card_ad', {}, {cache: true})
       !=partial('includes/widget/card_newest_comment', {}, {cache: true})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.0.0-b3",
+  "version": "4.0.0-b4",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "bugs": {
     "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues",
-    "email": "btf@immyw.com"
+    "email": "i@immyw.com"
   },
   "dependencies": {
     "hexo-renderer-stylus": "^2.0.1",

scripts/tag/gallery.js

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

source/css/_highlight/highlight.styl

@@ -209,7 +209,11 @@ blockquote
         animation: code-expand-key 1.2s infinite
 
       &.expand-done
-        display: none !important
+        & > i
+          transform: rotate(180deg)
+
+        & + table
+          margin-bottom: 1.8em
 
       &:not(.expand-done)
         & ~ table,

source/js/main.js

@@ -239,7 +239,7 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const addFancybox = () => {
     const runFancybox = () => {
-      document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').forEach(i => {
+      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 })
@@ -266,7 +266,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   const addMediumZoom = () => {
-    const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img'))
+    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({
@@ -841,7 +841,6 @@ document.addEventListener('DOMContentLoaded', function () {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
-      GLOBAL_CONFIG_SITE.isToc && tocFn()
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
     } else {
@@ -851,6 +850,7 @@ document.addEventListener('DOMContentLoaded', function () {
       toggleCardCategory()
     }
 
+    GLOBAL_CONFIG_SITE.isToc && tocFn()
     sidebarFn()
     GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
     addHighlightTool()