feat: 新增 Mermaid 圖表功能的選項，支持在新標籤頁中打開和縮放平移互動

fix: 更新插件版本以修正相容性問題
refactor: 優化代碼結構，提升可讀性

_config.yml

@@ -319,6 +319,7 @@ aside:
     # If set 0 will show all
     limit: 40
     color: false
+    custom_colors:
     # Order of tags, random/name/length
     orderby: random
     # Sort of order. 1, asc for ascending; -1, desc for descending
@@ -939,6 +940,10 @@ mermaid:
   theme:
     light: default
     dark: dark
+  # Enable "Open in New Tab" button to view diagram in a separate window
+  open_in_new_tab: true
+  # Enable zoom and pan interactions on diagrams
+  zoom_pan: true
 
 # chartjs
 # see https://www.chartjs.org/docs/latest/

layout/includes/mixins/indexPostUI.pug

@@ -1,6 +1,6 @@
 mixin indexPostUI()
   - const indexLayout = theme.index_layout
-  - const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
+  - const masonryLayoutClass = [6, 7].includes(indexLayout) ? 'masonry' : ''
   #recent-posts.recent-posts.nc(class=masonryLayoutClass)
     .recent-post-items
       each article, index in page.posts.data
@@ -8,17 +8,17 @@ mixin indexPostUI()
           - const link = article.link || article.path
           - const title = article.title || _p('no_title')
           - const leftOrRight = indexLayout === 3 ? (index % 2 === 0 ? 'left' : 'right') : (indexLayout === 2 ? 'right' : '')
-          - const post_cover = article.cover
+          - const postCover = article.cover
-          - const no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+          - const noCover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
 
-          if post_cover && theme.cover.index_enable
+          if postCover && theme.cover.index_enable
             .post_cover(class=leftOrRight)
               a(href=url_for(link) title=title)
                 if article.cover_type === 'img'
-                  img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+                  img.post-bg(src=url_for(postCover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
                 else
-                  div.post-bg(style=`background: ${post_cover}`)
+                  div.post-bg(style=`background: ${postCover}`)
-          .recent-post-info(class=no_cover)
+          .recent-post-info(class=noCover)
             a.article-title(href=url_for(link) title=title)
               if globalPageType === 'home' && (article.top || article.sticky > 0)
                 i.fas.fa-thumbtack.sticky
@@ -35,13 +35,13 @@ mixin indexPostUI()
                     span.article-meta-label=_p('post.updated')
                     time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))= date(article.updated, config.date_format)
                   else
-                    - const data_type_updated = theme.post_meta.page.date_type === 'updated'
+                    - const isUpdatedType = theme.post_meta.page.date_type === 'updated'
-                    - const date_type = data_type_updated ? 'updated' : 'date'
+                    - const dateType = isUpdatedType ? 'updated' : 'date'
-                    - const date_icon = data_type_updated ? 'fas fa-history' : 'far fa-calendar-alt'
+                    - const dateIcon = isUpdatedType ? 'fas fa-history' : 'far fa-calendar-alt'
-                    - const date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+                    - const dateTitle = isUpdatedType ? _p('post.updated') : _p('post.created')
-                    i(class=date_icon)
+                    i(class=dateIcon)
-                    span.article-meta-label= date_title
+                    span.article-meta-label= dateTitle
-                    time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))= date(article[date_type], config.date_format)
+                    time(datetime=date_xml(article[dateType]) title=dateTitle + ' ' + full_date(article[dateType]))= date(article[dateType], config.date_format)
               if theme.post_meta.page.categories && article.categories.data.length > 0
                 span.article-meta
                   span.article-meta-separator |
@@ -69,7 +69,10 @@ mixin indexPostUI()
                   span.article-meta-label= ' ' + _p('card_post_count')
 
               if theme.comments.card_post_count && theme.comments.use
-                case theme.comments.use[0]
+                - const commentSystem = theme.comments.use[0]
+                - const commentLink = url_for(link) + '#post-comment'
+
+                case commentSystem
                   when 'Disqus'
                   when 'Disqusjs'
                     +countBlockInIndex
@@ -77,30 +80,30 @@ mixin indexPostUI()
                         i.fa-solid.fa-spinner.fa-spin
                   when 'Valine'
                     +countBlockInIndex
-                      a(href=url_for(link) + '#post-comment')
+                      a(href=commentLink)
                         span.valine-comment-count(data-xid=url_for(link))
                           i.fa-solid.fa-spinner.fa-spin
                   when 'Waline'
                     +countBlockInIndex
-                      a(href=url_for(link) + '#post-comment')
+                      a(href=commentLink)
                         span.waline-comment-count(data-path=url_for(link))
                           i.fa-solid.fa-spinner.fa-spin
                   when 'Twikoo'
                     +countBlockInIndex
-                      a.twikoo-count(href=url_for(link) + '#post-comment')
+                      a.twikoo-count(href=commentLink)
                         i.fa-solid.fa-spinner.fa-spin
                   when 'Facebook Comments'
                     +countBlockInIndex
-                      a(href=url_for(link) + '#post-comment')
+                      a(href=commentLink)
                         span.fb-comments-count(data-href=urlNoIndex(article.permalink))
                   when 'Remark42'
                     +countBlockInIndex
