Merge branch 'dev'

- Add :not([data-fancybox]) to pjaxExclude to prevent fancybox links from being loaded via pjax
- Refactor series grouping to use a shared hexo._seriesGroups object built once
- Improve performance by avoiding repeated post iteration in both tag and helper
- Version bump to 5.6.1

.github/workflows/publish.yml

@@ -3,17 +3,25 @@ name: npm publish
 on:
   release:
     types: [created]
+
 jobs:
   build:
     runs-on: ubuntu-latest
+    
+    permissions:
+      contents: read
+      id-token: write  # OIDC 必須
+
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     # Setup .npmrc file to publish to npm
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v4
       with:
-        node-version: '12.x'
+        node-version: '20.x'
         registry-url: 'https://registry.npmjs.org'
+
     - run: npm install
-    - run: npm publish
+
+    - run: npm publish --provenance --access public
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

_config.yml

@@ -91,7 +91,8 @@ category_per_img:
 footer_img: false
 
 # Website Background
-# Can set it to color or image url
+# Can set it to color, image URL or an array containing colors and/or image URLs
+# If an array is provided, a random background will be selected from the array on each load
 background:
 
 cover:
@@ -318,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
@@ -657,7 +659,7 @@ artalk:
 # --------------------------------------
 
 chat:
-  # Choose: chatra/tidio/crisp
+  # Choose: chatra/tidio/crisp/knocket
   # Leave it empty if you don't need chat
   use:
   # Chat Button [recommend]
@@ -678,6 +680,10 @@ tidio:
 crisp:
   website_id:
 
+# https://trtc.io/solutions/knocket
+knocket:
+  identifier:
+
 # --------------------------------------
 # Analysis
 # --------------------------------------
@@ -938,6 +944,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/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=theme.asset.busuanzi ? 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/head/config.pug

@@ -72,20 +72,16 @@
     })
   }
 
-  let highlight = 'undefined'
-  let syntaxHighlighter = config.syntax_highlighter
-  let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable)
-  if (highlightEnable) {
-    const { copy, language, height_limit, fullpage, macStyle } = theme.code_blocks
-    highlight = JSON.stringify({
-      plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs',
+  let highlightProvider = config.syntax_highlighter || (config.highlight.enable ? 'highlight.js' : config.prismjs.enable ? 'prismjs' : null)
+  const { copy, language, height_limit, fullpage, macStyle, shrink } = theme.code_blocks
+  let highlight = JSON.stringify({
+    plugin: highlightProvider,
     highlightCopy: copy,
     highlightLang: language,
     highlightHeightLimit: height_limit,
     highlightFullpage: fullpage,
     highlightMacStyle: macStyle
   })
-  }
 
 script.
   const GLOBAL_CONFIG = {

layout/includes/layout.pug

@@ -13,7 +13,29 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
     !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
-      #web_bg(style=getBgPath(theme.background))
+      if !Array.isArray(theme.background)
+        #web_bg.bg-animation(style=getBgPath(theme.background))
+      else
+        #web_bg.bg-animation
+        - const bgStyleArr = theme.background.map(getBgPath)
+        script.
+          (() => {
+            const arr = !{JSON.stringify(bgStyleArr)}
+            const webBgDiv = document.getElementById('web_bg')
+
+            const setRandomBg = () => {
+              webBgDiv.style = arr[Math.floor(Math.random() * arr.length)]
+              requestAnimationFrame(() => webBgDiv.classList.add('bg-animation'))
+            }
+
+            document.addEventListener('pjax:send', () => {
+              webBgDiv.style = ''
+              webBgDiv.classList.remove('bg-animation')
+            })
+
+            document.addEventListener('pjax:complete', setRandomBg)
+            document.addEventListener('DOMContentLoaded', setRandomBg)
+          })()
 
     !=partial('includes/sidebar', {}, {cache: true})
 

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
 

layout/includes/page/shuoshuo.pug

@@ -49,10 +49,13 @@
     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 || {}) }
 
+        const escapeHtml = str => String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
         const sortDataByDate = data => data.sort((a, b) => new Date(b.date) - new Date(a.date))
 
         const filterDataByLimit = (data, limit) => {
@@ -63,13 +66,10 @@
             return data.filter(item => new Date(item.date) >= limitDate)
           }
           return data
-        };
+        }
 
-        const formatToTimeZone = (date) => {
-          const fullDate = date.length === 10 ? `${date} 00:00:00` : date
-          const visitorTimeZone = '#{config.timezone}' || Intl.DateTimeFormat().resolvedOptions().timeZone
-          const options = {
-            timeZone: visitorTimeZone,
+        const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+          timeZone: !{JSON.stringify(config.timezone || '')} || Intl.DateTimeFormat().resolvedOptions().timeZone,
           year: 'numeric',
           month: '2-digit',
           day: '2-digit',
@@ -77,30 +77,60 @@
           minute: '2-digit',
           second: '2-digit',
           hour12: false
-          }
-          const [day, month, year, hour, minute, second] = new Intl.DateTimeFormat('en-GB', options)
-            .format(new Date(fullDate))
-            .match(/\d+/g)
+        })
+
+        const formatToTimeZone = (date) => {
+          const fullDate = date.length === 10 ? `${date} 00:00:00` : date
+          const [day, month, year, hour, minute, second] = dateFormatter.format(new Date(fullDate)).match(/\d+/g)
           return `${year}-${month}-${day} ${hour}:${minute}:${second}`
         }
 
+        const addLazyload = str => {
+          const lazyConfig = {
+            enable: !{Boolean(enable)},
+            native: !{Boolean(native)},
+            field: !{JSON.stringify(field || '')},
+            placeholder: !{JSON.stringify(url_for(placeholder))},
+          }
+
+          if (!lazyConfig.enable || lazyConfig.field !== 'site' || str.indexOf('<img') === -1) return str
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(str, 'text/html')
+          const images = doc.querySelectorAll('img')
+
+          images.forEach(img => {
+            if (lazyConfig.native) {
+              img.setAttribute('loading', 'lazy')
+            } else {
+              const src = img.getAttribute('src')
+              img.setAttribute('data-lazy-src', src)
+
+              if (lazyConfig.placeholder) {
+                img.setAttribute('src', lazyConfig.placeholder)
+              } else {
+                img.removeAttribute('src')
+              }
+            }
+          })
+          return doc.body.innerHTML
+        }
+
         let currentPage = 1
         const itemsPerPage = 8
         let totalPages = 0
         let data = []
-        let inputEventsAttached = false // Flag to mark if input event listeners have been added
 
         const renderData = (dataSlice) => {
           const content = dataSlice.map(item => {
             const formattedDate = formatToTimeZone(item.date)
-            const tags = item.tags && item.tags.map(tag => `<span class="shuoshuo-tag">${tag}</span>`).join('') || ''
-            const commentButton = item.key && !{commentsJsLoad}
+            const tags = item.tags && item.tags.map(tag => `<span class="shuoshuo-tag">${escapeHtml(tag)}</span>`).join('') || ''
+            const commentButton = item.key && !{commentsJsLoad || false}
               ? `<div class="shuoshuo-comment-btn" onclick="addCommentToShuoshuo(event)">
                   <i class="fa-solid fa-comments"></i>
                 </div>`
               : ''
             const commentContainer = item.key
-              ? `<div class="shuoshuo-comment no-comment" data-key="${item.key}"></div>`
+              ? `<div class="shuoshuo-comment no-comment" data-key="${escapeHtml(item.key)}"></div>`
               : ''
 
             return `
@@ -108,16 +138,16 @@
                 <div class="container">
                   <div class="shuoshuo-item-header">
                     <div class="shuoshuo-avatar">
-                      <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
+                      <img class="no-lightbox" src="${item.avatar ? escapeHtml(item.avatar) : !{JSON.stringify(url_for(theme.avatar.img))}}">
                     </div>
                     <div class="shuoshuo-info">
-                      <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
+                      <div class="shuoshuo-author">${item.author ? escapeHtml(item.author) : !{JSON.stringify(config.author || '')}}</div>
                       <time class="shuoshuo-date" title="${formattedDate}">
                         ${btf.diffDate(formattedDate, true)}
                       </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}
@@ -134,70 +164,94 @@
           btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
         }
 
-        const renderNavigation = () => {
-          const container = document.getElementById('article-container')
-          const existingNav = container.nextElementSibling
-          if (existingNav && existingNav.classList.contains('shuoshuo-navigation')) {
-            existingNav.remove()
+        const setupNavEvents = (nav) => {
+          nav.querySelector('.shuoshuo-prev-btn').addEventListener('click', () => {
+            if (currentPage > 1) { currentPage--; renderPage(currentPage) }
+          })
+          nav.querySelector('.shuoshuo-next-btn').addEventListener('click', () => {
+            if (currentPage < totalPages) { currentPage++; renderPage(currentPage) }
+          })
+
+          const input = nav.querySelector('.shuoshuo-page-input')
+
+          input.addEventListener('focus', e => { e.target.placeholder = '' })
+          input.addEventListener('blur', e => {
+            if (!e.target.value.trim()) e.target.placeholder = currentPage
+          })
+
+          input.addEventListener('input', e => {
+            const value = parseInt(e.target.value) || 0
+            let wasInvalid = false
+
+            if (value > totalPages) { e.target.value = totalPages; wasInvalid = true }
+            else if (value < 1 && e.target.value !== '') { e.target.value = 1; wasInvalid = true }
+
+            if (wasInvalid) {
+              e.target.classList.add('invalid')
+              setTimeout(() => e.target.classList.remove('invalid'), 500)
+            }
+          })
+
+          input.addEventListener('keydown', e => {
+            const value = e.target.value + e.key
+
+            if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete' ||
+                e.key === 'ArrowLeft' || e.key === 'ArrowRight' ||
+                e.key === 'Tab' || e.ctrlKey || e.metaKey) {
+              if (e.key === 'Enter') {
+                const inputValue = e.target.value.trim()
+                const inputPage = inputValue === '' ? currentPage : parseInt(inputValue)
+                if (inputPage >= 1 && inputPage <= totalPages && inputPage !== currentPage) {
+                  currentPage = inputPage
+                  renderPage(currentPage)
+                } else if (inputValue === '') {
+                  renderPage(currentPage)
+                }
+              }
+              return
             }
 
+            if (!/^\d$/.test(e.key)) {
+              e.preventDefault()
+              return
+            }
+
+            const newValue = parseInt(value) || 0
+            if (newValue > totalPages || (value.length > 1 && newValue === 0)) {
+              e.preventDefault()
+              e.target.classList.add('invalid')
+              setTimeout(() => e.target.classList.remove('invalid'), 500)
+            }
+          })
+        }
+
+        const renderNavigation = () => {
+          const container = document.getElementById('article-container')
+          let nav = container.nextElementSibling
           const pageInfoTemplate = '#{__('pagination.page_info')}'
           const pageInfoText = pageInfoTemplate
             .replace(/\$\{current}/g, currentPage)
             .replace(/\$\{total}/g, totalPages)
 
-          const navHtml = `
-            <div class="shuoshuo-navigation">
-              <button onclick="window.shuoshuoPrevPage()" ${currentPage === 1 ? 'disabled' : ''}><i class="fa-solid fa-chevron-left"></i></button>
-              <span class="shuoshuo-page-info">${pageInfoText}</span>
-              <input type="number" class="shuoshuo-page-input" min="1" max="${totalPages}" placeholder="${currentPage}" onkeydown="window.shuoshuoHandleKeyDown(event)">
-              <button onclick="window.shuoshuoNextPage()" ${currentPage === totalPages ? 'disabled' : ''}><i class="fa-solid fa-chevron-right"></i></button>
-            </div>
+          if (!nav || !nav.classList.contains('shuoshuo-navigation')) {
+            nav = document.createElement('div')
+            nav.className = 'shuoshuo-navigation'
+            nav.innerHTML = `
+              <button class="shuoshuo-prev-btn"><i class="fa-solid fa-chevron-left"></i></button>
+              <span class="shuoshuo-page-info"></span>
+              <input type="number" class="shuoshuo-page-input" min="1">
+              <button class="shuoshuo-next-btn"><i class="fa-solid fa-chevron-right"></i></button>
             `
-          container.insertAdjacentHTML('afterend', navHtml)
-
-          // Add input validation event listeners (only once)
-          if (!inputEventsAttached) {
-            setTimeout(() => {
-              const input = document.querySelector('.shuoshuo-page-input')
-              if (input) {
-                // Clear placeholder when clicking the input box
-                input.addEventListener('focus', (event) => {
-                  event.target.placeholder = ''
-                })
-
-                // Restore placeholder if no content when losing focus
-                input.addEventListener('blur', (event) => {
-                  if (!event.target.value.trim()) {
-                    event.target.placeholder = currentPage
-                  }
-                })
-
-                input.addEventListener('input', (event) => {
-                  const value = parseInt(event.target.value) || 0
-                  let wasInvalid = false
-
-                  if (value > totalPages) {
-                    event.target.value = totalPages
-                    wasInvalid = true
-                  } else if (value < 1 && event.target.value !== '') {
-                    event.target.value = 1
-                    wasInvalid = true
+            container.insertAdjacentElement('afterend', nav)
+            setupNavEvents(nav)
           }
 
-                  // If value is corrected, show red and shake effect
-                  if (wasInvalid) {
-                    event.target.classList.add('invalid')
-                    setTimeout(() => {
-                      event.target.classList.remove('invalid')
-                    }, 500)
-                  }
-                })
-
-                inputEventsAttached = true // Mark that event listeners have been added
-              }
-            }, 0)
-          }
+          nav.querySelector('.shuoshuo-page-info').textContent = pageInfoText
+          nav.querySelector('.shuoshuo-prev-btn').disabled = currentPage === 1
+          nav.querySelector('.shuoshuo-next-btn').disabled = currentPage === totalPages
+          const input = nav.querySelector('.shuoshuo-page-input')
+          input.max = totalPages
+          input.placeholder = currentPage
         }
 
         const renderPage = (page) => {
@@ -208,79 +262,14 @@
           renderNavigation()
         }
 
-        window.shuoshuoPrevPage = () => {
-          if (currentPage > 1) {
-            currentPage--
-            renderPage(currentPage)
-          }
-        }
-
-        window.shuoshuoNextPage = () => {
-          if (currentPage < totalPages) {
-            currentPage++
-            renderPage(currentPage)
-          }
-        }
-
-        window.shuoshuoGoToPage = (page) => {
-          if (typeof page === 'number') {
-            // Directly jump to the specified page
-            if (page >= 1 && page <= totalPages && page !== currentPage) {
-              currentPage = page
-              renderPage(currentPage)
-            }
-          } else {
-            // Get page from input box
-            const input = document.querySelector('.shuoshuo-page-input')
-            const inputValue = input.value.trim()
-            const inputPage = inputValue === '' ? currentPage : parseInt(inputValue)
-            if (inputPage >= 1 && inputPage <= totalPages && inputPage !== currentPage) {
-              currentPage = inputPage
-              renderPage(currentPage)
-            } else if (inputValue === '') {
-              // If input box is empty, re-render current page (update placeholder)
-              renderPage(currentPage)
-            }
-          }
-        }
-
-        window.shuoshuoHandleKeyDown = (event) => {
-          const input = event.target
-          const value = input.value + event.key
-
-          // Allow delete, arrow keys, backspace, etc.
-          if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete' ||
-              event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
-              event.key === 'Tab' || event.ctrlKey || event.metaKey) {
-            if (event.key === 'Enter') {
-              window.shuoshuoGoToPage()
-            }
-            return
-          }
-
-          // Only allow numbers
-          if (!/^\d$/.test(event.key)) {
-            event.preventDefault()
-            return
-          }
-
-          // Check if the value after input exceeds the range
-          const newValue = parseInt(value) || 0
-          if (newValue > totalPages || (value.length > 1 && newValue === 0)) {
-            event.preventDefault()
-            // Add red and shake effect
-            input.classList.add('invalid')
-            setTimeout(() => {
-              input.classList.remove('invalid')
-            }, 500)
-          }
-        }
-
         const loadShuoshuo = async () => {
+          const container = document.getElementById('article-container')
           try {
             let originData = []
             if (!{Boolean(page.shuoshuo_url)}) {
+              container.innerHTML = '<div class="shuoshuo-loading"><i class="fa-solid fa-circle-notch fa-spin"></i></div>'
               const response = await fetch('!{url_for(page.shuoshuo_url)}')
+              if (!response.ok) throw new Error(`HTTP ${response.status}`)
               originData = await response.json()
             } else {
               const dataElement = document.getElementById('shuoshuo-data')
@@ -288,14 +277,33 @@
             }
 
             data = filterDataByLimit(sortDataByDate(originData), limitConfig)
-
             totalPages = Math.ceil(data.length / itemsPerPage)
 
+            if (data.length === 0) {
+              container.innerHTML = '<div class="shuoshuo-empty"></div>'
+              return
+            }
+
             renderPage(currentPage)
           } catch (error) {
             console.error(error)
+            container.innerHTML = '<div class="shuoshuo-error"><i class="fa-solid fa-circle-exclamation"></i></div>'
+          }
         }
-        };
 
-        window.pjax ? loadShuoshuo() : window.addEventListener('load', loadShuoshuo)
+        const pjaxCleanup = () => {
+          const container = document.getElementById('article-container')
+          if (container) {
+            const nav = container.nextElementSibling
+            if (nav && nav.classList.contains('shuoshuo-navigation')) nav.remove()
+          }
+          document.removeEventListener('pjax:send', pjaxCleanup)
+        }
+
+        if (window.pjax) {
+          document.addEventListener('pjax:send', pjaxCleanup)
+          loadShuoshuo()
+        } else {
+          window.addEventListener('load', loadShuoshuo)
+        }
       })()

layout/includes/page/tags.pug

@@ -1,2 +1,2 @@
 .tag-cloud-list.text-center
-  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em'})
+  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', custom_colors: page.custom_colors})

layout/includes/pagination.pug

@@ -19,7 +19,7 @@ if page.total !== 1
 
           a.pagination-related(class=className href=url_for(direction.path) title=direction.title)
             if direction.cover_type === 'img'
