Merge branch 'dev'

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

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}

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.getCSS('!{url_for(theme.asset.artalk_css)}')
-        await btf.getScript('!{theme.asset.artalk_js}')
+        await btf.getScript('!{url_for(theme.asset.artalk_js)}')
         initArtalk(el, pageKey)
       }
     }

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
 

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/",

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

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>`

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 { theme_color: themeColor } = hexo.theme.config
-  const themeColorLight = theme_color && theme_color.enable ? theme_color.meta_theme_color_light : '#ffffff'
+  const themeColorLight = themeColor && themeColor.enable ? themeColor.meta_theme_color_light : '#ffffff'
-  const themeColorDark = theme_color && theme_color.enable ? theme_color.meta_theme_color_dark : '#0d0d0d'
+  const themeColorDark = themeColor && themeColor.enable ? themeColor.meta_theme_color_dark : '#0d0d0d'
 
   const createCustomJs = () => `
     const saveToLocal = {

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

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
+      margin-right: auto
-        flex: 1
+    else if !$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none'
-    else if (!$highlight_macstyle && hexo-config('code_blocks.shrink') != 'none')
+      & > :nth-child(2)
-      & > div:nth-child(2)
+        margin-right: auto
-        flex: 1
     else
-      .macStyle
+      & > :nth-child(1)
-        flex: 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)
 
@@ -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
+        const newEle = document.createElement('div')
-        ele.style.opacity = 1
+        newEle.className = 'copy-notice'
-        setTimeout(() => { ele.style.opacity = 0 }, 800)
+        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')
     }