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): 修正分頁文字使用正確的簡體字「页」

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%,

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