-                      a(href=url_for(link) + '#post-comment')
+                      a(href=commentLink)
                         span.remark42__counter(data-url=urlNoIndex(article.permalink))
                           i.fa-solid.fa-spinner.fa-spin
                   when 'Artalk'
                     +countBlockInIndex
-                      a(href=url_for(link) + '#post-comment')
+                      a(href=commentLink)
                         span.artalk-count(data-page-key=url_for(link))
                           i.fa-solid.fa-spinner.fa-spin
 

layout/includes/third-party/math/mermaid.pug

@@ -281,9 +281,9 @@ script.
         const renderFn = mermaid.render(mermaidID, mermaidDefinition)
         const renderMermaid = svg => {
           mermaidSrc.insertAdjacentHTML('afterend', svg)
-          initMermaidGestures(item)
+          if (!{theme.mermaid.zoom_pan}) initMermaidGestures(item)
           item.__mermaidOriginalSvg = svg
-          attachMermaidViewerButton(item)
+          if (!{theme.mermaid.open_in_new_tab}) attachMermaidViewerButton(item)
         }
 
 

package.json

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

plugins.yml

@@ -1,7 +1,7 @@
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.5.2
+  version: 6.6.0
 activate_power_mode:
   name: butterfly-extsrc
   file: dist/activate-power-mode.min.js
@@ -9,7 +9,7 @@ activate_power_mode:
 algolia_search:
   name: algoliasearch
   file: dist/lite/builds/browser.umd.js
-  version: 5.46.0
+  version: 5.47.0
 aplayer_css:
   name: aplayer
   file: dist/APlayer.min.css
@@ -66,26 +66,26 @@ docsearch_css:
   name: '@docsearch/css'
   other_name: docsearch-css
   file: dist/style.css
-  version: 4.3.2
+  version: 4.5.3
 docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 4.3.2
+  version: 4.5.3
 egjs_infinitegrid:
   name: '@egjs/infinitegrid'
   other_name: egjs-infinitegrid
   file: dist/infinitegrid.min.js
-  version: 4.12.0
+  version: 4.13.0
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 6.1.7
+  version: 6.1.9
   other_name: fancyapps-ui
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 6.1.7
+  version: 6.1.9
   other_name: fancyapps-ui
 fireworks:
   name: butterfly-extsrc
@@ -112,12 +112,12 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.27
+  version: 0.16.28
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.27
+  version: 0.16.28
 lazyload:
   name: vanilla-lazyload
   file: dist/lazyload.iife.min.js
@@ -125,7 +125,7 @@ lazyload:
 mathjax:
   name: mathjax
   file: tex-mml-chtml.js
-  version: 4.0.0
+  version: 4.1.0
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
@@ -190,7 +190,7 @@ twikoo:
 typed:
   name: typed.js
   file: dist/typed.umd.js
-  version: 2.1.0
+  version: 3.0.0
 valine:
   name: valine
   file: dist/Valine.min.js

scripts/common/default_config.js

@@ -523,7 +523,9 @@ module.exports = {
     theme: {
       light: 'default',
       dark: 'dark'
-    }
+    },
+    open_in_new_tab: true,
+    zoom_pan: true
   },
   chartjs: {
     enable: false,

source/css/_layout/third-party.styl

@@ -70,46 +70,49 @@ if hexo-config('mermaid.enable')
     background: var(--card-bg)
     text-align: center
 
-    .mermaid-open-btn
+    if hexo-config('mermaid.open_in_new_tab')
-      position: absolute
+      .mermaid-open-btn
-      top: 8px
+        position: absolute
-      right: 8px
+        top: 8px
-      z-index: 2
+        right: 8px
-      display: flex
+        z-index: 2
-      justify-content: center
+        display: flex
-      align-items: center
+        justify-content: center
-      padding: 0
+        align-items: center
-      width: 34px
+        padding: 0
-      height: 25px
+        width: 34px
-      border: none
+        height: 25px
-      border-radius: 20%
+        border: none
-      background: #D3D3D3
+        border-radius: 20%
-      box-shadow: 0 4px 10px rgba(0, 0, 0, .15)
+        background: #D3D3D3
-      color: #fff
+        box-shadow: 0 4px 10px rgba(0, 0, 0, .15)
-      font-size: 0
+        color: #fff
-      line-height: 1
+        font-size: 0
-      cursor: pointer
-      transition: background .2s ease, transform .2s ease
-
-      i
-        font-size: 16px
         line-height: 1
+        cursor: pointer
+        transition: background .2s ease, transform .2s ease
 
-      &:hover,
+        i
-      &:focus-visible
+          font-size: 16px
-        outline: none
+          line-height: 1
-        background: #C0C0C0
+
-        transform: translateY(-1px)
+        &:hover,
+        &:focus-visible
+          outline: none
+          background: #C0C0C0
+          transform: translateY(-1px)
 
     & > svg
       max-width: 100%
       height: 100%
-      cursor: grab
-      user-select: none
-      touch-action: none
 
-      &:active
+      if hexo-config('mermaid.zoom_pan')
-        cursor: grabbing
+        cursor: grab
+        user-select: none
+        touch-action: none
+
+        &:active
+          cursor: grabbing
 
   if hexo-config('mermaid.code_write')
     pre > code.mermaid