-              img.cover(src=url_for(direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
+              img.cover(src=url_for(direction.pagination_cover || direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
             else
               .cover(style=`background: ${direction.cover || 'var(--default-bg-color)'}`)
 

layout/includes/third-party/abcjs/abcjs.pug

@@ -2,8 +2,11 @@ script.
   (() => {
     const abcjsInit = () => {
       const abcjsFn = () => {
+        const $article = document.getElementById("article-container")
+        if (!$article || $article.querySelector(".hbe-container")) return
+
         setTimeout(() => {
-          const sheets = document.querySelectorAll(".abc-music-sheet")
+          const sheets = $article.querySelectorAll(".abc-music-sheet")
           for (let i = 0; i < sheets.length; i++) {
             const ele = sheets[i]
             if (ele.children.length > 0) continue
@@ -24,12 +27,12 @@ script.
             const options = { ...params, responsive: "resize" }
 
             // Render the music score using ABCJS.renderAbc
-            ABCJS.renderAbc(ele, ele.innerHTML, options)
+            ABCJS.renderAbc(ele, ele.textContent, options)
           }
         }, 100)
       }
 
-      if (typeof ABCJS === "object") {
+      if (typeof ABCJS === "object" && ABCJS !== null) {
         abcjsFn()
       } else {
         btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn)

layout/includes/third-party/chat/chatra.pug

@@ -6,10 +6,14 @@ script.
       (window.Chatra.q = window.Chatra.q || []).push(arguments)
     }
 
-    btf.getScript('https://call.chatra.io/chatra.js').then(() => {
     const isChatBtn = !{theme.chat.rightside_button}
     const isChatHideShow = !{theme.chat.button_hide_show}
 
+    if (isChatBtn) {
+      window.ChatraSetup = { startHidden: true }
+    }
+
+    btf.getScript('https://call.chatra.io/chatra.js').then(() => {
       if (isChatBtn) {
         const close = () => {
           Chatra('minimizeWidget')
@@ -21,11 +25,13 @@ script.
           Chatra('show')
         }
 
-        window.ChatraSetup = { startHidden: true }
+        window.chatBtnFn = () => {
+          const el = document.getElementById('chatra')
+          return el && el.classList.contains('chatra--expanded') ? close() : open()
+        }
 
-        window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
-
-        document.getElementById('chat-btn').style.display = 'block'
+        const chatBtn = document.getElementById('chat-btn')
+        if (chatBtn) chatBtn.style.display = 'block'
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => Chatra('hide'),

layout/includes/third-party/chat/crisp.pug

@@ -21,7 +21,8 @@ script.
 
         window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
 
-        document.getElementById('chat-btn').style.display = 'block'
+        const chatBtn = document.getElementById('chat-btn')
+        if (chatBtn) chatBtn.style.display = 'block'
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => $crisp.push(["do", "chat:hide"]),

layout/includes/third-party/chat/index.pug

@@ -5,3 +5,5 @@ case theme.chat.use
     include ./tidio.pug
   when 'crisp'
     include ./crisp.pug
+  when 'knocket'
+    include ./knocket.pug

layout/includes/third-party/chat/knocket.pug

@@ -0,0 +1,42 @@
+//- Knocket live chat — https://trtc.io/solutions/knocket
+script.
+  (() => {
+    const identifier = !{JSON.stringify(theme.knocket.identifier || '').replace(/</g, '\\u003c')}
+    if (!identifier) return
+
+    btf.getScript(`https://trtc.io/knocket-sdk/sdk.js?identifier=${encodeURIComponent(identifier)}`).then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      let widget = null
+      const getWidget = () => widget || (widget = document.getElementById('contact-widget-auto'))
+
+      if (isChatBtn) {
+        const hide = () => { const w = getWidget(); if (w) w.style.display = 'none' }
+        const show = () => { const w = getWidget(); if (w) w.style.display = '' }
+
+        // Hide the native Knocket floating button
+        const observer = new MutationObserver(() => {
+          if (getWidget()) { hide(); observer.disconnect() }
+        })
+        observer.observe(document.body, { childList: true, subtree: true })
+        hide()
+
+        window.chatBtnFn = () => {
+          const w = getWidget()
+          if (!w) return
+          w.style.display = w.style.display === 'none' ? '' : 'none'
+        }
+
+        const chatBtn = document.getElementById('chat-btn')
+        if (chatBtn) chatBtn.style.display = 'block'
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => { const w = getWidget(); if (w) w.style.display = 'none' },
+          show: () => { const w = getWidget(); if (w) w.style.display = '' }
+        }
+      }
+    }).catch(error => {
+      console.warn('[Knocket] Failed to load the chat SDK.', error)
+    })
+  })()

layout/includes/third-party/chat/tidio.pug

@@ -32,8 +32,8 @@ script.
           isShow ? close() : open()
         }
 
-        document.getElementById('chat-btn').style.display = 'block'
-
+        const chatBtn = document.getElementById('chat-btn')
+        if (chatBtn) chatBtn.style.display = 'block'
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => window.tidioChatApi && window.tidioChatApi.hide(),

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

layout/includes/third-party/comments/disqusjs.pug

@@ -3,7 +3,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const dqOption = !{JSON.stringify(dqOption)}
 
     const destroyDisqusjs = () => {

layout/includes/third-party/comments/facebook_comments.pug

@@ -3,7 +3,7 @@
 
 script.
   (()=>{
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
 
     const loadFBComment = (el = document, path) => {
       if (isShuoshuo) {

layout/includes/third-party/math/mathjax.pug

@@ -2,7 +2,22 @@
 - const { tags, enableMenu } = theme.math.mathjax
 script.
   (() => {
+    const changeScriptToMath = article => {
+      article.querySelectorAll('script[type^="math/tex"]').forEach(el => {
+        const display = /mode=display/.test(el.type)
+        const node = document.createElement(display ? 'div' : 'span')
+        node.textContent = display
+          ? `$$${el.textContent}$$`
+          : `$${el.textContent}$`
+        el.parentNode.replaceChild(node, el)
+      })
+    }
+
     const loadMathjax = () => {
+      const article = document.getElementById('article-container')
+      if (!article || article.querySelector('.hbe-container')) return
+      changeScriptToMath(article)
+
       if (!window.MathJax) {
         window.MathJax = {
           loader: {
@@ -11,7 +26,8 @@ script.
               //- '[tex]/bbm',
               //- '[tex]/bboldx',
               //- '[tex]/dsfont',
-              '[tex]/mhchem'
+              '[tex]/mhchem',
+              'ui/lazy'
             ],
             paths: {
               'mathjax-newcm': '[mathjax]/../@mathjax/mathjax-newcm-font',
@@ -39,25 +55,13 @@ script.
             scale: 1.1
           },
           options: {
+            lazyMargin: '200px',
             enableMenu: !{enableMenu},
             menuOptions: {
               settings: {
                 enrich: false  // Turn off Braille and voice narration text automatic generation
               }
             },
-            renderActions: {
-              findScript: [10, doc => {
-                for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
-                  const display = !!node.type.match(/; *mode=display/)
-                  const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display)
-                  const text = document.createTextNode('')
-                  node.parentNode.replaceChild(text, node)
-                  math.start = {node: text, delim: '', n: 0}
-                  math.end = {node: text, delim: '', n: 0}
-                  doc.math.push(math)
-                }
-              }, '']
-            }
           }
         }
 
@@ -67,9 +71,8 @@ script.
         script.async = true
         document.head.appendChild(script)
       } else {
-        MathJax.startup.document.state(0)
-        MathJax.texReset()
-        MathJax.typesetPromise()
+        MathJax.typesetClear()
+        MathJax.typesetPromise([ article ])
       }
     }
 

layout/includes/third-party/math/mermaid.pug

@@ -1,27 +1,337 @@
 script.
   (() => {
+    const parseViewBox = viewBox => {
+      if (!viewBox) return null
+      const parts = viewBox.trim().split(/[\s,]+/).map(n => Number(n))
+      if (parts.length !== 4 || parts.some(n => Number.isNaN(n))) return null
+      return parts
+    }
+
+    const getSvgViewBox = svg => {
+      const attr = parseViewBox(svg.getAttribute('viewBox'))
+      if (attr) return attr
+
+      // Fallback: use bbox to build a viewBox
+      try {
+        const bbox = svg.getBBox()
+        if (bbox && bbox.width && bbox.height) return [bbox.x, bbox.y, bbox.width, bbox.height]
+      } catch (e) {
+        // getBBox may fail on some edge cases; ignore
+      }
+
+      const w = Number(svg.getAttribute('width')) || 0
+      const h = Number(svg.getAttribute('height')) || 0
+      if (w > 0 && h > 0) return [0, 0, w, h]
+      return [0, 0, 100, 100]
+    }
+
+    const setSvgViewBox = (svg, vb) => {
+      svg.setAttribute('viewBox', `${vb[0]} ${vb[1]} ${vb[2]} ${vb[3]}`)
+    }
+
+    const clamp = (v, min, max) => Math.max(min, Math.min(max, v))
+
+    const openSvgInNewTab = ({ source, initViewBox }) => {
+      const getClonedSvg = () => {
+        if (typeof source === 'string') {
+          const template = document.createElement('template')
+          template.innerHTML = source.trim()
+          const svg = template.content.querySelector('svg')
+          return svg ? svg.cloneNode(true) : null
+        }
+        if (source && typeof source.cloneNode === 'function') {
+          return source.cloneNode(true)
+        }
+        return null
+      }
+
+      const clone = getClonedSvg()
+      if (!clone) return
+      if (initViewBox && initViewBox.length === 4) {
+        clone.setAttribute('viewBox', initViewBox.join(' '))
+      }
+      if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      if (!clone.getAttribute('xmlns:xlink') && clone.innerHTML.includes('xlink:')) {
+        clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
+      }
+      // inject background to match current theme
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
+      const bg = getComputedStyle(document.body).backgroundColor || (isDark ? '#1e1e1e' : '#ffffff')
+      if (!clone.style.background) clone.style.background = bg
+
+      const serializer = new XMLSerializer()
+      const svgSource = serializer.serializeToString(clone)
+      const htmlSource = `<!doctype html><html><head><meta charset="utf-8" />
+        <style>
+          html, body { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background: ${bg}; }
+          svg { max-width: 100%; max-height: 100%; height: auto; width: auto; }
+        </style>
+        </head><body>${svgSource}</body></html>`
+      const blob = new Blob([htmlSource], { type: 'text/html;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      window.open(url, '_blank', 'noopener')
+
+      setTimeout(() => URL.revokeObjectURL(url), 5000)
+    }
+
+    const attachMermaidViewerButton = wrap => {
+      let btn = wrap.querySelector('.mermaid-open-btn')
+      if (!btn) {
+        btn = document.createElement('button')
+        btn.type = 'button'
+        btn.className = 'mermaid-open-btn'
+        wrap.appendChild(btn)
+      }
+
+      btn.innerHTML = '<i class="fa fa-search fa-fw" aria-hidden="true"></i>'
+
+      if (!btn.__mermaidViewerBound) {
+        btn.addEventListener('click', e => {
+          e.preventDefault()
+          e.stopPropagation()
+          const svg = wrap.__mermaidOriginalSvg || wrap.querySelector('svg')
+          if (!svg) return
+          const initViewBox = wrap.__mermaidInitViewBox
+          openSvgInNewTab({ source: svg, initViewBox })
+        })
+        btn.__mermaidViewerBound = true
+      }
+    }
+
+    // Zoom around a point (px, py) in the SVG viewport (in viewBox coordinates)
+    const zoomAtPoint = (vb, factor, px, py) => {
+      const w = vb[2] * factor
+      const h = vb[3] * factor
+      const nx = px - (px - vb[0]) * factor
+      const ny = py - (py - vb[1]) * factor
+      return [nx, ny, w, h]
+    }
+
+    const initMermaidGestures = wrap => {
+      // Clean up previous event listeners and pending frames
+      if (wrap.__mermaidAbortController) {
+        wrap.__mermaidAbortController.abort()
+        if (wrap.__mermaidRafId) cancelAnimationFrame(wrap.__mermaidRafId)
+      }
+      const ac = new AbortController()
+      wrap.__mermaidAbortController = ac
+      const svg = wrap.querySelector('svg')
+      if (!svg) return
+
+      // Ensure viewBox exists so gestures always work
+      const initVb = getSvgViewBox(svg)
+      wrap.__mermaidInitViewBox = initVb
+      wrap.__mermaidCurViewBox = initVb.slice()
+      setSvgViewBox(svg, initVb)
+      // Disable default gestures to prevent scroll chaining and pinch-zoom penetration in Chrome
+      svg.style.touchAction = 'none'
+
+      // Cache BoundingClientRect, throttled on scroll to reduce reflow
+      let cachedRect = svg.getBoundingClientRect()
+      let rectDirty = false
+      const markRectDirty = () => { rectDirty = true }
+      window.addEventListener('resize', markRectDirty, { signal: ac.signal })
+      window.addEventListener('scroll', markRectDirty, { signal: ac.signal, capture: true })
+      const getRect = () => {
+        if (rectDirty) {
+          cachedRect = svg.getBoundingClientRect()
+          rectDirty = false
+        }
+        return cachedRect
+      }
+
+      // Precompute clamp bounds from initial viewBox
+      const minW = initVb[2] * 0.1
+      const maxW = initVb[2] * 10
+      const minH = initVb[3] * 0.1
+      const maxH = initVb[3] * 10
+      const clampVb = vb => {
+        const out = vb.slice()
+        out[2] = clamp(out[2], minW, maxW)
+        out[3] = clamp(out[3], minH, maxH)
+        return out
+      }
+
+      // Throttle DOM updates using requestAnimationFrame
+      let pendingVb = null
+      let rafId = null
+      const applyVb = () => {
+        if (pendingVb) {
+          wrap.__mermaidCurViewBox = pendingVb
+          setSvgViewBox(svg, pendingVb)
+          pendingVb = null
+        }
+        rafId = null
+        wrap.__mermaidRafId = null
+      }
+      const setCurVb = vb => {
+        pendingVb = clampVb(vb)
+        if (!rafId) {
+          rafId = requestAnimationFrame(applyVb)
+          wrap.__mermaidRafId = rafId
+        }
+      }
+
+      const state = {
+        pointers: new Map(),
+        startVb: null,
+        startDist: 0,
+        lastPointerX: 0,
+        lastPointerY: 0
+      }
+
+      const onPointerDown = e => {
+        if (e.pointerType === 'mouse' && e.button !== 0) return
+        svg.setPointerCapture(e.pointerId)
+        const curVb = wrap.__mermaidCurViewBox
+        state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+        if (state.pointers.size === 1) {
+          state.startVb = curVb.slice()
+          state.lastPointerX = e.clientX
+          state.lastPointerY = e.clientY
+        } else if (state.pointers.size === 2) {
+          const pts = [...state.pointers.values()]
+          const dx = pts[0].x - pts[1].x
+          const dy = pts[0].y - pts[1].y
+          state.startDist = Math.hypot(dx, dy)
+          state.startVb = curVb.slice()
+        }
+      }
+
+      const onPointerMove = e => {
+        if (!state.pointers.has(e.pointerId)) return
+        state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+        const curVb = wrap.__mermaidCurViewBox
+        const rect = getRect()
+        if (state.pointers.size === 1 && state.startVb) {
+          const p = state.pointers.values().next().value
+          const dxClient = p.x - state.lastPointerX
+          const dyClient = p.y - state.lastPointerY
+          state.lastPointerX = p.x
+          state.lastPointerY = p.y
+          const dx = dxClient * (curVb[2] / rect.width)
+          const dy = dyClient * (curVb[3] / rect.height)
+          setCurVb([curVb[0] - dx, curVb[1] - dy, curVb[2], curVb[3]])
+          return
+        }
+        if (state.pointers.size === 2 && state.startVb && state.startDist > 0) {
+          const pts = [...state.pointers.values()]
+          const dx = pts[0].x - pts[1].x
+          const dy = pts[0].y - pts[1].y
+          const dist = Math.hypot(dx, dy)
+          if (!dist) return
+          const factor = state.startDist / dist
+          const cx = (pts[0].x + pts[1].x) / 2
+          const cy = (pts[0].y + pts[1].y) / 2
+          const px = curVb[0] + (cx - rect.left) * (curVb[2] / rect.width)
+          const py = curVb[1] + (cy - rect.top) * (curVb[3] / rect.height)
+          setCurVb(zoomAtPoint(state.startVb, factor, px, py))
+        }
+      }
+
+      const onPointerUpOrCancel = e => {
+        // Release PointerCapture to avoid event capture anomalies
+        if (svg.hasPointerCapture && svg.hasPointerCapture(e.pointerId)) {
+          svg.releasePointerCapture(e.pointerId)
+        }
+        state.pointers.delete(e.pointerId)
+        if (state.pointers.size === 0) {
+          state.startVb = null
+          state.startDist = 0
+        } else if (state.pointers.size === 1) {
+          const p = state.pointers.values().next().value
+          state.lastPointerX = p.x
+          state.lastPointerY = p.y
+        }
+      }
+
+      const onWheel = e => {
+        // Prevent event bubbling from triggering external scroll
+        e.preventDefault()
+        e.stopPropagation()
+        // Normalize deltaY across deltaMode (Chrome uses pixels, Safari uses lines)
+        let delta = e.deltaY
+        if (e.deltaMode === 1) delta *= 16
+        else if (e.deltaMode === 2) delta *= 400
+
+        // Continuous zoom factor: smoother than fixed 1.1/0.9 steps
+        const zoomFactor = Math.pow(1.001, delta)
+
+        const curVb = wrap.__mermaidCurViewBox
+        const rect = getRect()
+        const px = curVb[0] + (e.clientX - rect.left) * (curVb[2] / rect.width)
+        const py = curVb[1] + (e.clientY - rect.top) * (curVb[3] / rect.height)
+        setCurVb(zoomAtPoint(curVb, zoomFactor, px, py))
+      }
+
+      const onDblClick = () => {
+        const init = wrap.__mermaidInitViewBox
+        if (init) setCurVb(init)
+      }
+
+      svg.addEventListener('pointerdown', onPointerDown, { signal: ac.signal })
+      svg.addEventListener('pointermove', onPointerMove, { signal: ac.signal })
+      svg.addEventListener('pointerup', onPointerUpOrCancel, { signal: ac.signal })
+      svg.addEventListener('pointercancel', onPointerUpOrCancel, { signal: ac.signal })
+      svg.addEventListener('wheel', onWheel, { passive: false, signal: ac.signal })
+      svg.addEventListener('dblclick', onDblClick, { signal: ac.signal })
+    }
+
     const runMermaid = ele => {
       window.loadMermaid = true
       const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
-
       ele.forEach((item, index) => {
         const mermaidSrc = item.firstElementChild
-        const mermaidThemeConfig = `%%{init:{ 'theme':'${theme}'}}%%\n`
+        // Clean up event listeners before removing old SVG
+        if (item.__mermaidAbortController) {
+          item.__mermaidAbortController.abort()
+        }
+        const oldSvg = item.querySelector('svg')
+        if (oldSvg) oldSvg.remove()
+        let config = {}
+        try {
+          config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {}
+        } catch (e) {
+          console.warn('[mermaid] failed to parse dataset.config:', e)
+        }
+        if (!config.theme) {
+          config.theme = theme
+        }
+        const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n`
         const mermaidID = `mermaid-${index}`
         const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
 
-        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
         const renderMermaid = svg => {
           mermaidSrc.insertAdjacentHTML('afterend', svg)
+          if (!{theme.mermaid.zoom_pan}) initMermaidGestures(item)
+          item.__mermaidOriginalSvg = svg
+          if (!{theme.mermaid.open_in_new_tab}) attachMermaidViewerButton(item)
         }
 
+        const handleError = err => {
+          console.error(`[mermaid] render failed for block #${index}:`, err)
+          const errorEl = document.createElement('div')
+          errorEl.className = 'mermaid-error'
+          errorEl.textContent = `Mermaid render error: ${err.message || err}`
+          mermaidSrc.insertAdjacentElement('afterend', errorEl)
+        }
+
+        try {
+          const renderFn = mermaid.render(mermaidID, mermaidDefinition)
           // mermaid v9 and v10 compatibility
-        typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
+          if (typeof renderFn === 'string') {
+            renderMermaid(renderFn)
+          } else {
+            renderFn.then(({ svg }) => renderMermaid(svg)).catch(handleError)
+          }
+        } catch (err) {
+          handleError(err)
+        }
       })
     }
 
-    const codeToMermaid = () => {
-      const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
+    const codeToMermaid = $article => {
+      const codeMermaidEle = $article.querySelectorAll('pre > code.mermaid')
       if (codeMermaidEle.length === 0) return
 
       codeMermaidEle.forEach(ele => {
@@ -37,8 +347,11 @@ script.
     }
 
     const loadMermaid = () => {
-      if (!{theme.mermaid.code_write}) codeToMermaid()
-      const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
+      const $article = document.getElementById('article-container')
+      if (!$article) return
+
+      if (!{theme.mermaid.code_write}) codeToMermaid($article)
+      const $mermaid = $article.querySelectorAll('.mermaid-wrap')
       if ($mermaid.length === 0) return
 
       const runMermaidFn = () => runMermaid($mermaid)

layout/includes/third-party/pjax.pug

@@ -1,4 +1,4 @@
-- var pjaxExclude = 'a:not([target="_blank"])'
+- var pjaxExclude = 'a:not([target="_blank"]):not([data-fancybox])'
 if theme.pjax.exclude
   each val in theme.pjax.exclude
     - pjaxExclude += `:not([href="${val}"])`
@@ -14,9 +14,9 @@ if choose
     else
       - pjaxSelectors.unshift('meta[name="description"]')
 
-script(src=url_for(theme.asset.pjax))
+script(src=url_for(theme.asset.pjax) defer)
 script.
-  (() => {
+  document.addEventListener('DOMContentLoaded', () => {
     const pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
 
     window.pjax = new Pjax({
@@ -53,8 +53,9 @@ script.
     document.addEventListener('pjax:complete', () => {
       btf.removeGlobalFnEvent('pjaxCompleteOnce')
       document.querySelectorAll('script[data-pjax]').forEach(item => {
+        if (!item.parentNode) return
         const newScript = document.createElement('script')
-        const content = item.text || item.textContent || item.innerHTML || ""
+        const content = item.text || item.textContent || ''
         Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
         newScript.appendChild(document.createTextNode(content))
         item.parentNode.replaceChild(newScript, item)
@@ -64,11 +65,13 @@ script.
     })
 
     document.addEventListener('pjax:error', e => {
-      if (e.request.status === 404) {
-        const usePjax = !{theme.pjax && theme.pjax.enable}
+      const responseURL = e.request && e.request.responseURL
+      if (e.request && e.request.status === 404) {
         !{theme.error_404 && theme.error_404.enable}
-          ? (usePjax ? pjax.loadUrl('!{url_for("/404.html")}') : window.location.href = '!{url_for("/404.html")}')
-          : window.location.href = e.request.responseURL
+          ? pjax.loadUrl('!{url_for("/404.html")}')
+          : responseURL && (window.location.href = responseURL)
+      } else if (responseURL) {
+        window.location.href = responseURL
       }
     })
-  })()
+  })

layout/includes/third-party/prismjs.pug

@@ -5,11 +5,15 @@
 if (syntax_highlighter === 'prismjs' || enable) && !preprocess
   script.
     (() => {
+      const $article = document.getElementById('article-container')
+      if (!$article || $article.querySelector('.hbe-container')) return
+
       window.Prism = window.Prism || {}
       window.Prism.manual = true
 
       const highlightAll = () => {
-        window.Prism.highlightAll()
+        // window.Prism.highlightAll()
+        window.Prism.highlightAllUnder($article, true)
       }
 
       window.addEventListener('load', highlightAll)
@@ -17,7 +21,7 @@ if (syntax_highlighter === 'prismjs' || enable) && !preprocess
       btf.addGlobalFn('encrypt', highlightAll, 'prismjs')
     })()
 
-  script(src=url_for(prismjs_js))
-  script(src=url_for(prismjs_autoloader))
+  script(src=url_for(prismjs_js) defer)
+  script(src=url_for(prismjs_autoloader) defer)
   if (line_number)
-    script(src=url_for(prismjs_lineNumber_js))
+    script(src=url_for(prismjs_lineNumber_js) defer)

layout/includes/third-party/subtitle.pug

@@ -1,5 +1,5 @@
 - const { effect, source, sub, typed_option } = theme.subtitle
-- let subContent = sub || new Array()
+- let subContent = typeof sub === 'string' ? [sub] : (sub || new Array())
 
 script.
   window.typedJSFn = {
@@ -44,7 +44,7 @@ script.
       }
     }
   }
-  btf.addGlobalFn('pjaxSendOnce', () => { typed.destroy() }, 'typedDestroy')
+  btf.addGlobalFn('pjaxSendOnce', () => { typed && typed.destroy() }, 'typedDestroy')
 
 case source
   when 1
@@ -53,8 +53,8 @@ case source
         fetch('https://v1.hitokoto.cn')
           .then(response => response.json())
           .then(data => {
-            const from = '出自 ' + data.from
-            typedJSFn.processSubtitle(data.hitokoto, [from])
+            const from = data.from ? '出自 ' + data.from : ''
+            typedJSFn.processSubtitle(data.hitokoto, from ? [from] : [])
           })
           .catch(err => {
             console.error('Failed to get the Hitokoto API:', err)
@@ -79,7 +79,7 @@ case source
           })
           .catch(err => {
             console.error('Failed to get the Yiyan API:', err)
-            typedJSFn.processSubtitle(!{JSON.stringify(subContent.length)})
+            typedJSFn.processSubtitle(!{JSON.stringify(subContent)})
           })
       }
       typedJSFn.run(subtitleType)
@@ -99,7 +99,7 @@ case source
           })
           .catch(err => {
             console.error('Failed to get the Jinrishici API:', err)
-            typedJSFn.processSubtitle(!{JSON.stringify(subContent.length)})
+            typedJSFn.processSubtitle(!{JSON.stringify(subContent)})
           })
       }
       typedJSFn.run(subtitleType)

layout/includes/third-party/umami_analytics.pug

@@ -28,21 +28,20 @@ script.
       })
     }
 
+    const extractValue = stat => (stat && typeof stat.value !== 'undefined') ? stat.value : stat
+
     const getData = async (isPost) => {
       try {
         const now = Date.now()
-        const keyUrl = isPost ? `&url=${window.location.pathname}` : ''
-        const headerList = { 'Accept': 'application/json' }
-
-        if (!{isServerURL}) {
-          headerList['Authorization'] = `Bearer ${config.token}`
-        } else {
-          headerList['x-umami-api-key'] = config.token
+        const pathQuery = isPost ? `&url=${window.location.pathname}&path=${window.location.pathname}` : ''
+        const headers = {
+          'Accept': 'application/json',
+          [!{isServerURL} ? 'Authorization' : 'x-umami-api-key']: !{isServerURL} ? `Bearer ${config.token}` : config.token
         }
 
-        const res = await fetch(`!{apiUrl}/websites/!{website_id}/stats?startAt=0000000000&endAt=${now}${keyUrl}`, {
-          method: "GET",
-          headers: headerList
+        const res = await fetch(`!{apiUrl}/websites/!{website_id}/stats?startAt=0000000000&endAt=${now}${pathQuery}`, {
+          method: 'GET',
+          headers
         })
 
         if (!res.ok) {
@@ -58,25 +57,30 @@ script.
 
     const insertData = async () => {
       try {
+        const tasks = []
+
         if (GLOBAL_CONFIG_SITE.pageType === 'post' && config.page_pv) {
+          tasks.push((async () => {
             const pagePV = document.getElementById('umamiPV')
             if (pagePV) {
               const data = await getData(true)
-            if (data && data.pageviews && typeof data.pageviews.value !== 'undefined') {
-              pagePV.textContent = data.pageviews.value
+              if (data && data.pageviews) {
+                pagePV.textContent = extractValue(data.pageviews)
               } else {
                 console.warn('Umami Analytics: Invalid page view data received')
               }
             }
+          })())
         }
 
         if (config.site_uv || config.site_pv) {
+          tasks.push((async () => {
             const data = await getData(false)
 
             if (config.site_uv) {
               const siteUV = document.getElementById('umami-site-uv')
-            if (siteUV && data && data.visitors && typeof data.visitors.value !== 'undefined') {
-              siteUV.textContent = data.visitors.value
+              if (siteUV && data && data.visitors) {
+                siteUV.textContent = extractValue(data.visitors)
               } else if (siteUV) {
                 console.warn('Umami Analytics: Invalid site UV data received')
               }
@@ -84,13 +88,16 @@ script.
 
             if (config.site_pv) {
               const sitePV = document.getElementById('umami-site-pv')
-            if (sitePV && data && data.pageviews && typeof data.pageviews.value !== 'undefined') {
-              sitePV.textContent = data.pageviews.value
+              if (sitePV && data && data.pageviews) {
+                sitePV.textContent = extractValue(data.pageviews)
               } else if (sitePV) {
                 console.warn('Umami Analytics: Invalid site PV data received')
               }
             }
+          })())
         }
+
+        await Promise.all(tasks)
       } catch (error) {
         console.error('Umami Analytics: Failed to insert data', error)
       }
@@ -99,7 +106,6 @@ script.
     btf.addGlobalFn('pjaxComplete', runTrack, 'umami_analytics_run_track')
     btf.addGlobalFn('pjaxComplete', insertData, 'umami_analytics_insert')
 
-
     loadUmamiJS()
 
     if (document.readyState === 'loading') {

layout/includes/widget/card_tags.pug

@@ -5,10 +5,10 @@ if theme.aside.card_tags.enable
         i.fas.fa-tags
         span= _p('aside.card_tags')
 
-      - let { limit, orderby, order } = theme.aside.card_tags
+      - let { limit, orderby, order, custom_colors } = theme.aside.card_tags
       - limit = limit === 0 ? 0 : limit || 40
 
       if theme.aside.card_tags.color
-        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: limit, unit: 'em', page: 'index'})
+        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: limit, unit: 'em', page: 'index', custom_colors: custom_colors})
       else
         .card-tag-cloud!= tagcloud({orderby: orderby, order: order, min_font: 1.1, max_font: 1.5, amount: limit, color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.5.1",
+  "version": "5.6.1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -25,8 +25,8 @@
   "dependencies": {
     "hexo-renderer-pug": "^3.0.0",
     "hexo-renderer-stylus": "^3.0.1",
-    "hexo-util": "^3.3.0",
-    "moment-timezone": "^0.6.0"
+    "hexo-util": "^4.0.0",
+    "moment-timezone": "^0.6.2"
   },
   "homepage": "https://butterfly.js.org/",
   "author": "Jerry <my@crazywong.com>",

plugins.yml

@@ -1,7 +1,7 @@
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.5.2
+  version: 6.6.4
 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.39.0
+  version: 5.56.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,35 +57,35 @@ 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.6.3
 docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 4.1.0
+  version: 4.6.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.0.33
+  version: 6.1.14
   other_name: fancyapps-ui
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 6.0.33
+  version: 6.1.14
   other_name: fancyapps-ui
 fireworks:
   name: butterfly-extsrc
@@ -95,7 +95,7 @@ fontawesome:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 7.1.0
+  version: 7.3.1
 gitalk:
   name: gitalk
   file: dist/gitalk.min.js
@@ -112,12 +112,12 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.22
+  version: 0.17.0
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.22
+  version: 0.17.0
 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.3
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
@@ -133,7 +133,7 @@ medium_zoom:
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 11.12.0
+  version: 11.16.0
 meting_js:
   name: butterfly-extsrc
   file: metingjs/dist/Meting.min.js
@@ -186,11 +186,11 @@ snackbar_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.44
+  version: 1.7.14
 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
@@ -199,9 +199,9 @@ waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 3.6.0
+  version: 3.15.2
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 3.6.0
+  version: 3.15.2

scripts/common/default_config.js

@@ -179,6 +179,7 @@ module.exports = {
       enable: true,
       limit: 40,
       color: false,
+      custom_colors: null,
       orderby: 'random',
       order: 1,
       sort_order: null
@@ -393,6 +394,9 @@ module.exports = {
   crisp: {
     website_id: null
   },
+  knocket: {
+    identifier: null
+  },
   google_tag_manager: {
     tag_id: null,
     domain: 'https://www.googletagmanager.com'
@@ -522,7 +526,9 @@ module.exports = {
     theme: {
       light: 'default',
       dark: 'dark'
-    }
+    },
+    open_in_new_tab: true,
+    zoom_pan: true
   },
   chartjs: {
     enable: false,

scripts/events/cdn.js

@@ -46,45 +46,43 @@ hexo.extend.filter.register('before_generate', () => {
   }
 
   const createCDNLink = (data, type, cond = '') => {
-    Object.keys(data).forEach(key => {
-      let { name, version, file, other_name } = data[key]
-      const cdnjs_name = other_name || name
-      const cdnjs_file = file.replace(/^[lib|dist]*\/|browser\//g, '')
-      const min_cdnjs_file = minFile(cdnjs_file)
+    return Object.keys(data).reduce((result, key) => {
+      let { name, version, file, other_name: otherName } = data[key]
+      const cdnjsName = otherName || name
+      const cdnjsFile = file.replace(/^[lib|dist]*\/|browser\//g, '')
+      const minCdnjsFile = minFile(cdnjsFile)
       if (cond === 'internal') file = `source/${file}`
-      const min_file = minFile(file)
+      const minFilePath = minFile(file)
       const verType = CDN.version ? (type === 'local' ? `?v=${version}` : `@${version}`) : ''
 
       const value = {
         version,
         name,
         file,
-        cdnjs_file,
-        min_file,
-        min_cdnjs_file,
-        cdnjs_name
+        cdnjs_file: cdnjsFile,
+        min_file: minFilePath,
+        min_cdnjs_file: minCdnjsFile,
+        cdnjs_name: cdnjsName
       }
 
       const cdnSource = {
-        local: cond === 'internal' ? `${cdnjs_file + verType}` : `/pluginsSrc/${name}/${file + verType}`,
-        jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
+        local: cond === 'internal' ? `${cdnjsFile + verType}` : `/pluginsSrc/${name}/${file + verType}`,
+        jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${minFilePath}`,
         unpkg: `https://unpkg.com/${name}${verType}/${file}`,
-        cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
+        cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjsName}/${version}/${minCdnjsFile}`,
         custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
       }
 
-      data[key] = cdnSource[type]
-    })
-
-    if (cond === 'internal') data.main_css = 'css/index.css' + (CDN.version ? `?v=${version}` : '')
-    return data
+      result[key] = cdnSource[type]
+      return result
+    }, cond === 'internal' ? { main_css: 'css/index.css' + (CDN.version ? `?v=${version}` : '') } : {})
   }
 
   // delete null value
   const deleteNullValue = obj => {
-    if (!obj) return
+    if (!obj) return {}
     for (const i in obj) {
-      obj[i] === null && delete obj[i]
+      if (obj[i] === null) delete obj[i]
     }
     return obj
   }

scripts/events/init.js

@@ -17,7 +17,7 @@ function checkHexoEnvironment (hexo) {
   if (major < requiredMajor || (major === requiredMajor && minor < requiredMinor)) {
     log.error('Please update Hexo to V5.3.0 or higher!')
     log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
-    process.exit(-1)
+    throw new Error('Hexo version too old')
   }
 
   // Check for deprecated configuration file
@@ -26,7 +26,7 @@ function checkHexoEnvironment (hexo) {
     if (data && data.butterfly) {
       log.error("'butterfly.yml' is deprecated. Please use '_config.butterfly.yml'")
       log.error("'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml'")
-      process.exit(-1)
+      throw new Error('Deprecated configuration file')
     }
   }
 }

scripts/filters/post_lazyload.js

@@ -21,7 +21,7 @@ const lazyload = htmlContent => {
   // Handle src attributes with double quotes, single quotes, or no quotes (unified approach)
   // Matches: src="..." or src='...' or src=... (e.g., after minification by hexo-minify)
   return htmlContent.replace(/(<img(?![^>]*?\bdata-lazy-src=)(?:\s[^>]*?)?\ssrc=)(?:"([^"]*)"|'([^']*)'|([^\s>]+))(?![^<]*<\/script>)/gi, (match, prefix, srcDoubleQuote, srcSingleQuote, srcNoQuote) => {
-    const src = srcDoubleQuote || srcSingleQuote || srcNoQuote
+    const src = srcDoubleQuote ?? srcSingleQuote ?? srcNoQuote
     return `${prefix}"${bg}" data-lazy-src="${src}"`
   })
 }

scripts/filters/random_cover.js

@@ -5,78 +5,105 @@
 'use strict'
 
 hexo.extend.generator.register('post', locals => {
-  const previousIndexes = []
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/i
+  const remoteImgReg = /^(?:https?:)?\/\//i
+  const dataImgReg = /^data:image\//i
 
-  const getRandomCover = defaultCover => {
-    if (!defaultCover) return false
-    if (!Array.isArray(defaultCover)) return defaultCover
+  const { post_asset_folder: postAssetFolder } = hexo.config
+  const { cover: { default_cover: defaultCover } } = hexo.theme.config
+
+  const isImage = value => {
+    return typeof value === 'string' &&
+      (remoteImgReg.test(value) || dataImgReg.test(value) || imgTestReg.test(value))
+  }
+
+  function * createCoverGenerator () {
+    if (!defaultCover || (Array.isArray(defaultCover) && defaultCover.length === 0)) {
+      while (true) yield false
+    }
+
+    if (!Array.isArray(defaultCover)) {
+      while (true) yield defaultCover
+    }
+
+    if (defaultCover.length === 1) {
+      while (true) yield defaultCover[0]
+    }
 
     const coverCount = defaultCover.length
+    const maxHistory = Math.min(3, coverCount - 1)
+    const history = []
 
-    if (coverCount === 1) {
-      return defaultCover[0]
-    }
-
-    const maxPreviousIndexes = coverCount === 2 ? 1 : (coverCount === 3 ? 2 : 3)
-
+    while (true) {
       let index
+
       do {
         index = Math.floor(Math.random() * coverCount)
-    } while (previousIndexes.includes(index) && previousIndexes.length < coverCount)
+      } while (history.includes(index))
 
-    previousIndexes.push(index)
-    if (previousIndexes.length > maxPreviousIndexes) {
-      previousIndexes.shift()
+      history.push(index)
+
+      if (history.length > maxHistory) {
+        history.shift()
       }
 
-    return defaultCover[index]
+      yield defaultCover[index]
+    }
+  }
+
+  const coverGenerator = createCoverGenerator()
+
+  const resolvePostAsset = (value, postPath) => {
+    if (
+      !postAssetFolder ||
+      typeof value !== 'string' ||
+      value.includes('/') ||
+      !imgTestReg.test(value)
+    ) {
+      return value
+    }
+
+    return `${postPath}${value}`
   }
 
   const handleImg = data => {
-    const imgTestReg = /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/i
-    let { cover: coverVal, top_img: topImg } = data
+    data.top_img = resolvePostAsset(data.top_img, data.path)
+    data.cover = resolvePostAsset(data.cover, data.path)
+    data.pagination_cover = resolvePostAsset(data.pagination_cover, data.path)
 
-    // Add path to top_img and cover if post_asset_folder is enabled
-    if (hexo.config.post_asset_folder) {
-      if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) {
-        data.top_img = `${data.path}${topImg}`
-      }
-      if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) {
-        data.cover = `${data.path}${coverVal}`
-      }
+    if (data.cover === false) return data
+
+    if (!data.cover) {
+      data.cover = coverGenerator.next().value
     }
 
-    if (coverVal === false) return data
-
-    // If cover is not set, use random cover
-    if (!coverVal) {
-      const { cover: { default_cover: defaultCover } } = hexo.theme.config
-      const randomCover = getRandomCover(defaultCover)
-      data.cover = randomCover
-      coverVal = randomCover // update coverVal
-    }
-
-    if (coverVal && (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal))) {
+    if (isImage(data.cover)) {
       data.cover_type = 'img'
     }
 
     return data
   }
 
-  // https://github.com/hexojs/hexo/blob/master/lib%2Fplugins%2Fgenerator%2Fpost.ts
   const posts = locals.posts.sort('date').toArray()
   const { length } = posts
 
-  return posts.map((post, i) => {
-    if (i) post.prev = posts[i - 1]
-    if (i < length - 1) post.next = posts[i + 1]
+  return posts.map((post, index) => {
+    const data = post
 
-    post.__post = true
+    if (index > 0) {
+      data.prev = posts[index - 1]
+    }
+
+    if (index < length - 1) {
+      data.next = posts[index + 1]
+    }
+
+    data.__post = true
 
     return {
-      data: handleImg(post),
+      data: handleImg(data),
       layout: 'post',
-      path: post.path
+      path: data.path
     }
   })
 })

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
@@ -17,56 +17,43 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
   // Optimize locale handling
   const lang = toMomentLocale(page.lang || page.language || language)
 
-  // Memoize comparison function to improve performance
-  const compareFunc =
-    type === 'monthly'
-      ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
-      : (yearA, yearB) => yearA === yearB
-
   // Early return if no posts
   if (!site.posts.length) return ''
 
-  // Use reduce for more efficient data processing
-  const data = site.posts.sort('date', order).reduce((acc, post) => {
-    let date = post.date.clone()
-    if (timezone) date = date.tz(timezone)
-
+  const archives = new Map()
+  site.posts.forEach(post => {
+    const date = post.date
     const year = date.year()
     const month = date.month() + 1
+    const key = type === 'yearly' ? year : `${year}-${month}`
 
+    if (archives.has(key)) {
+      archives.get(key).count++
+    } else {
+      archives.set(key, {
+        year,
+        month,
+        count: 1,
+        date // Store date object for later formatting
+      })
+    }
+  })
+
+  const data = Array.from(archives.values()).sort((a, b) => {
+    if (order === -1) {
+      return b.year - a.year || b.month - a.month
+    }
+    return a.year - b.year || a.month - b.month
+  })
+
+  // Format names after aggregation
+  data.forEach(item => {
+    let date = item.date.clone()
+    if (timezone) date = date.tz(timezone)
     if (lang) date = date.locale(lang)
-
-    // Find or create archive entry
-    const lastEntry = acc[acc.length - 1]
-
-    if (type === 'yearly') {
-      const existingYearIndex = acc.findIndex(entry => entry.year === year)
-      if (existingYearIndex !== -1) {
-        acc[existingYearIndex].count++
-      } else {
-        // 否則創建新條目
-        acc.push({
-          name: date.format(format),
-          year,
-          month,
-          count: 1
+    item.name = date.format(format)
+    delete item.date // Clean up
   })
-      }
-    } else {
-      if (!lastEntry || !compareFunc(lastEntry.year, lastEntry.month, year, month)) {
-        acc.push({
-          name: date.format(format),
-          year,
-          month,
-          count: 1
-        })
-      } else {
-        lastEntry.count++
-      }
-    }
-
-    return acc
-  }, [])
 
   // Create link generator function
   const createArchiveLink = item => {
@@ -74,7 +61,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 +74,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/aside_categories.js

@@ -19,15 +19,33 @@ hexo.extend.helper.register('aside_categories', function (categories, options =
   const expandClass = isExpand && options.expand === true ? 'expand' : ''
   const buttonLabel = this._p('aside.more_button')
 
-  const prepareQuery = parent => {
-    const query = parent ? { parent } : { parent: { $exists: false } }
-    return categories.find(query).sort(orderby, order).filter(cat => cat.length)
+  const categoryMap = new Map()
+  categories.forEach(cat => {
+    if (cat.length) {
+      const parentId = cat.parent || 'root'
+      if (!categoryMap.has(parentId)) {
+        categoryMap.set(parentId, [])
+      }
+      categoryMap.get(parentId).push(cat)
+    }
+  })
+
+  const sortFn = (a, b) => {
+    const valA = a[orderby]
+    const valB = b[orderby]
+    if (valA < valB) return -order
+    if (valA > valB) return order
+    return 0
   }
 
-  const hierarchicalList = (remaining, level = 0, parent) => {
+  for (const list of categoryMap.values()) {
+    list.sort(sortFn)
+  }
+
+  const hierarchicalList = (remaining, level = 0, parentId = 'root') => {
     let result = ''
-    if (remaining > 0) {
-      prepareQuery(parent).forEach(cat => {
+    if (remaining > 0 && categoryMap.has(parentId)) {
+      categoryMap.get(parentId).forEach(cat => {
         if (remaining > 0) {
           remaining -= 1
           let child = ''
@@ -37,7 +55,8 @@ hexo.extend.helper.register('aside_categories', function (categories, options =
             remaining = childList.remaining
           }
 
-          const parentClass = isExpand && !parent && child ? 'parent' : ''
+          const isTopLevel = parentId === 'root'
+          const parentClass = isExpand && isTopLevel && child ? 'parent' : ''
           result += `<li class="card-category-list-item ${parentClass}">`
           result += `<a class="card-category-list-link" href="${this.url_for(cat.path)}">`
           result += `<span class="card-category-list-name">${cat.name}</span>`
@@ -46,7 +65,7 @@ hexo.extend.helper.register('aside_categories', function (categories, options =
             result += `<span class="card-category-list-count">${cat.length}</span>`
           }
 
-          if (isExpand && !parent && child) {
+          if (isExpand && isTopLevel && child) {
             result += `<i class="fas fa-caret-left ${expandClass}"></i>`
           }
 

scripts/helpers/getArchiveLength.js

@@ -8,36 +8,36 @@ hexo.extend.helper.register('getArchiveLength', function () {
   // Archives Page
   if (!year) return posts.length
 
-  // Function to generate a unique key based on the granularity
-  const getKey = (post, type) => {
-    const date = post.date.clone()
-    const y = date.year()
-    const m = date.month() + 1
-    const d = date.date()
-    if (type === 'year') return `${y}`
-    if (type === 'month') return `${y}-${m}`
-    if (type === 'day') return `${y}-${m}-${d}`
-  }
-
   // Create a map to count posts per period
   const mapData = this.fragment_cache('createArchiveObj', () => {
     const map = new Map()
     posts.forEach(post => {
-      const keyYear = getKey(post, 'year')
-      const keyMonth = getKey(post, 'month')
-      const keyDay = getKey(post, 'day')
+      const date = post.date
+      const y = date.year()
+      const m = date.month() + 1
+      const d = date.date()
 
-      if (yearly) map.set(keyYear, (map.get(keyYear) || 0) + 1)
-      if (monthly) map.set(keyMonth, (map.get(keyMonth) || 0) + 1)
-      if (daily) map.set(keyDay, (map.get(keyDay) || 0) + 1)
+      // Always track year so year archive pages can be counted
+      const keyYear = `${y}`
+      map.set(keyYear, (map.get(keyYear) || 0) + 1)
+
+      if (monthly || daily) {
+        const keyMonth = `${y}-${m}`
+        map.set(keyMonth, (map.get(keyMonth) || 0) + 1)
+      }
+
+      if (daily) {
+        const keyDay = `${y}-${m}-${d}`
+        map.set(keyDay, (map.get(keyDay) || 0) + 1)
+      }
     })
     return map
   })
 
   // Determine the appropriate key to fetch based on current page context
   let key
-  if (yearly && year) key = `${year}`
-  if (monthly && month) key = `${year}-${month}`
+  if (yearly || monthly || daily) key = `${year}`
+  if ((monthly || daily) && month) key = `${year}-${month}`
   if (daily && day) key = `${year}-${month}-${day}`
 
   // Return the count for the current period or default to the total posts

scripts/helpers/inject_head_js.js

@@ -4,53 +4,94 @@ 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 = {
       set: (key, value, ttl) => {
-        if (!ttl) return
-        const expiry = Date.now() + ttl * 86400000
-        localStorage.setItem(key, JSON.stringify({ value, expiry }))
+        const data = { value }
+
+        if (ttl != null) {
+          data.expiry = Date.now() + ttl * 86400000
+        }
+
+        localStorage.setItem(key, JSON.stringify(data))
       },
       get: key => {
         const itemStr = localStorage.getItem(key)
-        if (!itemStr) return undefined
-        const { value, expiry } = JSON.parse(itemStr)
-        if (Date.now() > expiry) {
+        if (!itemStr) return
+
+        try {
+          const data = JSON.parse(itemStr)
+
+          if (data.expiry && Date.now() > data.expiry) {
+            localStorage.removeItem(key)
+            return
+          }
+
+          return data.value
+        } catch {
           localStorage.removeItem(key)
-          return undefined
         }
-        return value
       }
     }
 
+    const scriptCache = new Map()
+    const cssCache = new Map()
     window.btf = {
       saveToLocal,
-      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
+      getScript: (url, attr = {}) => {
+        if (scriptCache.has(url)) {
+          return scriptCache.get(url)
+        }
+
+        const promise = new Promise((resolve, reject) => {
           const script = document.createElement('script')
+
           script.src = url
           script.async = true
-        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
-        script.onload = script.onreadystatechange = () => {
-          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
+
+          for (const key in attr) {
+            script.setAttribute(key, attr[key])
           }
+
+          script.onload = resolve
           script.onerror = reject
+
           document.head.appendChild(script)
-      }),
-      getCSS: (url, id) => new Promise((resolve, reject) => {
+        })
+
+        scriptCache.set(url, promise)
+
+        return promise
+      },
+      getCSS: (url, id) => {
+        if (cssCache.has(url)) {
+          return cssCache.get(url)
+        }
+
+        const promise = new Promise((resolve, reject) => {
           const link = document.createElement('link')
+
           link.rel = 'stylesheet'
           link.href = url
-        if (id) link.id = id
-        link.onload = link.onreadystatechange = () => {
-          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
+
+          if (id) {
+            link.id = id
           }
+
+          link.onload = resolve
           link.onerror = reject
+
           document.head.appendChild(link)
-      }),
+        })
+
+        cssCache.set(url, promise)
+
+        return promise
+      },
       addGlobalFn: (key, fn, name = false, parent = window) => {
         if (!${pjax.enable} && key.startsWith('pjax')) return
         const globalFn = parent.globalFn || {}
@@ -65,16 +106,17 @@ hexo.extend.helper.register('inject_head_js', function () {
     if (!darkmode.enable) return ''
 
     let darkmodeJs = `
+      const metaThemeColor = document.querySelector('meta[name="theme-color"]')
       const activateDarkMode = () => {
-        document.documentElement.setAttribute('data-theme', 'dark')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorDark}')
+        document.documentElement.dataset.theme = 'dark'
+        if (metaThemeColor !== null) {
+          metaThemeColor.setAttribute('content', '${themeColorDark}')
         }
       }
       const activateLightMode = () => {
-        document.documentElement.setAttribute('data-theme', 'light')
-        if (document.querySelector('meta[name="theme-color"]') !== null) {
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorLight}')
+        document.documentElement.dataset.theme = 'light'
+        if (metaThemeColor !== null) {
+          metaThemeColor.setAttribute('content', '${themeColorLight}')
         }
       }
 
@@ -95,10 +137,15 @@ hexo.extend.helper.register('inject_head_js', function () {
             else if (mediaQueryDark.matches) activateDarkMode()
             else {
               const hour = new Date().getHours()
-              const isNight = hour <= ${start} || hour >= ${end}
+              const start = ${start}
+              const end = ${end}
+              const isNight =
+                start < end
+                    ? hour < start || hour >= end
+                    : hour >= start || hour < end
               isNight ? activateDarkMode() : activateLightMode()
             }
-            mediaQueryDark.addEventListener('change', () => {
+            mediaQueryDark.addEventListener('change', e => {
               if (saveToLocal.get('theme') === undefined) {
                 e.matches ? activateDarkMode() : activateLightMode()
               }
@@ -111,7 +158,12 @@ hexo.extend.helper.register('inject_head_js', function () {
       case 2:
         darkmodeJs += `
           const hour = new Date().getHours()
-          const isNight = hour <= ${start} || hour >= ${end}
+          const start = ${start}
+          const end = ${end}
+          const isNight =
+            start < end
+                ? hour < start || hour >= end
+                : hour >= start || hour < end
           if (theme === undefined) isNight ? activateDarkMode() : activateLightMode()
           else theme === 'light' ? activateLightMode() : activateDarkMode()
         `

scripts/helpers/page.js

@@ -5,6 +5,14 @@ const { prettyUrls } = require('hexo-util')
 const crypto = require('crypto')
 const moment = require('moment-timezone')
 
+const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
+const relativeUrlPattern = /^(\.\/|\.\.\/|\/|[^/]+\/).*$/
+const colorPattern = /^(#|rgb|rgba|hsl|hsla)/i
+const simpleFilePattern = /\.(png|jpg|jpeg|gif|bmp|webp|svg|tiff)$/i
+const archiveRegex = /\/archives\//
+
+const { version: themeVersion } = require('../../package.json')
+
 hexo.extend.helper.register('truncate', truncateContent)
 
 hexo.extend.helper.register('postDesc', data => {
@@ -13,39 +21,64 @@ hexo.extend.helper.register('postDesc', data => {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order, page = 'tags' } = options
+  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order, page = 'tags', custom_colors } = options
 
   if (limit > 0) {
     source = source.limit(limit)
   }
 
   const sizes = [...new Set(source.map(tag => tag.length).sort((a, b) => a - b))]
+  const sizeMap = new Map(sizes.map((size, index) => [size, index]))
+  const length = sizes.length - 1
 
   const getRandomColor = () => {
-    const randomColor = () => Math.floor(Math.random() * 201)
-    const r = randomColor()
-    const g = randomColor()
-    const b = randomColor()
+    const r = Math.floor(Math.random() * 201)
+    const g = Math.floor(Math.random() * 201)
+    const b = Math.floor(Math.random() * 201)
     return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
   }
 
-  const generateStyle = (size, unit, page) => {
-    if (page === 'tags') {
-      return `font-size: ${parseFloat(size.toFixed(2)) + unit}; background-color: ${getRandomColor()};`
-    } else {
-      return `font-size: ${parseFloat(size.toFixed(2)) + unit}; color: ${getRandomColor()};`
+  const normalizeColors = input => {
+    if (!input) return null
+    if (typeof input === 'string') {
+      const color = input.trim()
+      return color ? [color] : null
     }
+    if (Array.isArray(input)) {
+      const result = []
+      for (let i = 0; i < input.length; i++) {
+        const value = input[i]
+        if (value === null || value === undefined) continue
+        const color = String(value).trim()
+        if (!color) continue
+        result.push(color)
+      }
+      return result.length ? result : null
+    }
+    return null
   }
 
-  const length = sizes.length - 1
-  const result = source.sort(orderby, order).map(tag => {
-    const ratio = length ? sizes.indexOf(tag.length) / length : 0
+  const userColors = normalizeColors(custom_colors)
+
+  const generateStyle = (size, unit, page, color) => {
+    const colorStyle = page === 'tags' ? `background-color: ${color};` : `color: ${color};`
+    return `font-size: ${parseFloat(size.toFixed(2))}${unit}; ${colorStyle}`
+  }
+
+  return source.sort(orderby, order).map((tag, idx) => {
+    const ratio = length ? sizeMap.get(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
-    const style = generateStyle(size, unit, page)
+
+    if (userColors && userColors.length) {
+      const color = userColors[idx % userColors.length]
+      const style = generateStyle(size, unit, page, color)
+      return `<a href="${env.url_for(tag.path)}" class="tag-cloud-item" style="${style}">${tag.name}</a>`
+    }
+
+    const color = getRandomColor()
+    const style = generateStyle(size, unit, page, color)
     return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
   }).join('')
-
-  return result
 })
 
 hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = false) {
@@ -71,13 +104,13 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   if (!menu) return defaultTitle
 
   const loop = m => {
-    for (const key in m) {
-      if (typeof m[key] === 'object') {
-        const result = loop(m[key])
+    for (const [key, value] of Object.entries(m)) {
+      if (value && typeof value === 'object') {
+        const result = loop(value)
         if (result) return result
       }
 
-      if (/\/archives\//.test(m[key])) {
+      if (typeof value === 'string' && archiveRegex.test(value)) {
         return key
       }
     }
@@ -89,13 +122,9 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
 hexo.extend.helper.register('getBgPath', function (path) {
   if (!path) return ''
 
-  const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
-  const relativeUrlPattern = /^(\.\/|\.\.\/|\/|[^/]+\/).*$/
-  const colorPattern = /^(#|rgb|rgba|hsl|hsla)/i
-
   if (colorPattern.test(path)) {
     return `background-color: ${path};`
-  } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path)) {
+  } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path) || simpleFilePattern.test(path)) {
     return `background-image: url(${this.url_for(path)});`
   } else {
     return `background: ${path};`
@@ -104,39 +133,35 @@ hexo.extend.helper.register('getBgPath', function (path) {
 
 hexo.extend.helper.register('shuoshuoFN', (data, page) => {
   const { limit } = page
-  let finalResult = ''
+
+  // Shallow copy to avoid mutating original data
+  let processedData = data.map(item => ({ ...item }))
 
   // Check if limit.value is a valid date
   const isValidDate = date => !isNaN(Date.parse(date))
 
   // order by date
-  const orderByDate = data => data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
+  processedData.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
 
   // Apply number limit or time limit conditionally
-  const limitData = data => {
   if (limit && limit.type === 'num' && limit.value > 0) {
-      return data.slice(0, limit.value)
+    processedData = processedData.slice(0, limit.value)
   } else if (limit && limit.type === 'date' && isValidDate(limit.value)) {
     const limitDate = Date.parse(limit.value)
-      return data.filter(item => Date.parse(item.date) >= limitDate)
+    processedData = processedData.filter(item => Date.parse(item.date) >= limitDate)
   }
 
-    return data
-  }
-
-  orderByDate(data)
-  finalResult = limitData(data)
-
   // This is a hack method, because hexo treats time as UTC time
   // so you need to manually convert the time zone
-  finalResult.forEach(item => {
-    const utcDate = moment.utc(item.date).format('YYYY-MM-DD HH:mm:ss')
-    item.date = moment.tz(utcDate, hexo.config.timezone).format('YYYY-MM-DD HH:mm:ss')
+  const timezone = hexo.config.timezone
+  processedData.forEach(item => {
+    const parsed = moment.utc(item.date)
+    item.date = moment.tz(parsed.format('YYYY-MM-DD HH:mm:ss'), timezone).format('YYYY-MM-DD HH:mm:ss')
     // markdown
     item.content = hexo.render.renderSync({ text: item.content, engine: 'markdown' })
   })
 
-  return finalResult
+  return processedData
 })
 
 hexo.extend.helper.register('getPageType', (page, isHome) => {
@@ -146,7 +171,7 @@ hexo.extend.helper.register('getPageType', (page, isHome) => {
   if (category) return 'category'
   if (archive) return 'archive'
   if (type) {
-    if (type === 'tags' || type === 'categories') return type
+    if (type === 'tags' || type === 'categories' || type === '404') return type
     else return 'page'
   }
   if (isHome) return 'home'
@@ -154,8 +179,7 @@ hexo.extend.helper.register('getPageType', (page, isHome) => {
 })
 
 hexo.extend.helper.register('getVersion', () => {
-  const { version } = require('../../package.json')
-  return { hexo: hexo.version, theme: version }
+  return { hexo: hexo.version, theme: themeVersion }
 })
 
 hexo.extend.helper.register('safeJSON', data => {

scripts/helpers/related_post.js

@@ -9,14 +9,21 @@
 
 const { postDesc } = require('../common/postDesc')
 
-hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-  let relatedPosts = []
+hexo.extend.helper.register('related_posts', function (currentPost) {
+  const relatedPosts = new Map()
   const tagsData = currentPost.tags
-  tagsData.length && tagsData.forEach(function (tag) {
-    allPosts.forEach(function (post) {
-      if (currentPost.path !== post.path && isTagRelated(tag.name, post.tags)) {
-        const getPostDesc = post.postDesc || postDesc(post, hexo)
-        const relatedPost = {
+
+  if (!tagsData || !tagsData.length) return ''
+
+  tagsData.forEach(tag => {
+    const posts = tag.posts
+    posts.forEach(post => {
+      if (currentPost.path === post.path) return
+
+      if (relatedPosts.has(post.path)) {
+        relatedPosts.get(post.path).weight += 1
+      } else {
+        relatedPosts.set(post.path, {
           title: post.title,
           path: post.path,
           cover: post.cover,
@@ -24,22 +31,17 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           weight: 1,
           updated: post.updated,
           created: post.date,
-          postDesc: getPostDesc
-        }
-        const index = findItem(relatedPosts, 'path', post.path)
-        if (index !== -1) {
-          relatedPosts[index].weight += 1
-        } else {
-          relatedPosts.push(relatedPost)
-        }
+          post,
+          random: Math.random()
+        })
       }
     })
   })
 
-  if (relatedPosts.length === 0) {
+  if (relatedPosts.size === 0) {
     return ''
   }
-  let result = ''
+
   const hexoConfig = hexo.config
   const config = hexo.theme.config
 
@@ -47,19 +49,26 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
   const dateType = config.related_post.date_type || 'created'
   const headlineLang = this._p('post.recommend')
 
-  relatedPosts = relatedPosts.sort(compare('weight'))
+  const relatedPostsList = Array.from(relatedPosts.values()).sort((a, b) => {
+    if (b.weight !== a.weight) {
+      return b.weight - a.weight
+    }
+    return b.random - a.random
+  })
 
-  if (relatedPosts.length > 0) {
-    result += '<div class="relatedPosts">'
+  let result = '<div class="relatedPosts">'
   result += `<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>${headlineLang}</span></div>`
   result += '<div class="relatedPosts-list">'
 
-    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      let { cover, title, path, cover_type, created, updated, postDesc } = relatedPosts[i]
+  const max = Math.min(relatedPostsList.length, limitNum)
+  for (let i = 0; i < max; i++) {
+    const item = relatedPostsList[i]
+    let { cover, title, path, cover_type, created, updated, post } = item
     const { escape_html, url_for, date } = this
     cover = cover || 'var(--default-bg-color)'
     title = escape_html(title)
-      const className = postDesc ? 'pagination-related' : 'pagination-related no-desc'
+    const desc = post.postDesc || postDesc(post, hexo)
+    const className = desc ? 'pagination-related' : 'pagination-related no-desc'
     result += `<a class="${className}" href="${url_for(path)}" title="${title}">`
     if (cover_type === 'img') {
       result += `<img class="cover" src="${url_for(cover)}" alt="cover">`
@@ -73,25 +82,12 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
     }
     result += `<div class="info-item-2">${title}</div></div>`
 
-      if (postDesc) {
-        result += `<div class="info-2"><div class="info-item-1">${postDesc}</div></div>`
+    if (desc) {
+      result += `<div class="info-2"><div class="info-item-1">${desc}</div></div>`
     }
     result += '</div></a>'
   }
 
   result += '</div></div>'
   return result
-  }
 })
-
-function isTagRelated (tagName, tags) {
-  return tags.some(tag => tag.name === tagName)
-}
-
-function findItem (arrayToSearch, attr, val) {
-  return arrayToSearch.findIndex(item => item[attr] === val)
-}
-
-function compare (attr) {
-  return (a, b) => b[attr] - a[attr]
-}

scripts/helpers/series.js

@@ -1,22 +1,24 @@
 'use strict'
 
+// Read pre-built groups from tag/series.js (hexo._seriesGroups)
+// and sort each group according to the sidebar card config.
 hexo.extend.helper.register('groupPosts', function () {
-  const getGroupArray = array => {
-    return array.reduce((groups, item) => {
-      const key = item.series
-      if (key) {
-        groups[key] = groups[key] || []
-        groups[key].push(item)
-      }
-      return groups
-    }, {})
-  }
-
-  const sortPosts = posts => {
+  const groups = hexo._seriesGroups || {}
   const { orderBy = 'date', order = 1 } = this.theme.aside.card_post_series
-    if (orderBy === 'title') return posts.sort('title', order)
-    return posts.sort('date', order)
-  }
 
-  return getGroupArray(sortPosts(this.site.posts))
+  const result = {}
+  Object.keys(groups).forEach(key => {
+    const arr = groups[key].slice() // copy to avoid mutating the shared data
+    if (orderBy === 'title') {
+      arr.sort((a, b) => {
+        const cmp = a.title.toUpperCase().localeCompare(b.title.toUpperCase())
+        return order === 1 ? cmp : -cmp
+      })
+    } else {
+      arr.sort((a, b) => order === 1 ? a.date - b.date : b.date - a.date)
+    }
+    result[key] = arr
+  })
+
+  return result
 })

scripts/tag/button.js

@@ -7,15 +7,16 @@
 
 'use strict'
 
-const urlFor = require('hexo-util').url_for.bind(hexo)
+const { url_for, escapeHTML } = require('hexo-util')
+const urlFor = url_for.bind(hexo)
 
 const btn = args => {
   const [url = '', text = '', icon = '', option = ''] = args.join(' ').split(',').map(arg => arg.trim())
 
-  const iconHTML = icon ? `<i class="${icon}"></i>` : ''
-  const textHTML = text ? `<span>${text}</span>` : ''
+  const iconHTML = icon ? `<i class="${escapeHTML(icon)}"></i>` : ''
+  const textHTML = text ? `<span>${escapeHTML(text)}</span>` : ''
 
-  return `<a class="btn-beautify ${option}" href="${urlFor(url)}" title="${text}">${iconHTML}${textHTML}</a>`
+  return `<a class="btn-beautify ${escapeHTML(option)}" href="${urlFor(url)}" title="${escapeHTML(text)}">${iconHTML}${textHTML}</a>`
 }
 
 hexo.extend.tag.register('btn', btn, { ends: false })

scripts/tag/flink.js

@@ -4,24 +4,25 @@
 
 'use strict'
 
-const urlFor = require('hexo-util').url_for.bind(hexo)
+const { url_for, escapeHTML } = require('hexo-util')
+const urlFor = url_for.bind(hexo)
 
 const flinkFn = (args, content) => {
   const data = hexo.render.renderSync({ text: content, engine: 'yaml' })
   let result = ''
 
   data.forEach(item => {
-    const className = item.class_name ? `<div class="flink-name">${item.class_name}</div>` : ''
-    const classDesc = item.class_desc ? `<div class="flink-desc">${item.class_desc}</div>` : ''
+    const className = item.class_name ? `<div class="flink-name">${escapeHTML(item.class_name)}</div>` : ''
+    const classDesc = item.class_desc ? `<div class="flink-desc">${escapeHTML(item.class_desc)}</div>` : ''
 
     const listResult = item.link_list.map(link => `
       <div class="flink-list-item">
-        <a href="${link.link}" title="${link.name}" target="_blank">
+        <a href="${escapeHTML(link.link)}" title="${escapeHTML(link.name)}" target="_blank">
           <div class="flink-item-icon">
-            <img class="no-lightbox" src="${link.avatar}" onerror='this.onerror=null;this.src="${urlFor(hexo.theme.config.error_img.flink)}"' alt="${link.name}" />
+            <img class="no-lightbox" src="${escapeHTML(link.avatar)}" onerror='this.onerror=null;this.src="${urlFor(hexo.theme.config.error_img.flink)}"' alt="${escapeHTML(link.name)}" />
           </div>
-          <div class="flink-item-name">${link.name}</div>
-          <div class="flink-item-desc" title="${link.descr}">${link.descr}</div>
+          <div class="flink-item-name">${escapeHTML(link.name)}</div>
+          <div class="flink-item-desc" title="${escapeHTML(link.descr)}">${escapeHTML(link.descr)}</div>
         </a>
       </div>`).join('')
 

scripts/tag/gallery.js

@@ -27,6 +27,7 @@ const parseGalleryArgs = args => {
 const parseImageContent = content => {
   const images = []
   let match
+  IMAGE_REGEX.lastIndex = 0
 
   while ((match = IMAGE_REGEX.exec(content)) !== null) {
     images.push({

scripts/tag/hide.js

@@ -16,7 +16,7 @@
 
 'use strict'
 
-const parseArgs = args => args.join(' ').split(',')
+const parseArgs = args => args.join(' ').split(',').map(s => s.trim())
 
 const generateStyle = (bg, color) => {
   let style = 'style="'

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

scripts/tag/score.js

@@ -5,20 +5,10 @@
 
 'use strict'
 
+const { escapeHTML } = require('hexo-util')
+
 const score = (args, content) => {
-  // Escape HTML tags and some special characters, including curly braces
-  const escapeHtmlTags = s => {
-    const lookup = {
-      '&': '&',
-      '"': '"',
-      "'": ''',
-      '<': '&lt;',
-      '>': '&gt;',
-      '{': '&#123;',
-      '}': '&#125;'
-    }
-    return s.replace(/[&"'<>{}]/g, c => lookup[c])
-  }
+  const escapeHtmlTags = s => escapeHTML(s).replace(/[{}]/g, c => c === '{' ? '&#123;' : '&#125;')
 
   const trimmed = content.trim()
   // Split content using six dashes as a delimiter

scripts/tag/series.js

@@ -10,23 +10,42 @@
 'use strict'
 
 const urlFor = require('hexo-util').url_for.bind(hexo)
+
+// Iterate all posts once and group by series name.
+// Result is stored on hexo._seriesGroups, shared by both tag and helper.
+function buildSeriesGroups () {
   const groups = {}
-
-hexo.extend.filter.register('before_post_render', data => {
-  if (!hexo.theme.config.series.enable) return data
-
-  const { layout, series } = data
-  if (layout === 'post' && series) {
-    if (!groups[series]) groups[series] = []
-    groups[series].push({
-      title: data.title,
-      path: data.path,
-      date: data.date.unix()
+  const posts = hexo.model('Post').toArray()
+  for (let i = 0, len = posts.length; i < len; i++) {
+    const p = posts[i]
+    if (p.series) {
+      if (!groups[p.series]) groups[p.series] = []
+      groups[p.series].push({
+        title: p.title,
+        path: p.path,
+        date: p.date.unix()
       })
     }
+  }
+  return groups
+}
+
+// Build once before the first render (hexo generate / hexo server initial load).
+// before_generate runs after tag rendering, so we need this as a fallback.
+hexo.extend.filter.register('before_post_render', data => {
+  if (!hexo.theme.config.series.enable) return data
+  if (!hexo._seriesGroups) {
+    hexo._seriesGroups = buildSeriesGroups()
+  }
   return data
 })
 
+// Rebuild after each generate cycle in hexo server to reflect latest post data.
+hexo.extend.filter.register('before_generate', () => {
+  if (!hexo.theme.config.series.enable) return
+  hexo._seriesGroups = buildSeriesGroups()
+})
+
 function series (args) {
   const { series } = hexo.theme.config
   if (!series.enable) {
@@ -34,24 +53,30 @@ function series (args) {
     return ''
   }
 
-  const seriesArr = args.length ? groups[args[0]] : groups[this.series]
+  const groupName = args.length ? args[0] : this.series
 
-  if (!seriesArr) {
-    hexo.log.warn(`There is no series named "${args[0]}"`)
+  if (!groupName) {
+    hexo.log.warn('No series specified')
     return ''
   }
 
-  const isAsc = (series.order || 1) === 1 // 1: asc, -1: desc
-  const isSortByTitle = series.orderBy === 'title'
+  const groups = hexo._seriesGroups || {}
+  const source = groups[groupName]
 
-  const compareFn = (a, b) => {
-    const itemA = isSortByTitle ? a.title.toUpperCase() : a.date
-    const itemB = isSortByTitle ? b.title.toUpperCase() : b.date
-
-    return itemA < itemB ? (isAsc ? -1 : 1) : itemA > itemB ? (isAsc ? 1 : -1) : 0
+  if (!source || !source.length) {
+    hexo.log.warn(`There is no series named "${groupName}"`)
+    return ''
   }
 
-  seriesArr.sort(compareFn)
+  const isAsc = (series.order || 1) === 1
+  const isSortByTitle = series.orderBy === 'title'
+
+  // .slice() to copy before sorting, so we don't mutate the shared data
+  const seriesArr = source.slice().sort((a, b) => {
+    const itemA = isSortByTitle ? a.title.toUpperCase() : a.date
+    const itemB = isSortByTitle ? b.title.toUpperCase() : b.date
+    return itemA < itemB ? (isAsc ? -1 : 1) : itemA > itemB ? (isAsc ? 1 : -1) : 0
+  })
 
   const listItems = seriesArr.map(ele =>
     `<li><a href="${urlFor(ele.path)}" title="${ele.title}">${ele.title}</a></li>`

source/css/_global/function.styl

@@ -159,7 +159,7 @@ if hexo-config('enter_transitions')
     animation: titleScale 1s
 
   canvas:not(#ribbon-canvas),
-  #web_bg
+  #web_bg.bg-animation
     animation: to_show 4s
 
   #ribbon-canvas

source/css/_highlight/highlight.styl

@@ -24,6 +24,14 @@ wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blo
   --hlscrollbar-bg: lighten(#121212, 5)
   --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
 
+$scrollbar-style
+  // scrollbar - firefox
+  @-moz-document url-prefix()
+    scrollbar-color: var(--hlscrollbar-bg) transparent
+
+  &::-webkit-scrollbar-thumb
+    background: var(--hlscrollbar-bg)
+
 if $highlight_enable
   @require 'highlight/index'
 
@@ -88,6 +96,11 @@ $code-block
         &:hover
           border-bottom-color: var(--hl-color)
 
+    &.default
+      pre
+        padding: 10px 20px
+        @extend $scrollbar-style
+
     &.copy-true
       user-select: all
       -webkit-user-select: all
@@ -100,18 +113,23 @@ $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
+      display: inline-flex
+      justify-content: center
+      align-items: center
+      padding: 5px
       cursor: pointer
       transition: all .3s
 
@@ -127,31 +145,28 @@ $code-block
 
     if !$highlight_macstyle
       & > .macStyle
-        padding: 0
+        margin: 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,17 +178,28 @@ $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)
 
       .highlight-tools
         .macStyle
           display: flex
+          padding: 3px
 
           & > *
             margin-right: 8px
@@ -264,8 +290,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/css/_highlight/highlight/diff.styl

@@ -1,11 +1,6 @@
 figure.highlight
   table
-    // scrollbar - firefox
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
+    @extend $scrollbar-style
 
   pre .deletion
     color: $highlight-deletion

source/css/_highlight/prismjs/index.styl

@@ -6,12 +6,7 @@ if $highlight_theme != false
 
 .container
   pre[class*='language-']
-    // scrollbar - firefox
-    @-moz-document url-prefix()
-      scrollbar-color: var(--hlscrollbar-bg) transparent
-
-    &::-webkit-scrollbar-thumb
-      background: var(--hlscrollbar-bg)
+    @extend $scrollbar-style
 
     &:not(.line-numbers)
       padding: 10px 20px

source/css/_layout/head.styl

@@ -37,6 +37,8 @@
     margin: 0
     color: var(--white)
     font-size: 1.85em
+    @extend .limit-more-line
+    -webkit-line-clamp: 3
 
     +minWidth768()
       font-size: 2.85em

source/css/_layout/pagination.styl

@@ -39,7 +39,7 @@
   .pagination
     & > *
       display: inline-block
-      margin: 0 6px
+      margin: 6px
       width: w = 2.5em
       height: w
       line-height: w

source/css/_layout/reward.styl

@@ -37,13 +37,13 @@
     display: none
     padding: 0 0 15px
     width: 100%
-    addBorderRadius()
 
     .reward-all
       display: inline-block
       margin: 0
       padding: 20px 10px
       background: var(--reward-pop)
+      addBorderRadius()
 
       &:before
         position: absolute

source/css/_layout/third-party.styl

@@ -65,12 +65,55 @@ if hexo-config('waline.bg')
 
 if hexo-config('mermaid.enable')
   .mermaid-wrap
+    position: relative
     margin: 0 0 20px
+    background: var(--card-bg)
     text-align: center
 
+    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
+
+        i
+          font-size: 16px
+          line-height: 1
+
+        &:hover,
+        &:focus-visible
+          outline: none
+          background: #C0C0C0
+          transform: translateY(-1px)
+
     & > svg
+      max-width: 100%
       height: 100%
 
+      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
       display: none
@@ -183,5 +226,6 @@ if hexo-config('math.use')
     opacity: 1
 
 +maxWidth768()
-  .fancybox__toolbar__column.is-middle
-    display: none
+  .fancybox__toolbar__column.is-middle,
+  .f-carousel__toolbar__column.is-middle
+    visibility: hidden

source/css/_mode/darkmode.styl

@@ -130,6 +130,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     // hide-tags
     .hide-button,
+    .toggle-button,
     #post-outdate-notice,
     .error-img,
     .container iframe,
@@ -140,9 +141,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
 
     img:not(.cover)
       if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
-        filter: blur(0) brightness(.8)
+        filter: blur(0) brightness(.88) contrast(.95)
       else
-        filter: brightness(.8)
+        filter: brightness(.88) contrast(.95)
 
     #aside-content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)

source/css/_mode/readmode.styl

@@ -42,6 +42,7 @@ if hexo-config('readmode')
       font-size: 16px
       transition: background .3s
       addBorderRadius(8)
+      @extend .btn-effects
 
       +maxWidth768()
         top: initial

source/css/_tags/hide.styl

@@ -39,11 +39,26 @@
   border: 1px solid $tag-hide-toggle-bg
   addBorderRadius(5, true)
 
+  & > .toggle-content
+    margin: 30px 24px
+
   & > .toggle-button
     padding: 6px 15px
     background: $tag-hide-toggle-bg
     color: #1F2D3D
+    list-style: none
     cursor: pointer
 
-  & > .toggle-content
-    margin: 30px 24px
+    &::-webkit-details-marker
+      display: none
+
+    &::before
+      @extend .fontawesomeIcon
+      margin-right: 8px
+      content: '\f0d7'
+      transition: transform .3s ease
+      transform: rotate(-90deg)
+      transform-origin: center center
+
+  &[open] summary::before
+    transform: rotate(0)

source/js/main.js

@@ -2,18 +2,25 @@ document.addEventListener('DOMContentLoaded', () => {
   let headerContentWidth, $nav
   let mobileSidebarOpen = false
 
+  // rightsideScrollPercent
+  let goUpElement = null
+  let scrollPercentElement = null
+
   const adjustMenu = init => {
-    const getAllWidth = ele => Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0)
+    let hideMenuIndex = false
 
     if (init) {
-      const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children)
-      const menusWidth = getAllWidth(document.getElementById('menus').children)
+      const blogInfoWidth = Array.from(document.querySelector('#blog-info > a').children).reduce((w, i) => w + i.offsetWidth, 0)
+      const menusWidth = Array.from(document.getElementById('menus').children).reduce((w, i) => w + i.offsetWidth, 0)
       headerContentWidth = blogInfoWidth + menusWidth
       $nav = document.getElementById('nav')
     }
 
-    const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120
+    hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120
+
+    requestAnimationFrame(() => {
       $nav.classList.toggle('hide-menu', hideMenuIndex)
+    })
   }
 
   // 初始化header
@@ -54,21 +61,24 @@ document.addEventListener('DOMContentLoaded', () => {
    * 代碼
    * 只適用於Hexo默認的代碼渲染
    */
-  const addHighlightTool = () => {
+  const addHighlightTool = $article => {
     const highLight = GLOBAL_CONFIG.highlight
     if (!highLight) return
 
     const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight
     const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
     const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle
-    const $figureHighlight = plugin === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+    const isNotHighlightJs = plugin !== 'highlight.js'
+    const isPrismjs = plugin === 'prismjs'
+    const $figureHighlight = isNotHighlightJs
+      ? Array.from($article.querySelectorAll('code[class*="language-"]')).map(code => code.parentElement)
+      : $article.querySelectorAll('figure.highlight')
 
     if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
 
-    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,9 +86,46 @@ 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
+
+        // X-axis boundary check
+        const halfWidth = newEle.offsetWidth / 2
+        const centerLeft = buttonRect.left + scrollLeft + buttonRect.width / 2
+        const finalLeft = Math.max(halfWidth + 10, Math.min(window.innerWidth - halfWidth - 10, centerLeft))
+
+        // Show tooltip below button if too close to top
+        const normalTop = buttonRect.top + scrollTop - 40
+        const shouldShowBelow = buttonRect.top < 60 || normalTop < 10
+
+        const topValue = shouldShowBelow ? buttonRect.top + scrollTop + buttonRect.height + 10 : normalTop
+
+        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)
       }
     }
 
@@ -96,10 +143,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const highlightCopyFn = (ele, clickEle) => {
       const $buttonParent = ele.parentNode
       $buttonParent.classList.add('copy-true')
-      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+      const preCodeSelector = isNotHighlightJs ? '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')
     }
 
@@ -126,33 +173,24 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 獲取隱藏狀態下元素的真實高度
     const getActualHeight = item => {
-      const hiddenElements = new Map()
+      if (item.offsetHeight > 0) return item.offsetHeight
 
-      const fix = () => {
-        let current = item
-        while (current !== document.body && current != null) {
-          if (window.getComputedStyle(current).display === 'none') {
-            hiddenElements.set(current, current.getAttribute('style') || '')
-          }
-          current = current.parentNode
-        }
+      const clone = item.cloneNode(true)
 
-        const style = 'visibility: hidden !important; display: block !important;'
-        hiddenElements.forEach((originalStyle, elem) => {
-          elem.setAttribute('style', originalStyle ? originalStyle + ';' + style : style)
-        })
-      }
+      clone.style.cssText = `
+        position: absolute !important;
+        visibility: hidden !important;
+        display: block !important;
+        left: 0 !important;
+        top: 0 !important;
+        pointer-events: none !important;
+        z-index: -1 !important;
+        margin: 0 !important;
+      `
 
-      const restore = () => {
-        hiddenElements.forEach((originalStyle, elem) => {
-          if (originalStyle === '') elem.removeAttribute('style')
-          else elem.setAttribute('style', originalStyle)
-        })
-      }
-
-      fix()
-      const height = item.offsetHeight
-      restore()
+      item.parentNode.insertBefore(clone, item)
+      const height = clone.offsetHeight
+      clone.remove()
       return height
     }
 
@@ -175,20 +213,23 @@ document.addEventListener('DOMContentLoaded', () => {
         fragment.appendChild(ele)
       }
 
-      isPrismjs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
+      isNotHighlightJs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild)
     }
 
     $figureHighlight.forEach(item => {
       let langName = ''
-      if (isPrismjs) btf.wrap(item, 'figure', { class: 'highlight' })
+      if (isNotHighlightJs) {
+        const newClassName = isPrismjs ? 'prismjs' : 'default'
+        btf.wrap(item, 'figure', { class: `highlight ${newClassName}` })
+      }
 
       if (!highlightLang) {
         createEle('', item)
         return
       }
 
-      if (isPrismjs) {
-        langName = item.getAttribute('data-language') || 'Code'
+      if (isNotHighlightJs) {
+        langName = isPrismjs ? item.getAttribute('data-language') || 'Code' : item.querySelector('code').getAttribute('class').replace('language-', '')
       } else {
         langName = item.getAttribute('class').split(' ')[1]
         if (langName === 'plain' || langName === undefined) langName = 'Code'
@@ -200,9 +241,9 @@ document.addEventListener('DOMContentLoaded', () => {
   /**
    * PhotoFigcaption
    */
-  const addPhotoFigcaption = () => {
+  const addPhotoFigcaption = $article => {
     if (!GLOBAL_CONFIG.isPhotoFigcaption) return
-    document.querySelectorAll('#article-container img').forEach(item => {
+    $article.querySelectorAll('img').forEach(item => {
       const altValue = item.title || item.alt
       if (!altValue) return
       const ele = document.createElement('div')
@@ -215,8 +256,8 @@ document.addEventListener('DOMContentLoaded', () => {
   /**
    * Lightbox
    */
-  const runLightbox = () => {
-    btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
+  const runLightbox = $article => {
+    btf.loadLightbox($article.querySelectorAll('img:not(.no-lightbox)'))
   }
 
   /**
@@ -226,18 +267,23 @@ document.addEventListener('DOMContentLoaded', () => {
   const fetchUrl = async url => {
     try {
       const response = await fetch(url)
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
       return await response.json()
     } catch (error) {
       console.error('Failed to fetch URL:', error)
-      return []
+      throw error
     }
   }
 
   const runJustifiedGallery = (container, data, config) => {
-    const { isButton, limit, firstLimit, tabs } = config
+    const { isButton, tabs } = config
+    const limit = Math.max(1, Number(config.limit) || 20)
+    const firstLimit = Math.max(1, Number(config.firstLimit) || limit)
 
     const dataLength = data.length
-    const maxGroupKey = Math.ceil((dataLength - firstLimit) / limit + 1)
+    const maxGroupKey = dataLength
+      ? Math.ceil(Math.max(0, dataLength - firstLimit) / limit) + 1
+      : 0
 
     // Gallery configuration
     const igConfig = {
@@ -254,13 +300,19 @@ document.addEventListener('DOMContentLoaded', () => {
     let isLayoutHidden = false
 
     // Utility functions
-    const sanitizeString = str => (str && str.replace(/"/g, '&quot;')) || ''
+    const sanitizeString = str => String(str ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
 
     const createImageItem = item => {
       const alt = item.alt ? `alt="${sanitizeString(item.alt)}"` : ''
       const title = item.title ? `title="${sanitizeString(item.title)}"` : ''
+      const url = item.url ? sanitizeString(item.url) : ''
       return `<div class="item">
-        <img src="${item.url}" data-grid-maintained-target="true" ${alt} ${title} />
+        <img src="${url}" data-grid-maintained-target="true" ${alt} ${title} />
       </div>`
     }
 
@@ -329,11 +381,13 @@ document.addEventListener('DOMContentLoaded', () => {
     btf.setLoading.add(container)
     ig.on('renderComplete', handleRenderComplete)
 
-    if (isButton) {
+    if (isButton && dataLength) {
       appendItems(1, firstLimit, true)
-    } else {
+    } else if (dataLength) {
       ig.on('requestAppend', handleRequestAppend)
       ig.renderItems()
+    } else {
+      btf.setLoading.remove(container)
     }
 
     btf.addGlobalFn('pjaxSendOnce', () => ig.destroy())
@@ -356,11 +410,11 @@ document.addEventListener('DOMContentLoaded', () => {
         const container = element.firstElementChild
         const content = container.textContent
         container.textContent = ''
-        element.classList.add('loaded')
-
         try {
           const data = element.getAttribute('data-type') === 'url' ? await fetchUrl(content) : JSON.parse(content)
+          if (!Array.isArray(data)) throw new TypeError('Gallery data must be an array')
           runJustifiedGallery(container, data, config)
+          element.classList.add('loaded')
         } catch (error) {
           console.error('Gallery data parsing failed:', error)
         }
@@ -380,11 +434,11 @@ document.addEventListener('DOMContentLoaded', () => {
    */
   const rightsideScrollPercent = currentTop => {
     const scrollPercent = btf.getScrollPercent(currentTop, document.body)
-    const goUpElement = document.getElementById('go-up')
 
+    if (!goUpElement || !scrollPercentElement) return
     if (scrollPercent < 95) {
       goUpElement.classList.add('show-percent')
-      goUpElement.querySelector('.scroll-percent').textContent = scrollPercent
+      scrollPercentElement.textContent = scrollPercent
     } else {
       goUpElement.classList.remove('show-percent')
     }
@@ -395,24 +449,20 @@ document.addEventListener('DOMContentLoaded', () => {
    */
   const scrollFn = () => {
     const $rightside = document.getElementById('rightside')
-    const innerHeight = window.innerHeight + 56
     let initTop = 0
     const $header = document.getElementById('page-header')
-    const isChatBtn = typeof chatBtn !== 'undefined'
+    const isChatBtn = typeof window.chatBtn !== 'undefined'
     const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     // 檢查文檔高度是否小於視窗高度
     const checkDocumentHeight = () => {
-      if (document.body.scrollHeight <= innerHeight) {
+      if (document.body.scrollHeight <= window.innerHeight + 56) {
         $rightside.classList.add('rightside-show')
         return true
       }
       return false
     }
 
-    // 如果文檔高度小於視窗高度,直接返回
-    if (checkDocumentHeight()) return
-
     // find the scroll direction
     const scrollDirection = currentTop => {
       const result = currentTop > initTop // true is down & false is up
@@ -421,7 +471,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     let flag = ''
-    const scrollTask = btf.throttle(() => {
+    const scrollTask = btf.rafThrottle(() => {
+      if (checkDocumentHeight()) return
+
       const currentTop = window.scrollY || document.documentElement.scrollTop
       const isDown = scrollDirection(currentTop)
       if (currentTop > 56) {
@@ -452,19 +504,18 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       isShowPercent && rightsideScrollPercent(currentTop)
-      checkDocumentHeight()
-    }, 300)
+    })
 
+    checkDocumentHeight()
     btf.addEventListenerPjax(window, 'scroll', scrollTask, { passive: true })
   }
 
   /**
   * toc, anchor
   */
-  const scrollFnToDo = () => {
+  const scrollFnToDo = $article => {
     const isToc = GLOBAL_CONFIG_SITE.isToc
     const isAnchor = GLOBAL_CONFIG.isAnchor
-    const $article = document.getElementById('article-container')
 
     if (!($article && (isToc || isAnchor))) return
 
@@ -477,7 +528,6 @@ document.addEventListener('DOMContentLoaded', () => {
       $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
       isExpand = $cardToc.classList.contains('is-expand')
 
-      // toc元素點擊
       const tocItemClickFn = e => {
         const target = e.target.closest('.toc-link')
         if (!target) return
@@ -504,82 +554,105 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       }
 
-      // 處理 hexo-blog-encrypt 事件
       $cardToc.style.display = 'block'
     }
 
-    // find head position & add active class
     const $articleList = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
-    let detectItem = ''
+    if (!$articleList.length) return
 
-    const findHeadPosition = top => {
-      if (top === 0) return false
+    let activeTocItem = null
+    let activeParentItems = []
 
-      let currentId = ''
-      let currentIndex = ''
+    const updateTocUI = currentId => {
+      const encodedAnchor = currentId ? '#' + encodeURI(decodeURI(currentId)) : ''
+      if (isAnchor) btf.updateAnchor(encodedAnchor)
 
-      for (let i = 0; i < $articleList.length; i++) {
-        const ele = $articleList[i]
-        if (top > btf.getEleTop(ele) - 80) {
-          const id = ele.id
-          currentId = id ? '#' + encodeURI(id) : ''
-          currentIndex = i
-        } else {
-          break
-        }
+      if (!isToc) return
+
+      if (activeTocItem) activeTocItem.classList.remove('active')
+      activeParentItems.forEach(i => i.classList.remove('active'))
+      activeParentItems = []
+
+      if (!currentId) {
+        activeTocItem = null
+        return
       }
 
-      if (detectItem === currentIndex) return
+      const targetLink = Array.from($tocLink).find(link => {
+        const href = link.getAttribute('href')
+        if (!href) return false
+        return decodeURI(href).replace('#', '') === decodeURI(currentId)
+      })
 
-      if (isAnchor) btf.updateAnchor(currentId)
+      if (!targetLink) return
 
-      detectItem = currentIndex
-
-      if (isToc) {
-        $cardToc.querySelectorAll('.active').forEach(i => i.classList.remove('active'))
-
-        if (currentId) {
-          const currentActive = $tocLink[currentIndex]
-          currentActive.classList.add('active')
-
-          setTimeout(() => autoScrollToc(currentActive), 0)
+      targetLink.classList.add('active')
+      activeTocItem = targetLink
+      setTimeout(() => autoScrollToc(targetLink), 0)
 
       if (!isExpand) {
-            let parent = currentActive.parentNode
+        let parent = targetLink.parentNode
         while (!parent.matches('.toc')) {
-              if (parent.matches('li')) parent.classList.add('active')
+          if (parent.matches('li')) {
+            parent.classList.add('active')
+            activeParentItems.push(parent)
+          }
           parent = parent.parentNode
         }
       }
     }
-      }
+
+    const observerOptions = {
+      root: null,
+      rootMargin: '-60px 0px -80% 0px',
+      threshold: 0
     }
 
-    // main of scroll
-    const tocScrollFn = btf.throttle(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          updateTocUI(entry.target.id)
+        }
+      })
+    }, observerOptions)
+
+    $articleList.forEach(ele => observer.observe(ele))
+
+    const scrollHandler = btf.rafThrottle(() => {
       const currentTop = window.scrollY || document.documentElement.scrollTop
+
       if (isToc && GLOBAL_CONFIG.percent.toc) {
         $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
       }
-      findHeadPosition(currentTop)
-    }, 100)
 
-    btf.addEventListenerPjax(window, 'scroll', tocScrollFn, { passive: true })
+      if (currentTop === 0) {
+        updateTocUI('')
+      } else if (currentTop + window.innerHeight >= document.documentElement.scrollHeight - 10) {
+        const lastHeader = $articleList[$articleList.length - 1]
+        updateTocUI(lastHeader.id)
+      }
+    })
+
+    btf.addEventListenerPjax(window, 'scroll', scrollHandler, { passive: true })
+
+    btf.addGlobalFn('pjaxSendOnce', () => {
+      observer.disconnect()
+    })
   }
 
   const handleThemeChange = mode => {
     const globalFn = window.globalFn || {}
-    const themeChange = globalFn.themeChange || {}
-    if (!themeChange) {
-      return
-    }
+    const themeChange = globalFn.themeChange
+    if (!themeChange) return
 
     Object.keys(themeChange).forEach(key => {
-      const themeChangeFn = themeChange[key]
+      const fn = themeChange[key]
+      if (typeof fn !== 'function') return
+
       if (['disqus', 'disqusjs'].includes(key)) {
-        setTimeout(() => themeChangeFn(mode), 300)
+        setTimeout(() => fn(mode), 300)
       } else {
-        themeChangeFn(mode)
+        fn(mode)
       }
     })
   }
@@ -600,7 +673,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
       $body.classList.add('read-mode')
       newEle.type = 'button'
-      newEle.className = 'fas fa-sign-out-alt exit-readmode'
+      newEle.className = 'exit-readmode'
+      newEle.innerHTML = '<i class="fas fa-sign-out-alt"></i>'
       newEle.addEventListener('click', exitReadMode)
       $body.appendChild(newEle)
     },
@@ -740,8 +814,8 @@ document.addEventListener('DOMContentLoaded', () => {
   /**
    * table overflow
    */
-  const addTableWrap = () => {
-    const $table = document.querySelectorAll('#article-container table')
+  const addTableWrap = $article => {
+    const $table = $article.querySelectorAll('table')
     if (!$table.length) return
 
     $table.forEach(item => {
@@ -751,52 +825,54 @@ document.addEventListener('DOMContentLoaded', () => {
     })
   }
 
-  /**
-   * tag-hide
-   */
-  const clickFnOfTagHide = () => {
-    const hideButtons = document.querySelectorAll('#article-container .hide-button')
+  const clickFnOfTagHide = $article => {
+    const hideButtons = $article.querySelectorAll('.hide-button')
     if (!hideButtons.length) return
-    hideButtons.forEach(item => item.addEventListener('click', e => {
-      const currentTarget = e.currentTarget
-      currentTarget.classList.add('open')
-      addJustifiedGallery(currentTarget.nextElementSibling.querySelectorAll('.gallery-container'))
-    }, { once: true }))
+
+    const handleClickOfTagHide = e => {
+      const button = e.target.closest('.hide-button')
+      if (!button) return
+      button.classList.add('open')
+      addJustifiedGallery(button.nextElementSibling.querySelectorAll('.gallery-container'))
     }
 
-  const tabsFn = () => {
-    const navTabsElements = document.querySelectorAll('#article-container .tabs')
-    if (!navTabsElements.length) return
+    btf.addEventListenerPjax($article, 'click', handleClickOfTagHide)
+  }
+
+  const tabsFn = $article => {
+    if (!$article.querySelector('.tabs')) return
 
     const setActiveClass = (elements, activeIndex) => {
-      elements.forEach((el, index) => {
-        el.classList.toggle('active', index === activeIndex)
-      })
+      elements.forEach((el, index) => el.classList.toggle('active', index === activeIndex))
     }
 
-    const handleNavClick = e => {
+    const handleClick = e => {
+      const tabsRoot = e.target.closest('.tabs')
+      if (!tabsRoot) return
+
+      const navContainer = tabsRoot.firstElementChild
+      const toTopContainer = tabsRoot.lastElementChild
+
+      if (navContainer.contains(e.target)) {
         const target = e.target.closest('button')
         if (!target || target.classList.contains('active')) return
 
-      const navItems = [...e.currentTarget.children]
-      const tabContents = [...e.currentTarget.nextElementSibling.children]
+        const navItems = [...navContainer.children]
+        const tabContents = [...navContainer.nextElementSibling.children]
         const indexOfButton = navItems.indexOf(target)
         setActiveClass(navItems, indexOfButton)
-      e.currentTarget.classList.remove('no-default')
+        navContainer.classList.remove('no-default')
         setActiveClass(tabContents, indexOfButton)
         addJustifiedGallery(tabContents[indexOfButton].querySelectorAll('.gallery-container'), true)
+        return
       }
 
-    const handleToTopClick = tabElement => e => {
-      if (e.target.closest('button')) {
-        btf.scrollToDest(btf.getEleTop(tabElement), 300)
+      if (toTopContainer.contains(e.target) && e.target.closest('button')) {
+        btf.scrollToDest(btf.getEleTop(tabsRoot), 300)
       }
     }
 
-    navTabsElements.forEach(tabElement => {
-      btf.addEventListenerPjax(tabElement.firstElementChild, 'click', handleNavClick)
-      btf.addEventListenerPjax(tabElement.lastElementChild, 'click', handleToTopClick(tabElement))
-    })
+    btf.addEventListenerPjax($article, 'click', handleClick)
   }
 
   const toggleCardCategory = () => {
@@ -862,10 +938,13 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   const unRefreshFn = () => {
-    window.addEventListener('resize', () => {
+    const resizeHandler = btf.rafThrottle(() => {
       adjustMenu(false)
-      mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close()
+      if (mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu'))) {
+        sidebarFn.close()
+      }
     })
+    window.addEventListener('resize', resizeHandler, { passive: true })
 
     const menuMask = document.getElementById('menu-mask')
     menuMask && menuMask.addEventListener('click', () => { sidebarFn.close() })
@@ -883,18 +962,24 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   const forPostFn = () => {
-    addHighlightTool()
-    addPhotoFigcaption()
-    addJustifiedGallery(document.querySelectorAll('#article-container .gallery-container'))
-    runLightbox()
-    scrollFnToDo()
-    addTableWrap()
-    clickFnOfTagHide()
-    tabsFn()
+    const $article = document.getElementById('article-container')
+    if (!$article || $article.querySelector('.hbe-container')) return
+
+    addHighlightTool($article)
+    addPhotoFigcaption($article)
+    addJustifiedGallery($article.querySelectorAll('.gallery-container'))
+    runLightbox($article)
+    scrollFnToDo($article)
+    addTableWrap($article)
+    clickFnOfTagHide($article)
+    tabsFn($article)
   }
 
   const refreshFn = () => {
     initAdjust()
+    goUpElement = document.getElementById('go-up')
+    scrollPercentElement = goUpElement?.querySelector('.scroll-percent')
+
     justifiedIndexPostUI()
 
     if (GLOBAL_CONFIG_SITE.pageType === 'post') {

source/js/search/algolia.js

@@ -6,8 +6,28 @@ window.addEventListener('load', () => {
     return console.error('Algolia setting is invalid!')
   }
 
+  const CONTENT_FIELDS = ['contentStripTruncate', 'contentStrip', 'content']
+  const HIGHLIGHT_PARAMS = {
+    highlightPreTag: '<mark>',
+    highlightPostTag: '</mark>',
+    attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
+  }
+
+  // Pre-compiled regex for tag balancing (reused across cutContent calls)
+  const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*\/?>/g
+
   const $searchMask = document.getElementById('search-mask')
   const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+  const $loadingStatus = document.getElementById('loading-status')
+  const $hits = document.getElementById('algolia-hits')
+  const $hitsEmpty = document.getElementById('algolia-hits-empty')
+  const $hitsList = document.querySelector('#algolia-hits .ais-Hits-list')
+  const $hitsWrapper = document.querySelector('#algolia-hits .ais-Hits')
+  const $pagination = document.getElementById('algolia-pagination')
+  const $paginationList = document.querySelector('#algolia-pagination .ais-Pagination-list')
+  const $stats = document.querySelector('#algolia-info .ais-Stats-text')
+  const $searchInput = document.querySelector('#algolia-search-input .ais-SearchBox-input')
+  const $searchForm = document.querySelector('#algolia-search-input .ais-SearchBox-form')
 
   const animateElements = show => {
     const action = show ? 'animateIn' : 'animateOut'
@@ -23,15 +43,12 @@ window.addEventListener('load', () => {
     }
   }
 
-  const openSearch = () => {
-    btf.overflowPaddingR.add()
-    animateElements(true)
-    showLoading(false)
-
-    setTimeout(() => {
-      const searchInput = document.querySelector('#algolia-search-input .ais-SearchBox-input')
-      if (searchInput) searchInput.focus()
-    }, 100)
+  // Debounced resize to avoid layout thrashing
+  let resizeTimer
+  const onResize = () => {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(fixSafariHeight, 150)
+  }
 
   const handleEscape = event => {
     if (event.code === 'Escape') {
@@ -40,15 +57,29 @@ window.addEventListener('load', () => {
     }
   }
 
+  const showLoading = show => {
+    if ($loadingStatus) $loadingStatus.hidden = !show
+  }
+
+  const openSearch = () => {
+    btf.overflowPaddingR.add()
+    animateElements(true)
+    showLoading(false)
+
+    setTimeout(() => {
+      if ($searchInput) $searchInput.focus()
+    }, 100)
+
     document.addEventListener('keydown', handleEscape)
     fixSafariHeight()
-    window.addEventListener('resize', fixSafariHeight)
+    window.addEventListener('resize', onResize)
   }
 
   const closeSearch = () => {
     btf.overflowPaddingR.remove()
     animateElements(false)
-    window.removeEventListener('resize', fixSafariHeight)
+    document.removeEventListener('keydown', handleEscape)
+    window.removeEventListener('resize', onResize)
   }
 
   const searchClickFn = () => {
@@ -60,37 +91,40 @@ window.addEventListener('load', () => {
     document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
   }
 
-  const cutContent = content => {
+  const extractContentStr = content => {
     if (!content) return ''
-
-    let contentStr = ''
-    if (typeof content === 'string') {
-      contentStr = content.trim()
-    } else if (typeof content === 'object') {
+    if (typeof content === 'string') return content.trim()
+    if (typeof content === 'object') {
       if (content.value !== undefined) {
-        contentStr = String(content.value).trim()
-        if (!contentStr) return ''
-      } else if (content.matchedWords || content.matchLevel || content.fullyHighlighted !== undefined) {
-        return ''
-      } else {
+        const str = String(content.value).trim()
+        return str || ''
+      }
+      if (content.matchedWords || content.matchLevel || content.fullyHighlighted !== undefined) return ''
       try {
-          contentStr = JSON.stringify(content).trim()
-          if (contentStr === '{}' || contentStr === '[]' || contentStr === '""') {
+        const str = JSON.stringify(content).trim()
+        return (str === '{}' || str === '[]' || str === '""') ? '' : str
+      } catch (e) { return '' }
+    }
+    if (content.toString && typeof content.toString === 'function') {
+      const str = content.toString().trim()
+      return (str === '[object Object]' || str === '[object Array]') ? '' : str
+    }
     return ''
   }
-        } catch (e) {
-          return ''
-        }
-      }
-    } else if (content.toString && typeof content.toString === 'function') {
-      contentStr = content.toString().trim()
-      if (contentStr === '[object Object]' || contentStr === '[object Array]') {
-        return ''
-      }
-    } else {
+
+  const extractHighlightValue = highlightObj => {
+    if (!highlightObj) return ''
+    if (typeof highlightObj === 'string') return highlightObj.trim()
+    if (typeof highlightObj === 'object' && highlightObj.value !== undefined) {
+      return String(highlightObj.value).trim()
+    }
     return ''
   }
 
+  const cutContent = content => {
+    const contentStr = extractContentStr(content)
+    if (!contentStr) return ''
+
     const firstOccur = contentStr.indexOf('<mark>')
     let start = firstOccur - 30
     let end = firstOccur + 120
@@ -110,112 +144,67 @@ window.addEventListener('load', () => {
       post = '...'
     }
 
-    // Ensure we don't cut off HTML tags in the middle
     let substr = contentStr.substring(start, end)
 
-    // Handle tag completeness
-    // Check for incomplete opening tags at the beginning
+    // Remove incomplete tags at boundaries
     const firstCloseBracket = substr.indexOf('>')
     const firstOpenBracket = substr.indexOf('<')
-
-    // If there's a closing bracket but no opening bracket before it, we've cut a tag
     if (firstCloseBracket !== -1 && (firstOpenBracket === -1 || firstCloseBracket < firstOpenBracket)) {
       substr = substr.substring(firstCloseBracket + 1)
     }
 
-    // Check for incomplete closing tags at the end
     const lastOpenBracket = substr.lastIndexOf('<')
     const lastCloseBracket = substr.lastIndexOf('>')
-
-    // If there's an opening bracket after the last closing bracket, we've cut a tag
     if (lastOpenBracket !== -1 && lastOpenBracket > lastCloseBracket) {
       substr = substr.substring(0, lastOpenBracket)
     }
 
-    // Balance tags in the substring
+    // Balance tags using regex
     const tagStack = []
     let balancedStr = ''
-    let i = 0
+    let lastIndex = 0
+    let match
 
-    while (i < substr.length) {
-      if (substr[i] === '<') {
-        // Check if it's a closing tag
-        if (substr[i + 1] === '/') {
-          const closeTagEnd = substr.indexOf('>', i)
-          if (closeTagEnd !== -1) {
-            const closeTagName = substr.substring(i + 2, closeTagEnd)
-            // Remove matching opening tag from stack
-            for (let j = tagStack.length - 1; j >= 0; j--) {
-              if (tagStack[j] === closeTagName) {
-                tagStack.splice(j, 1)
-                break
-              }
-            }
-            balancedStr += substr.substring(i, closeTagEnd + 1)
-            i = closeTagEnd + 1
-            continue
-          }
-        } else if (substr.substr(i, 2) === '<!' || (substr.indexOf('/>', i) !== -1 && substr.indexOf('/>', i) < substr.indexOf('>', i))) {
-          const tagEnd = substr.indexOf('>', i)
-          if (tagEnd !== -1) {
-            balancedStr += substr.substring(i, tagEnd + 1)
-            i = tagEnd + 1
-            continue
-          }
-        } else {
-          const tagEnd = substr.indexOf('>', i)
-          if (tagEnd !== -1) {
-            const tagName = substr.substring(i + 1, (substr.indexOf(' ', i) > -1 && substr.indexOf(' ', i) < tagEnd)
-              ? substr.indexOf(' ', i)
-              : tagEnd).split(/\s/)[0]
+    TAG_REGEX.lastIndex = 0
+    while ((match = TAG_REGEX.exec(substr)) !== null) {
+      const fullTag = match[0]
+      const tagName = match[1]
+      const tagStart = match.index
+
+      // Append text before this tag
+      balancedStr += substr.substring(lastIndex, tagStart)
+
+      if (fullTag.startsWith('</')) {
+        // Closing tag - remove matching opening tag from stack
+        const idx = tagStack.lastIndexOf(tagName)
+        if (idx !== -1) tagStack.splice(idx, 1)
+      } else if (!fullTag.endsWith('/>') && !fullTag.startsWith('<!')) {
+        // Opening tag (not self-closing or comment)
         tagStack.push(tagName)
-            balancedStr += substr.substring(i, tagEnd + 1)
-            i = tagEnd + 1
-            continue
       }
+      balancedStr += fullTag
+      lastIndex = tagStart + fullTag.length
     }
-      }
-      balancedStr += substr[i]
-      i++
+    balancedStr += substr.substring(lastIndex)
+
+    // Close unclosed tags
+    for (let i = tagStack.length - 1; i >= 0; i--) {
+      balancedStr += `</${tagStack[i]}>`
     }
 
-    // Close any unclosed tags
-    while (tagStack.length > 0) {
-      const tagName = tagStack.pop()
-      balancedStr += `</${tagName}>`
-    }
-
-    // If we removed content from the beginning, add prefix
+    // Check if we cut a mark tag at the beginning
     if (start > 0 || pre) {
-      const actualFirstOpenBracket = contentStr.indexOf('<', start > 0 ? start - 30 : 0)
-      const actualFirstMark = contentStr.indexOf('<mark>', start > 0 ? start - 30 : 0)
-
-      if (actualFirstOpenBracket !== -1 &&
-          (actualFirstMark === -1 || actualFirstOpenBracket < actualFirstMark)) {
+      const checkStart = Math.max(0, start - 30)
+      const actualFirstOpenBracket = contentStr.indexOf('<', checkStart)
+      const actualFirstMark = contentStr.indexOf('<mark>', checkStart)
+      if (actualFirstOpenBracket !== -1 && (actualFirstMark === -1 || actualFirstOpenBracket < actualFirstMark)) {
         pre = '...'
       }
     }
 
-    substr = balancedStr
-    return `${pre}${substr}${post}`
+    return `${pre}${balancedStr}${post}`
   }
 
-  // Helper function to handle Algolia highlight results
-  const extractHighlightValue = highlightObj => {
-    if (!highlightObj) return ''
-
-    if (typeof highlightObj === 'string') {
-      return highlightObj.trim()
-    }
-
-    if (typeof highlightObj === 'object' && highlightObj.value !== undefined) {
-      return String(highlightObj.value).trim()
-    }
-
-    return ''
-  }
-
-  // Initialize Algolia client
   let searchClient
 
   if (window['algoliasearch/lite'] && typeof window['algoliasearch/lite'].liteClient === 'function') {
@@ -230,96 +219,52 @@ window.addEventListener('load', () => {
     return console.error('Failed to initialize Algolia search client')
   }
 
-  // Search state
   let currentQuery = ''
+  let searchRequestId = 0 // Race condition guard
 
-  // Show loading state
-  const showLoading = show => {
-    const loadingIndicator = document.getElementById('loading-status')
-    if (loadingIndicator) {
-      loadingIndicator.hidden = !show
-    }
-  }
-
-  // Cache frequently used elements
-  const elements = {
-    get searchInput () { return document.querySelector('#algolia-search-input .ais-SearchBox-input') },
-    get hits () { return document.getElementById('algolia-hits') },
-    get hitsEmpty () { return document.getElementById('algolia-hits-empty') },
-    get hitsList () { return document.querySelector('#algolia-hits .ais-Hits-list') },
-    get hitsWrapper () { return document.querySelector('#algolia-hits .ais-Hits') },
-    get pagination () { return document.getElementById('algolia-pagination') },
-    get paginationList () { return document.querySelector('#algolia-pagination .ais-Pagination-list') },
-    get stats () { return document.querySelector('#algolia-info .ais-Stats-text') },
-  }
-
-  // Show/hide search results area
   const toggleResultsVisibility = hasResults => {
-    elements.pagination.style.display = hasResults ? '' : 'none'
-    elements.stats.style.display = hasResults ? '' : 'none'
+    $pagination.style.display = hasResults ? '' : 'none'
+    $stats.style.display = hasResults ? '' : 'none'
   }
 
-  // Render search results
   const renderHits = (hits, query, page = 0) => {
     if (hits.length === 0 && query) {
-      elements.hitsEmpty.textContent = languages.hits_empty.replace(/\$\{query}/, query)
-      elements.hitsEmpty.style.display = ''
-      elements.hitsWrapper.style.display = 'none'
-      elements.stats.style.display = 'none'
+      $hitsEmpty.textContent = languages.hits_empty.replace(/\$\{query}/, query)
+      $hitsEmpty.style.display = ''
+      $hitsWrapper.style.display = 'none'
+      $stats.style.display = 'none'
       return
     }
 
-    elements.hitsEmpty.style.display = 'none'
+    $hitsEmpty.style.display = 'none'
 
     const hitsHTML = hits.map((hit, index) => {
       const itemNumber = page * hitsPerPage + index + 1
       const link = hit.permalink || (GLOBAL_CONFIG.root + hit.path)
       const result = hit._highlightResult || hit
 
-      // Content extraction
+      // Content extraction - try highlight result first, then raw hit
       let content = ''
-      try {
-        if (result.contentStripTruncate) {
-          content = cutContent(result.contentStripTruncate)
-        } else if (result.contentStrip) {
-          content = cutContent(result.contentStrip)
-        } else if (result.content) {
-          content = cutContent(result.content)
-        } else if (hit.contentStripTruncate) {
-          content = cutContent(hit.contentStripTruncate)
-        } else if (hit.contentStrip) {
-          content = cutContent(hit.contentStrip)
-        } else if (hit.content) {
-          content = cutContent(hit.content)
-        }
-      } catch (error) {
-        content = ''
+      for (const field of CONTENT_FIELDS) {
+        if (result[field]) { content = cutContent(result[field]); break }
+        if (hit[field]) { content = cutContent(hit[field]); break }
       }
 
-      // Title handling
+      // Title handling - try highlight result first, then raw hit
       let title = 'no-title'
-      try {
-        if (result.title) {
-          title = extractHighlightValue(result.title) || 'no-title'
-        } else if (hit.title) {
-          title = extractHighlightValue(hit.title) || 'no-title'
+      const titleSource = result.title || hit.title
+      if (titleSource) {
+        title = extractHighlightValue(titleSource) || 'no-title'
       }
-
-        if (!title || title === 'no-title') {
+      if (title === 'no-title') {
         if (typeof hit.title === 'string' && hit.title.trim()) {
           title = hit.title.trim()
-          } else if (hit.title && typeof hit.title === 'object' && hit.title.value) {
+        } else if (hit.title?.value) {
           title = String(hit.title.value).trim() || 'no-title'
-          } else {
-            title = 'no-title'
         }
       }
-      } catch (error) {
-        title = 'no-title'
-      }
 
-      return `
-        <li class="ais-Hits-item" value="${itemNumber}">
+      return `<li class="ais-Hits-item" value="${itemNumber}">
           <a href="${link}" class="algolia-hit-item-link">
             <span class="algolia-hits-item-title">${title}</span>
             ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
@@ -327,24 +272,21 @@ window.addEventListener('load', () => {
         </li>`
     }).join('')
 
-    elements.hitsList.innerHTML = hitsHTML
-    elements.hitsWrapper.style.display = query ? '' : 'none'
+    $hitsList.innerHTML = hitsHTML
+    $hitsWrapper.style.display = query ? '' : 'none'
 
     if (hits.length > 0) {
-      elements.stats.style.display = ''
+      $stats.style.display = ''
     }
   }
 
-  // Render pagination
   const renderPagination = (page, nbPages) => {
     if (nbPages <= 1) {
-      elements.pagination.style.display = 'none'
-      elements.paginationList.innerHTML = ''
+      $pagination.style.display = 'none'
+      $paginationList.innerHTML = ''
       return
     }
 
-    elements.pagination.style.display = 'block'
-
     const isFirstPage = page === 0
     const isLastPage = page === nbPages - 1
 
@@ -359,90 +301,63 @@ window.addEventListener('load', () => {
       startPage = Math.max(0, endPage - maxVisiblePages + 1)
     }
 
-    let pagesHTML = ''
+    const parts = []
 
     // Only add ellipsis and first page when there are many pages
     if (nbPages > maxVisiblePages && startPage > 0) {
-      pagesHTML += `
-        <li class="ais-Pagination-item ais-Pagination-item--page">
-          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
-        </li>`
+      parts.push('<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a></li>')
       if (startPage > 1) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
-            <span class="ais-Pagination-link">...</span>
-          </li>`
+        parts.push('<li class="ais-Pagination-item ais-Pagination-item--ellipsis"><span class="ais-Pagination-link">...</span></li>')
       }
     }
 
     // Add middle page numbers
     for (let i = startPage; i <= endPage; i++) {
-      const isSelected = i === page
-      if (isSelected) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
-          </li>`
+      if (i === page) {
+        parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"><span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span></li>`)
       } else {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--page">
-            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
-          </li>`
+        parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a></li>`)
       }
     }
 
     // Only add ellipsis and last page when there are many pages
     if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
       if (endPage < nbPages - 2) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
-            <span class="ais-Pagination-link">...</span>
-          </li>`
+        parts.push('<li class="ais-Pagination-item ais-Pagination-item--ellipsis"><span class="ais-Pagination-link">...</span></li>')
       }
-      pagesHTML += `
-        <li class="ais-Pagination-item ais-Pagination-item--page">
-          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
-        </li>`
+      parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a></li>`)
     }
 
-    if (nbPages > 1) {
-      elements.paginationList.innerHTML = `
-            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
-              ${isFirstPage
+    // Build prev/next links
+    const prevLink = isFirstPage
       ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
       : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
-              }
-            </li>
-            ${pagesHTML}
-            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
-              ${isLastPage
+    const nextLink = isLastPage
       ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
       : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
-              }
-            </li>`
-      elements.pagination.style.display = currentQuery ? '' : 'none'
-    } else {
-      elements.pagination.style.display = 'none'
-    }
+
+    $paginationList.innerHTML = `<li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">${prevLink}</li>${parts.join('')}<li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">${nextLink}</li>`
+    $pagination.style.display = currentQuery ? '' : 'none'
   }
 
-  // Render statistics
   const renderStats = (nbHits, processingTimeMS, query) => {
     if (query) {
       const stats = languages.hits_stats
         .replace(/\$\{hits}/, nbHits)
         .replace(/\$\{time}/, processingTimeMS)
-      elements.stats.innerHTML = `<hr>${stats}`
-      elements.stats.style.display = ''
+      $stats.innerHTML = `<hr>${stats}`
+      $stats.style.display = ''
     } else {
-      elements.stats.style.display = 'none'
+      $stats.style.display = 'none'
     }
   }
 
-  // Perform search
   const performSearch = async (query, page = 0) => {
-    if (!query.trim()) {
+    const trimmedQuery = query.trim()
+
+    if (!trimmedQuery) {
       currentQuery = ''
+      searchRequestId++
       renderHits([], '', 0)
       renderPagination(0, 0)
       renderStats(0, 0, '')
@@ -451,7 +366,8 @@ window.addEventListener('load', () => {
     }
 
     showLoading(true)
-    currentQuery = query
+    currentQuery = trimmedQuery
+    const requestId = ++searchRequestId
 
     try {
       let result
@@ -460,82 +376,76 @@ window.addEventListener('load', () => {
         // v5 multi-index search
         const searchResult = await searchClient.search([{
           indexName,
-          query,
-          params: {
-            page,
-            hitsPerPage,
-            highlightPreTag: '<mark>',
-            highlightPostTag: '</mark>',
-            attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
-          }
+          query: trimmedQuery,
+          params: { page, hitsPerPage, ...HIGHLIGHT_PARAMS }
         }])
         result = searchResult.results[0]
       } else if (searchClient && typeof searchClient.initIndex === 'function') {
         // v4 single-index search
         const index = searchClient.initIndex(indexName)
-        result = await index.search(query, {
-          page,
-          hitsPerPage,
-          highlightPreTag: '<mark>',
-          highlightPostTag: '</mark>',
-          attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
-        })
+        result = await index.search(trimmedQuery, { page, hitsPerPage, ...HIGHLIGHT_PARAMS })
       } else {
         throw new Error('Algolia: No compatible search method available')
       }
 
-      renderHits(result.hits || [], query, page)
+      // Discard stale results from superseded searches
+      if (requestId !== searchRequestId) return
+
+      renderHits(result.hits || [], trimmedQuery, page)
 
       const actualNbPages = result.nbHits <= hitsPerPage ? 1 : (result.nbPages || 0)
       renderPagination(page, actualNbPages)
-      renderStats(result.nbHits || 0, result.processingTimeMS || 0, query)
+      renderStats(result.nbHits || 0, result.processingTimeMS || 0, trimmedQuery)
 
       const hasResults = result.hits && result.hits.length > 0
       toggleResultsVisibility(hasResults)
 
       // Refresh Pjax links
       if (window.pjax) {
-        window.pjax.refresh(document.getElementById('algolia-hits'))
+        window.pjax.refresh($hits)
       }
     } catch (error) {
+      if (requestId !== searchRequestId) return
       console.error('Algolia search error:', error)
-      renderHits([], query, page)
+      renderHits([], trimmedQuery, page)
       renderPagination(0, 0)
-      renderStats(0, 0, query)
+      renderStats(0, 0, trimmedQuery)
     } finally {
+      if (requestId === searchRequestId) {
         showLoading(false)
       }
     }
+  }
 
-  // Debounced search
   let searchTimeout
   const debouncedSearch = (query, delay = 300) => {
     clearTimeout(searchTimeout)
+    // Empty query: clear results immediately without debounce delay
+    if (!query.trim()) {
+      performSearch(query)
+      return
+    }
     searchTimeout = setTimeout(() => performSearch(query), delay)
   }
 
-  // Initialize search box and events
   const initializeSearch = () => {
     showLoading(false)
 
-    if (elements.searchInput) {
-      elements.searchInput.addEventListener('input', e => {
-        const query = e.target.value
-        debouncedSearch(query)
+    if ($searchInput) {
+      $searchInput.addEventListener('input', e => {
+        debouncedSearch(e.target.value)
       })
     }
 
-    const searchForm = document.querySelector('#algolia-search-input .ais-SearchBox-form')
-    if (searchForm) {
-      searchForm.addEventListener('submit', e => {
+    if ($searchForm) {
+      $searchForm.addEventListener('submit', e => {
         e.preventDefault()
-        const query = elements.searchInput.value
-        performSearch(query)
+        performSearch($searchInput ? $searchInput.value : '')
       })
     }
 
     // Pagination event delegation
-    elements.pagination.addEventListener('click', e => {
+    $pagination.addEventListener('click', e => {
       e.preventDefault()
       const link = e.target.closest('a[data-page]')
       if (link) {
@@ -550,7 +460,6 @@ window.addEventListener('load', () => {
     toggleResultsVisibility(false)
   }
 
-  // Initialize
   initializeSearch()
   searchClickFn()
   searchFnOnce()

source/js/search/local-search.js

@@ -15,31 +15,39 @@ class LocalSearch {
     this.top_n_per_article = top_n_per_article
     this.isfetched = false
     this.datas = null
+    this._unescapeDiv = unescape ? document.createElement('div') : null
+    this._processedKeywords = null
+  }
+
+  _processKeywords (keywords) {
+    if (this._processedKeywords) return this._processedKeywords
+    this._processedKeywords = keywords.map(word => {
+      if (this.unescape) {
+        this._unescapeDiv.innerText = word
+        return this._unescapeDiv.innerHTML
+      }
+      return word
+    })
+    return this._processedKeywords
   }
 
   getIndexByWord (words, text, caseSensitive = false) {
     const index = []
     const included = new Set()
+    const processedWords = this._processKeywords(words)
 
     if (!caseSensitive) {
       text = text.toLowerCase()
     }
-    words.forEach(word => {
-      if (this.unescape) {
-        const div = document.createElement('div')
-        div.innerText = word
-        word = div.innerHTML
-      }
+    processedWords.forEach((word, i) => {
       const wordLen = word.length
       if (wordLen === 0) return
       let startPosition = 0
       let position = -1
-      if (!caseSensitive) {
-        word = word.toLowerCase()
-      }
-      while ((position = text.indexOf(word, startPosition)) > -1) {
+      const searchWord = caseSensitive ? word : word.toLowerCase()
+      while ((position = text.indexOf(searchWord, startPosition)) > -1) {
         index.push({ position, word })
-        included.add(word)
+        included.add(words[i])
         startPosition = position + wordLen
       }
     })
@@ -90,19 +98,22 @@ class LocalSearch {
 
   // Highlight title and content
   highlightKeyword (val, slice) {
-    let result = ''
+    const parts = []
     let index = slice.start
     for (const { position, length } of slice.hits) {
-      result += val.substring(index, position)
+      parts.push(val.substring(index, position))
       index = position + length
-      result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`
+      parts.push(`<mark class="search-keyword">${val.substring(position, position + length)}</mark>`)
     }
-    result += val.substring(index, slice.end)
-    return result
+    parts.push(val.substring(index, slice.end))
+    return parts.join('')
   }
 
   getResultItems (keywords) {
     const resultItems = []
+    this._processedKeywords = null
+    // Compute highlight param once instead of per-article
+    const highlightParam = keywords.join(' ')
     this.datas.forEach(({ title, content, url }) => {
       // The number of different keywords included in the article.
       const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
@@ -147,7 +158,7 @@ class LocalSearch {
       let resultItem = ''
 
       url = new URL(url, location.origin)
-      url.searchParams.append('highlight', keywords.join(' '))
+      url.searchParams.append('highlight', highlightParam)
 
       if (slicesOfTitle.length !== 0) {
         resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
@@ -173,7 +184,10 @@ class LocalSearch {
   fetchData () {
     const isXml = !this.path.endsWith('json')
     fetch(this.path)
-      .then(response => response.text())
+      .then(response => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        return response.text()
+      })
       .then(res => {
         // Get the contents from search data
         this.isfetched = true
@@ -194,6 +208,12 @@ class LocalSearch {
         // Remove loading animation
         window.dispatchEvent(new Event('search:loaded'))
       })
+      .catch(error => {
+        console.error('Local search data fetch failed:', error)
+        this.isfetched = true
+        this.datas = []
+        window.dispatchEvent(new Event('search:loaded'))
+      })
   }
 
   // Highlight by wrapping node in mark elements with the given class name
@@ -206,7 +226,7 @@ class LocalSearch {
       index = position + length
       const mark = document.createElement('mark')
       mark.className = className
-      mark.appendChild(document.createTextNode(val.substr(position, length)))
+      mark.appendChild(document.createTextNode(val.substring(position, position + length)))
       children.push(text, mark)
     }
     node.nodeValue = val.substring(index, slice.end)
@@ -244,9 +264,14 @@ window.addEventListener('load', () => {
     unescape
   })
 
-  const input = document.querySelector('.local-search-input input')
-  const statsItem = document.getElementById('local-search-stats')
+  const $input = document.querySelector('.local-search-input input')
+  const $statsItem = document.getElementById('local-search-stats')
   const $loadingStatus = document.getElementById('loading-status')
+  const $searchMask = document.getElementById('search-mask')
+  const $searchDialog = document.querySelector('#local-search .search-dialog')
+  const $results = document.getElementById('local-search-results')
+  const $pagination = document.getElementById('local-search-pagination')
+  const $paginationList = document.querySelector('#local-search-pagination .ais-Pagination-list')
   const isXml = !path.endsWith('json')
 
   // Pagination variables (only initialize if pagination is enabled)
@@ -256,30 +281,17 @@ window.addEventListener('load', () => {
   let currentResultItems = []
 
   if (!enablePagination) {
-    // If pagination is disabled, we don't need these variables
     currentPage = undefined
     currentResultItems = undefined
   }
 
-  // Cache frequently used elements
-  const elements = {
-    get pagination () { return document.getElementById('local-search-pagination') },
-    get paginationList () { return document.querySelector('#local-search-pagination .ais-Pagination-list') }
-  }
-
   // Show/hide search results area
   const toggleResultsVisibility = hasResults => {
-    if (enablePagination) {
-      elements.pagination.style.display = hasResults ? '' : 'none'
-    } else {
-      elements.pagination.style.display = 'none'
-    }
+    $pagination.style.display = (hasResults && enablePagination) ? '' : 'none'
   }
 
   // Render search results for current page
   const renderResults = (searchText, resultItems) => {
-    const container = document.getElementById('local-search-results')
-
     // Determine items to display based on pagination mode
     const itemsToDisplay = enablePagination
       ? currentResultItems.slice(currentPage * hitsPerPage, (currentPage + 1) * hitsPerPage)
@@ -303,12 +315,12 @@ window.addEventListener('load', () => {
       )
     })
 
-    container.innerHTML = `<ol class="search-result-list">${numberedItems.join('')}</ol>`
+    $results.innerHTML = `<ol class="search-result-list">${numberedItems.join('')}</ol>`
 
     // Update stats
     const displayCount = enablePagination ? currentResultItems.length : resultItems.length
     const stats = languages.hits_stats.replace(/\$\{hits}/, displayCount)
-    statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
+    $statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
 
     // Handle pagination
     if (enablePagination) {
@@ -319,19 +331,17 @@ window.addEventListener('load', () => {
     const hasResults = resultItems.length > 0
     toggleResultsVisibility(hasResults)
 
-    window.pjax && window.pjax.refresh(container)
+    window.pjax && window.pjax.refresh($results)
   }
 
   // Render pagination
-  const renderPagination = (page, nbPages, query) => {
+  const renderPagination = (page, nbPages) => {
     if (nbPages <= 1) {
-      elements.pagination.style.display = 'none'
-      elements.paginationList.innerHTML = ''
+      $pagination.style.display = 'none'
+      $paginationList.innerHTML = ''
       return
     }
 
-    elements.pagination.style.display = 'block'
-
     const isFirstPage = page === 0
     const isLastPage = page === nbPages - 1
 
@@ -346,77 +356,49 @@ window.addEventListener('load', () => {
       startPage = Math.max(0, endPage - maxVisiblePages + 1)
     }
 
-    let pagesHTML = ''
+    const parts = []
 
     // Only add ellipsis and first page when there are many pages
     if (nbPages > maxVisiblePages && startPage > 0) {
-      pagesHTML += `
-        <li class="ais-Pagination-item ais-Pagination-item--page">
-          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
-        </li>`
+      parts.push('<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a></li>')
       if (startPage > 1) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
-            <span class="ais-Pagination-link">...</span>
-          </li>`
+        parts.push('<li class="ais-Pagination-item ais-Pagination-item--ellipsis"><span class="ais-Pagination-link">...</span></li>')
       }
     }
 
     // Add middle page numbers
     for (let i = startPage; i <= endPage; i++) {
-      const isSelected = i === page
-      if (isSelected) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
-          </li>`
+      if (i === page) {
+        parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"><span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span></li>`)
       } else {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--page">
-            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
-          </li>`
+        parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a></li>`)
       }
     }
 
     // Only add ellipsis and last page when there are many pages
     if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
       if (endPage < nbPages - 2) {
-        pagesHTML += `
-          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
-            <span class="ais-Pagination-link">...</span>
-          </li>`
+        parts.push('<li class="ais-Pagination-item ais-Pagination-item--ellipsis"><span class="ais-Pagination-link">...</span></li>')
       }
-      pagesHTML += `
-        <li class="ais-Pagination-item ais-Pagination-item--page">
-          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
-        </li>`
+      parts.push(`<li class="ais-Pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a></li>`)
     }
 
-    if (nbPages > 1) {
-      elements.paginationList.innerHTML = `
-            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
-              ${isFirstPage
+    // Build prev/next links
+    const prevLink = isFirstPage
       ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
       : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
-              }
-            </li>
-            ${pagesHTML}
-            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
-              ${isLastPage
+    const nextLink = isLastPage
       ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
       : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
-              }
-            </li>`
-    } else {
-      elements.pagination.style.display = 'none'
-    }
+
+    $paginationList.innerHTML = `<li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">${prevLink}</li>${parts.join('')}<li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">${nextLink}</li>`
+    $pagination.style.display = ''
   }
 
   // Clear search results and stats
   const clearSearchResults = () => {
-    const container = document.getElementById('local-search-results')
-    container.textContent = ''
-    statsItem.textContent = ''
+    $results.textContent = ''
+    $statsItem.textContent = ''
     toggleResultsVisibility(false)
     if (enablePagination) {
       currentResultItems = []
@@ -426,12 +408,11 @@ window.addEventListener('load', () => {
 
   // Show no results message
   const showNoResults = searchText => {
-    const container = document.getElementById('local-search-results')
-    container.textContent = ''
+    $results.textContent = ''
     const statsDiv = document.createElement('div')
     statsDiv.className = 'search-result-stats'
     statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
-    statsItem.innerHTML = statsDiv.outerHTML
+    $statsItem.innerHTML = statsDiv.outerHTML
     toggleResultsVisibility(false)
     if (enablePagination) {
       currentResultItems = []
@@ -441,7 +422,7 @@ window.addEventListener('load', () => {
 
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return
-    let searchText = input.value.trim().toLowerCase()
+    let searchText = $input.value.trim().toLowerCase()
     isXml && (searchText = searchText.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
 
     if (searchText !== '') $loadingStatus.hidden = false
@@ -478,44 +459,63 @@ window.addEventListener('load', () => {
     $loadingStatus.hidden = true
   }
 
-  let loadFlag = false
-  const $searchMask = document.getElementById('search-mask')
-  const $searchDialog = document.querySelector('#local-search .search-dialog')
+  // Debounced input handler
+  let searchTimeout
+  const debouncedInputEvent = () => {
+    clearTimeout(searchTimeout)
+    // Empty input: clear results immediately without debounce delay
+    if (!$input.value.trim()) {
+      inputEventFunction()
+      return
+    }
+    searchTimeout = setTimeout(inputEventFunction, 200)
+  }
+
+  let loadFlag = false
 
-  // fix safari
   const fixSafariHeight = () => {
     if (window.innerWidth < 768) {
       $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
     }
   }
 
+  // Debounced resize to avoid layout thrashing
+  let resizeTimer
+  const onResize = () => {
+    clearTimeout(resizeTimer)
+    resizeTimer = setTimeout(fixSafariHeight, 150)
+  }
+
+  const handleEscape = event => {
+    if (event.code === 'Escape') {
+      closeSearch()
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }
+
   const openSearch = () => {
     btf.overflowPaddingR.add()
     btf.animateIn($searchMask, 'to_show 0.5s')
     btf.animateIn($searchDialog, 'titleScale 0.5s')
-    setTimeout(() => { input.focus() }, 300)
+    setTimeout(() => { $input.focus() }, 300)
     if (!loadFlag) {
       !localSearch.isfetched && localSearch.fetchData()
-      input.addEventListener('input', inputEventFunction)
+      $input.addEventListener('input', debouncedInputEvent)
       loadFlag = true
     }
     // shortcut: ESC
-    document.addEventListener('keydown', function f (event) {
-      if (event.code === 'Escape') {
-        closeSearch()
-        document.removeEventListener('keydown', f)
-      }
-    })
+    document.addEventListener('keydown', handleEscape)
 
     fixSafariHeight()
-    window.addEventListener('resize', fixSafariHeight)
+    window.addEventListener('resize', onResize)
   }
 
   const closeSearch = () => {
     btf.overflowPaddingR.remove()
     btf.animateOut($searchDialog, 'search_close .5s')
     btf.animateOut($searchMask, 'to_hide 0.5s')
-    window.removeEventListener('resize', fixSafariHeight)
+    document.removeEventListener('keydown', handleEscape)
+    window.removeEventListener('resize', onResize)
   }
 
   const searchClickFn = () => {
@@ -532,14 +532,14 @@ window.addEventListener('load', () => {
 
     // Pagination event delegation - only add if pagination is enabled
     if (enablePagination) {
-      elements.pagination.addEventListener('click', e => {
+      $pagination.addEventListener('click', e => {
         e.preventDefault()
         const link = e.target.closest('a[data-page]')
         if (link) {
           const page = parseInt(link.dataset.page, 10)
           if (!isNaN(page) && currentResultItems.length > 0) {
             currentPage = page
-            renderResults(input.value.trim().toLowerCase(), currentResultItems)
+            renderResults($input.value.trim().toLowerCase(), currentResultItems)
           }
         }
       })

source/js/utils.js

@@ -14,61 +14,85 @@
       }
     },
 
-    throttle: function (func, wait, options = {}) {
-      let timeout, context, args
+    throttle: (func, wait, options = {}) => {
+      let timeout, args
       let previous = 0
 
       const later = () => {
         previous = options.leading === false ? 0 : new Date().getTime()
         timeout = null
-        func.apply(context, args)
-        if (!timeout) context = args = null
+        func(...args)
+        if (!timeout) args = null
       }
 
-      const throttled = (...params) => {
+      return (...params) => {
         const now = new Date().getTime()
         if (!previous && options.leading === false) previous = now
         const remaining = wait - (now - previous)
-        context = this
         args = params
+
         if (remaining <= 0 || remaining > wait) {
           if (timeout) {
             clearTimeout(timeout)
             timeout = null
           }
           previous = now
-          func.apply(context, args)
-          if (!timeout) context = args = null
+          func(...args)
+          if (!timeout) args = null
         } else if (!timeout && options.trailing !== false) {
           timeout = setTimeout(later, remaining)
         }
       }
-
-      return throttled
     },
 
-    overflowPaddingR: {
+    rafThrottle: fn => {
+      let rafId = null
+      return (...args) => {
+        if (rafId) return
+        rafId = requestAnimationFrame(() => {
+          fn(...args)
+          rafId = null
+        })
+      }
+    },
+
+    overflowPaddingR: (() => {
+      let headerElement = null
+      let menuElement = null
+
+      const getElements = () => {
+        if (!headerElement) {
+          headerElement = document.getElementById('page-header')
+        }
+        if (!menuElement) {
+          menuElement = document.getElementById('menus')
+        }
+        return { headerElement, menuElement }
+      }
+
+      return {
         add: () => {
           const paddingRight = window.innerWidth - document.body.clientWidth
 
           if (paddingRight > 0) {
             document.body.style.paddingRight = `${paddingRight}px`
             document.body.style.overflow = 'hidden'
-          const menuElement = document.querySelector('#page-header.nav-fixed #menus')
-          if (menuElement) {
-            menuElement.style.paddingRight = `${paddingRight}px`
+            const { headerElement: header, menuElement: menu } = getElements()
+            if (header && menu && header.classList.contains('nav-fixed')) {
+              menu.style.paddingRight = `${paddingRight}px`
             }
           }
         },
         remove: () => {
           document.body.style.paddingRight = ''
           document.body.style.overflow = ''
-        const menuElement = document.querySelector('#page-header.nav-fixed #menus')
-        if (menuElement) {
-          menuElement.style.paddingRight = ''
+          const { headerElement: header, menuElement: menu } = getElements()
+          if (header && menu && header.classList.contains('nav-fixed')) {
+            menu.style.paddingRight = ''
           }
         }
-    },
+      }
+    })(),
 
     snackbarShow: (text, showAction = false, duration = 2000) => {
       const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
@@ -135,7 +159,8 @@
       const animate = currentTime => {
         const timeElapsed = currentTime - startTime
         const progress = Math.min(timeElapsed / time, 1)
-        window.scrollTo(0, currentPos + (pos - currentPos) * progress)
+        const easedProgress = 1 - Math.pow(1 - progress, 4) // easeOutQuart
+        window.scrollTo(0, currentPos + (pos - currentPos) * easedProgress)
         if (progress < 1) {
           requestAnimationFrame(animate)
         }
@@ -169,17 +194,7 @@
 
     isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
 
-    getEleTop: ele => {
-      let actualTop = ele.offsetTop
-      let current = ele.offsetParent
-
-      while (current !== null) {
-        actualTop += current.offsetTop
-        current = current.offsetParent
-      }
-
-      return actualTop
-    },
+    getEleTop: ele => ele.getBoundingClientRect().top + window.scrollY,
 
     loadLightbox: ele => {
       const service = GLOBAL_CONFIG.lightbox
@@ -190,7 +205,7 @@
       }
 
       if (service === 'fancybox') {
-        Array.from(ele).forEach(i => {
+        ele.forEach(i => {
           if (i.parentNode.tagName !== 'A') {
             const dataSrc = i.dataset.lazySrc || i.src
             const dataCaption = i.title || i.alt || ''