chore: 升級版本至 5.5.2 並更新相依套件

- perf(highlight): 改善複製提示 UI，新增浮動動畫效果 - fix(shuoshuo): 為說說內容中的圖片新增延遲載入支援 - fix(mermaid): 支援在標籤助手中使用自訂配置選項 - fix: 使用 url_for() 處理主題資源路徑 (busuanzi, artalk) - refactor(aside_archives): 重新命名 url_for 變數以保持一致性 - refactor(inject_head_js): 使用解構賦值命名方式 - chore(deps): 更新 hexo-util 至 4.0.0 - chore(plugins): 更新多個 CDN 套件版本 - style(highlight): 優化程式碼區塊工具列佈局與溢位處理 - fix(zh-CN): 修正分頁文字使用正確的簡體字「页」
2026-04-06 19:17:07 +08:00 · 2025-11-07 22:19:16 +08:00
parent 2d4765202d
commit 439014bbb6
11 changed files with 125 additions and 52 deletions
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -52,7 +52,7 @@ div
    != partial("includes/third-party/umami_analytics", {}, { cache: true })

  if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
-    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+    script(async data-pjax src=url_for(theme.asset.busuanzi) || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')

  != partial('includes/third-party/search/index', {}, { cache: true })

--- a/layout/includes/page/shuoshuo.pug
+++ b/layout/includes/page/shuoshuo.pug
@@ -49,6 +49,7 @@
    if !page.shuoshuo_url
      script(type='application/json' id='shuoshuo-data')!= safeJSON(localDate)

+    - const { enable, native, placeholder, field } = theme.lazyload
    script.
      (() => {
        const limitConfig = !{ JSON.stringify(page.limit || {}) }
@@ -84,6 +85,36 @@
          return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }

+        const addLazyload = str => {
+          const config = {
+            enable: !{Boolean(enable)},
+            native: !{Boolean(native)},
+            field: '!{field}',
+            placeholder: '!{url_for(placeholder)}',
+          }
+
+          if (!config.enable || config.field !== 'site') return str
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(str, 'text/html')
+          const images = doc.querySelectorAll('img')
+
+          images.forEach(img => {
+            if (config.native) {
+              img.setAttribute('loading', 'lazy')
+            } else {
+              const src = img.getAttribute('src')
+              img.setAttribute('data-lazy-src', src)
+
+              if (config.placeholder) {
+                img.setAttribute('src', config.placeholder)
+              } else {
+                img.removeAttribute('src')
+              }
+            }
+          })
+          return doc.body.innerHTML
+        }
+
        let currentPage = 1
        const itemsPerPage = 8
        let totalPages = 0
@@ -117,7 +148,7 @@
                      </time>
                    </div>
                  </div>
-                  <div class="shuoshuo-content">${item.content}</div>
+                  <div class="shuoshuo-content">${addLazyload(item.content)}</div>
                  <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
                    ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
                    ${commentButton}
--- a/layout/includes/third-party/comments/artalk.pug
+++ b/layout/includes/third-party/comments/artalk.pug
@@ -51,8 +51,8 @@ script.
    const loadArtalk = async (el, pageKey) => {
      if (typeof Artalk === 'object') initArtalk(el, pageKey)
      else {
-        await btf.getCSS('!{theme.asset.artalk_css}')
-        await btf.getScript('!{theme.asset.artalk_js}')
+        await btf.getCSS('!{url_for(theme.asset.artalk_css)}')
+        await btf.getScript('!{url_for(theme.asset.artalk_js)}')
        initArtalk(el, pageKey)
      }
    }
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -6,7 +6,11 @@ script.

      ele.forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
-        const mermaidThemeConfig = `%%{init:{ 'theme':'${theme}'}}%%\n`
+        const config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {}
+        if (!config.theme) {
+          config.theme = theme
+        }
+        const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n`
        const mermaidID = `mermaid-${index}`
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "5.5.1",
+  "version": "5.5.2",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
@@ -25,7 +25,7 @@
  "dependencies": {
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^3.0.1",
-    "hexo-util": "^3.3.0",
+    "hexo-util": "^4.0.0",
    "moment-timezone": "^0.6.0"
  },
  "homepage": "https://butterfly.js.org/",
--- a/plugins.yml
+++ b/plugins.yml
@@ -9,7 +9,7 @@ activate_power_mode:
 algolia_search:
  name: algoliasearch
  file: dist/lite/builds/browser.umd.js
-  version: 5.39.0
+  version: 5.43.0
 aplayer_css:
  name: aplayer
  file: dist/APlayer.min.css
@@ -45,7 +45,7 @@ canvas_ribbon:
 chartjs:
  name: chart.js
  file: dist/chart.umd.js
-  version: 4.5.0
+  version: 4.5.1
 clickShowText:
  name: butterfly-extsrc
  file: dist/click-show-text.min.js
@@ -57,21 +57,21 @@ click_heart:
 disqusjs:
  name: disqusjs
  file: dist/browser/disqusjs.es2015.umd.min.js
-  version: 3.1.1
+  version: 3.2.1
 disqusjs_css:
  name: disqusjs
  file: dist/browser/styles/disqusjs.css
-  version: 3.1.1
+  version: 3.2.1
 docsearch_css:
  name: '@docsearch/css'
  other_name: docsearch-css
  file: dist/style.css
-  version: 4.1.0
+  version: 4.3.1
 docsearch_js:
  name: '@docsearch/js'
  other_name: docsearch-js
  file: dist/umd/index.js
-  version: 4.1.0
+  version: 4.3.1
 egjs_infinitegrid:
  name: '@egjs/infinitegrid'
  other_name: egjs-infinitegrid
@@ -80,12 +80,12 @@ egjs_infinitegrid:
 fancybox:
  name: '@fancyapps/ui'
  file: dist/fancybox/fancybox.umd.js
-  version: 6.0.33
+  version: 6.1.4
  other_name: fancyapps-ui
 fancybox_css:
  name: '@fancyapps/ui'
  file: dist/fancybox/fancybox.css
-  version: 6.0.33
+  version: 6.1.4
  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.22
+  version: 0.16.25
 katex_copytex:
  name: katex
  file: dist/contrib/copy-tex.min.js
  other_name: KaTeX
-  version: 0.16.22
+  version: 0.16.25
 lazyload:
  name: vanilla-lazyload
  file: dist/lazyload.iife.min.js
@@ -133,7 +133,7 @@ medium_zoom:
 mermaid:
  name: mermaid
  file: dist/mermaid.min.js
-  version: 11.12.0
+  version: 11.12.1
 meting_js:
  name: butterfly-extsrc
  file: metingjs/dist/Meting.min.js
@@ -199,9 +199,9 @@ waline_css:
  name: '@waline/client'
  file: dist/waline.css
  other_name: waline
-  version: 3.6.0
+  version: 3.7.1
 waline_js:
  name: '@waline/client'
  file: dist/waline.js
  other_name: waline
-  version: 3.6.0
+  version: 3.7.1
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -1,7 +1,7 @@
 'use strict'

 hexo.extend.helper.register('aside_archives', function (options = {}) {
-  const { config, page, site, url_for, _p } = this
+  const { config, page, site, url_for: urlFor, _p } = this
  const { archive_dir: archiveDir, timezone, language } = config

  // Destructure and set default options with object destructuring
@@ -74,7 +74,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
    if (type === 'monthly') {
      url += item.month < 10 ? `0${item.month}/` : `${item.month}/`
    }
-    return url_for(url)
+    return urlFor(url)
  }

  // Limit results efficiently
@@ -87,7 +87,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
      <span>${_p('aside.card_archives')}</span>
      ${
        data.length > limitedData.length
-          ? `<a class="card-more-btn" href="${url_for(archiveDir)}/"
+          ? `<a class="card-more-btn" href="${urlFor(archiveDir)}/"
            title="${_p('aside.more_button')}">
            <i class="fas fa-angle-right"></i>
          </a>`
--- a/scripts/helpers/inject_head_js.js
+++ b/scripts/helpers/inject_head_js.js
@@ -4,9 +4,9 @@ hexo.extend.helper.register('inject_head_js', function () {
  const { darkmode, aside, pjax } = this.theme
  const start = darkmode.start || 6
  const end = darkmode.end || 18
-  const { theme_color } = hexo.theme.config
-  const themeColorLight = theme_color && theme_color.enable ? theme_color.meta_theme_color_light : '#ffffff'
-  const themeColorDark = theme_color && theme_color.enable ? theme_color.meta_theme_color_dark : '#0d0d0d'
+  const { theme_color: themeColor } = hexo.theme.config
+  const themeColorLight = themeColor && themeColor.enable ? themeColor.meta_theme_color_light : '#ffffff'
+  const themeColorDark = themeColor && themeColor.enable ? themeColor.meta_theme_color_dark : '#0d0d0d'

  const createCustomJs = () => `
    const saveToLocal = {
--- a/scripts/tag/mermaid.js
+++ b/scripts/tag/mermaid.js
@@ -9,7 +9,8 @@
 const { escapeHTML } = require('hexo-util')

 const mermaid = (args, content) => {
-  return `<div class="mermaid-wrap"><pre class="mermaid-src" hidden>
+  const config = args[0] || '{}'
+  return `<div class="mermaid-wrap"><pre class="mermaid-src" data-config="${escapeHTML(config)}" hidden>
    ${escapeHTML(content)}
  </pre></div>`
 }
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -100,16 +100,17 @@ $code-block
  .highlight-tools
    display: flex
    align-items: center
+    overflow: hidden
    padding: 0 8px
    min-height: 24px
    height: 2.15em
    background: var(--hltools-bg)
    color: var(--hltools-color)
    font-size: $code-font-size
-    overflow: hidden

    & > *
-      padding: 5px
+      flex: 0 0 auto
+      margin: 2px

    i
      cursor: pointer
@@ -130,28 +131,25 @@ $code-block
        padding: 0

    .code-lang
-      flex: 1
+      flex: 1 1 auto
+      overflow: hidden
+      padding-right: 10px
      text-transform: uppercase
+      text-overflow: ellipsis
+      white-space: nowrap
      font-weight: bold
      font-size: 1.15em
      user-select: none
      -webkit-user-select: none
-      padding 2px
-
-    .copy-notice
-      padding-right: 2px
-      opacity: 0
-      transition: opacity .4s

    if hexo-config('code_blocks.language')
-      .code-lang
-        flex: 1
-    else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
-      & > div:nth-child(2)
-        flex: 1
+      margin-right: auto
+    else if !$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none'
+      & > :nth-child(2)
+        margin-right: auto
    else
-      .macStyle
-        flex: 1
+      & > :nth-child(1)
+        margin-right: auto

  .gutter
    user-select: none
@@ -163,11 +161,21 @@ $code-block
    td
      border: none

+.copy-notice
+  position: absolute
+  z-index: 99999
+  padding: 2px 6px
+  border-radius: 3px
+  background: var(--hltools-bg)
+  white-space: nowrap
+  font-size: 12px
+  pointer-events: none
+
 if $highlight_macstyle
  .container
    figure.highlight
      margin: 0 0 24px
-      border-radius: 7px
+      border-radius: 8px
      box-shadow: 0 5px 10px 0 $highlight-mac-border
      -webkit-transform: translateZ(0)

@@ -231,7 +239,7 @@ if hexo-config('code_blocks.height_limit')
        & ~ pre
          overflow: hidden
          height: unit(hexo-config('code_blocks.height_limit'), px)
-  
+
  @keyframes code-expand-key
    0%
      opacity: .6
@@ -264,8 +272,8 @@ if hexo-config('code_blocks.fullpage')
        & ~ table
          display: block
          overflow: auto
-          height: calc(100vh - 2.15em)
          margin-bottom: 0
+          height: calc(100vh - 2.15em)

  @keyframes code-fullpage
    0%,
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -68,7 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
    const isPrismjs = plugin === 'prismjs'
    const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
    const highlightShrinkEle = isHighlightShrink !== undefined ? '<i class="fas fa-angle-down expand"></i>' : ''
-    const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
+    const highlightCopyEle = highlightCopy ? '<i class="fas fa-paste copy-button"></i>' : ''
    const highlightMacStyleEle = '<div class="macStyle"><div class="mac-close"></div><div class="mac-minimize"></div><div class="mac-maximize"></div></div>'
    const highlightFullpageEle = highlightFullpage ? '<i class="fa-solid fa-up-right-and-down-left-from-center fullpage-button"></i>' : ''

@@ -76,12 +76,41 @@ document.addEventListener('DOMContentLoaded', () => {
      if (GLOBAL_CONFIG.Snackbar !== undefined) {
        btf.snackbarShow(text)
      } else {
-        ele.textContent = text
-        ele.style.opacity = 1
-        setTimeout(() => { ele.style.opacity = 0 }, 800)
+        const newEle = document.createElement('div')
+        newEle.className = 'copy-notice'
+        newEle.textContent = text
+        document.body.appendChild(newEle)
+
+        const buttonRect = ele.getBoundingClientRect()
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+        const finalTop = buttonRect.top + scrollTop - 40
+        const finalLeft = buttonRect.left + scrollLeft + buttonRect.width / 2
+
+        const topValue = ele.closest('figure.highlight').classList.contains('code-fullpage') ? finalTop + 60 : finalTop
+
+        newEle.style.cssText = `
+      top: ${topValue + 10}px;
+      left: ${finalLeft}px;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.3s ease, top 0.3s ease;
+    `
+
+        requestAnimationFrame(() => {
+          newEle.style.opacity = '1'
+          newEle.style.top = `${topValue}px`
+        })
+
+        setTimeout(() => {
+          newEle.style.opacity = '0'
+          newEle.style.top = `${topValue + 10}px`
+          setTimeout(() => {
+            newEle?.remove()
+          }, 300)
+        }, 800)
      }
    }
-
    const copy = async (text, ctx) => {
      try {
        await navigator.clipboard.writeText(text)
@@ -99,7 +128,7 @@ document.addEventListener('DOMContentLoaded', () => {
      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
      const codeElement = $buttonParent.querySelector(preCodeSelector)
      if (!codeElement) return
-      copy(codeElement.innerText, clickEle.previousElementSibling)
+      copy(codeElement.innerText, clickEle)
      $buttonParent.classList.remove('copy-true')
    }