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)
         }