From e3e1d9e6ceff193ea8cad5ecb48cbdc3999f1285 Mon Sep 17 00:00:00 2001 From: Jerry Date: Mon, 26 Jan 2026 22:48:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Mermaid=20?= =?UTF-8?q?=E5=9C=96=E8=A1=A8=E5=8A=9F=E8=83=BD=E7=9A=84=E9=81=B8=E9=A0=85?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9C=A8=E6=96=B0=E6=A8=99=E7=B1=A4?= =?UTF-8?q?=E9=A0=81=E4=B8=AD=E6=89=93=E9=96=8B=E5=92=8C=E7=B8=AE=E6=94=BE?= =?UTF-8?q?=E5=B9=B3=E7=A7=BB=E4=BA=92=E5=8B=95=20fix:=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=8F=92=E4=BB=B6=E7=89=88=E6=9C=AC=E4=BB=A5=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=E7=9B=B8=E5=AE=B9=E6=80=A7=E5=95=8F=E9=A1=8C=20refact?= =?UTF-8?q?or:=20=E5=84=AA=E5=8C=96=E4=BB=A3=E7=A2=BC=E7=B5=90=E6=A7=8B?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AE=80=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 5 ++ layout/includes/mixins/indexPostUI.pug | 45 +++++++------ layout/includes/third-party/math/mermaid.pug | 4 +- package.json | 2 +- plugins.yml | 22 +++---- scripts/common/default_config.js | 4 +- source/css/_layout/third-party.styl | 69 ++++++++++---------- 7 files changed, 82 insertions(+), 69 deletions(-) diff --git a/_config.yml b/_config.yml index f8eeacb..da4ee3d 100644 --- a/_config.yml +++ b/_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/ diff --git a/layout/includes/mixins/indexPostUI.pug b/layout/includes/mixins/indexPostUI.pug index 874ad5e..16f5e70 100644 --- a/layout/includes/mixins/indexPostUI.pug +++ b/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 no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - const postCover = article.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}`) - .recent-post-info(class=no_cover) + div.post-bg(style=`background: ${postCover}`) + .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 date_type = data_type_updated ? 'updated' : 'date' - - const date_icon = data_type_updated ? 'fas fa-history' : 'far fa-calendar-alt' - - const date_title = data_type_updated ? _p('post.updated') : _p('post.created') - i(class=date_icon) - span.article-meta-label= date_title - time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))= date(article[date_type], config.date_format) + - const isUpdatedType = theme.post_meta.page.date_type === 'updated' + - const dateType = isUpdatedType ? 'updated' : 'date' + - const dateIcon = isUpdatedType ? 'fas fa-history' : 'far fa-calendar-alt' + - const dateTitle = isUpdatedType ? _p('post.updated') : _p('post.created') + i(class=dateIcon) + span.article-meta-label= dateTitle + 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 diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug index 148d18f..f1d26b0 100644 --- a/layout/includes/third-party/math/mermaid.pug +++ b/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) } diff --git a/package.json b/package.json index 4928757..ad45920 100644 --- a/package.json +++ b/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": { diff --git a/plugins.yml b/plugins.yml index 3ae26b0..4eb9381 100644 --- a/plugins.yml +++ b/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 diff --git a/scripts/common/default_config.js b/scripts/common/default_config.js index 5d9d46a..ab3f01f 100644 --- a/scripts/common/default_config.js +++ b/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, diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index cc7ff8d..8e85e6c 100644 --- a/source/css/_layout/third-party.styl +++ b/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 - position: absolute - top: 8px - right: 8px - z-index: 2 - display: flex - justify-content: center - align-items: center - padding: 0 - width: 34px - height: 25px - border: none - border-radius: 20% - background: #D3D3D3 - box-shadow: 0 4px 10px rgba(0, 0, 0, .15) - color: #fff - font-size: 0 - line-height: 1 - cursor: pointer - transition: background .2s ease, transform .2s ease - - i - font-size: 16px + if hexo-config('mermaid.open_in_new_tab') + .mermaid-open-btn + position: absolute + top: 8px + right: 8px + z-index: 2 + display: flex + justify-content: center + align-items: center + padding: 0 + width: 34px + height: 25px + border: none + border-radius: 20% + background: #D3D3D3 + box-shadow: 0 4px 10px rgba(0, 0, 0, .15) + color: #fff + font-size: 0 line-height: 1 + cursor: pointer + transition: background .2s ease, transform .2s ease - &:hover, - &:focus-visible - outline: none - background: #C0C0C0 - transform: translateY(-1px) + i + font-size: 16px + line-height: 1 + + &: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 - cursor: grabbing + if hexo-config('mermaid.zoom_pan') + cursor: grab + user-select: none + touch-action: none + + &:active + cursor: grabbing if hexo-config('mermaid.code_write') pre > code.mermaid