feat: 更新 plugins.yml 中的依賴版本至最新

feat: 優化 aside_archives ，改進性能和可讀性 feat: 改善 inlineImg 和 timeline 標籤的文檔，優化時間線邏輯 feat: 更新 gallery 標籤以支持額外參數，優化圖片顯示邏輯 improvement: 優化隨機封面過濾器邏輯, 避免連續重複 feat: 最新評論限制顯示 1-10 條之間 fix: artalk 的最新評論顯示待定或者封禁的評論的 bug
2026-04-08 12:07:06 +08:00 · 2024-12-10 20:35:58 +08:00
parent 247c1b664d
commit 0d0001c808
21 changed files with 373 additions and 278 deletions
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -3,16 +3,16 @@ if theme.menu
    #menu-mask
    #sidebar-menus
      .avatar-img.text-center
-        img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
+        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.flink)}'` alt="avatar")
      .site-data.text-center
-        a(href=url_for(config.archive_dir) + '/')
+        a(href=`${url_for(config.archive_dir)}/`)
          .headline= _p('aside.articles')
          .length-num= site.posts.length
-        a(href=url_for(config.tag_dir) + '/' )
+        a(href=`${url_for(config.tag_dir)}/`)
          .headline= _p('aside.tags')
          .length-num= site.tags.length
-        a(href=url_for(config.category_dir) + '/')
+        a(href=`${url_for(config.category_dir)}/`)
          .headline= _p('aside.categories')
          .length-num= site.categories.length

-      !=partial('includes/header/menu_item', {}, {cache: true})
+      != partial('includes/header/menu_item', {}, { cache: true })
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/layout/includes/third-party/newest-comments/artalk.pug
@@ -34,7 +34,7 @@ script.

    const searchParams = new URLSearchParams({
      'site_name': '!{site}',
-      'limit': '!{theme.aside.card_newest_comments.limit}',
+      'limit': '!{newestCommentsLimit * 2}', // Fetch more comments to filter pending comments
    })

    const getComment = async (ele) => {
@@ -42,16 +42,19 @@ script.
        const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`)
        const result = await res.json()
        const { avatarCdn, avatarDefault } = await getAvatarValue()
-        const artalk = result.data.map(e => {
-          const avatar = avatarCdn && e.email_encrypted ? `${avatarCdn}${e.email_encrypted}?${avatarDefault}` : ''
-          return {
-            'avatar': avatar,
-            'content': changeContent(e.content_marked),
-            'nick': e.nick,
-            'url': e.page_url,
-            'date': e.date,
-          }
-        })
+        const artalk = result.data
+          .filter(e => !e.is_pending) // Filter pending comments
+          .slice(0, !{newestCommentsLimit}) // Limit the number of comments
+          .map(e => {
+            const avatar = avatarCdn && e.email_encrypted ? `${avatarCdn}${e.email_encrypted}?${avatarDefault}` : ''
+            return {
+              'avatar': avatar,
+              'content': changeContent(e.content_marked),
+              'nick': e.nick,
+              'url': e.page_url,
+              'date': e.date,
+            }
+          })
        btf.saveToLocal.set(keyName, JSON.stringify(artalk), !{theme.aside.card_newest_comments.storage}/(60*24))
        generateHtml(artalk, ele)
      } catch (e) {
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -6,7 +6,7 @@ script.
    const { changeContent, generateHtml, run } = window.newestComments

    const getComment = ele => {
-      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.aside.card_newest_comments.limit}&api_key=!{apiKey}')
+      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{newestCommentsLimit}&api_key=!{apiKey}')
        .then(response => response.json())
        .then(data => {
          const disqusArray = data.response.map(item => {
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -32,7 +32,7 @@ script.
    }

    const getComment = ele => {
-      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.aside.card_newest_comments.limit}&page=1',{
+      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{newestCommentsLimit}&page=1',{
        "headers": {
          Accept: 'application/vnd.github.v3.html+json'
        }
--- a/layout/includes/third-party/newest-comments/index.pug
+++ b/layout/includes/third-party/newest-comments/index.pug
@@ -1,7 +1,11 @@
 - let { use } = theme.comments

 if use
-  - let forum,apiKey,userRepo
+  -
+    let forum,apiKey,userRepo
+    let { limit:newestCommentsLimit } = theme.aside.card_newest_comments
+    if (newestCommentsLimit > 10 || newestCommentsLimit < 1) newestCommentsLimit = 6
+
  case use[0]
    when 'Valine'
      include ./valine.pug
--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -7,7 +7,7 @@ script.
    const { changeContent, generateHtml, run } = window.newestComments

    const getComment = ele => {
-      fetch('!{host}/api/v1/last/!{theme.aside.card_newest_comments.limit}?site=!{siteId}')
+      fetch('!{host}/api/v1/last/!{newestCommentsLimit}?site=!{siteId}')
        .then(response => response.json())
        .then(data => {
          const remark42 = data.map(e => {
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -10,7 +10,7 @@ script.
        twikoo.getRecentComments({
          envId: '!{theme.twikoo.envId}',
          region: '!{theme.twikoo.region}',
-          pageSize: !{theme.aside.card_newest_comments.limit},
+          pageSize: !{newestCommentsLimit},
          includeReply: true
        }).then(res => {
          const twikooArray = res.map(e => {
--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -27,7 +27,7 @@ script.
        },
      }

-      fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.aside.card_newest_comments.limit}&order=-createdAt`,settings)
+      fetch(`${serverURL}/1.1/classes/Comment?limit=!{newestCommentsLimit}&order=-createdAt`,settings)
        .then(response => response.json())
        .then(data => {
          const valineArray = data.results.map(e => {
--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -9,7 +9,7 @@ script.

    const getComment = async (ele) => {
      try {
-        const res = await fetch('!{serverURL}/api/comment?type=recent&count=!{theme.aside.card_newest_comments.limit}', { method: 'GET' })
+        const res = await fetch('!{serverURL}/api/comment?type=recent&count=!{newestCommentsLimit}')
        const result = await res.json()
        const walineArray = result.data.map(e => {
          return {
--- a/layout/includes/widget/card_webinfo.pug
+++ b/layout/includes/widget/card_webinfo.pug
@@ -6,40 +6,39 @@ if theme.aside.card_webinfo.enable
    .webinfo
      if theme.aside.card_webinfo.post_count
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
+          .item-name= `${_p('aside.card_webinfo.article_name')} :`
          .item-count= site.posts.length
      if theme.aside.card_webinfo.runtime_date
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.runtime.name') + " :"
+          .item-name= `${_p('aside.card_webinfo.runtime.name')} :`
          .item-count#runtimeshow(data-publishDate=date_xml(theme.aside.card_webinfo.runtime_date))
            i.fa-solid.fa-spinner.fa-spin
      if theme.wordcount.enable && theme.wordcount.total_wordcount
        .webinfo-item
-          .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
-          .item-count=totalcount(site)
+          .item-name= `${_p('aside.card_webinfo.site_wordcount')} :`
+          .item-count= totalcount(site)
      if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.site_uv
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .item-name= `${_p('aside.card_webinfo.site_uv_name')} :`
          .item-count#umami-site-uv
            i.fa-solid.fa-spinner.fa-spin
      else if theme.busuanzi.site_uv
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .item-name= `${_p('aside.card_webinfo.site_uv_name')} :`
          .item-count#busuanzi_value_site_uv
            i.fa-solid.fa-spinner.fa-spin
      if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.site_pv
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .item-name= `${_p('aside.card_webinfo.site_pv_name')} :`
          .item-count#umami-site-pv
            i.fa-solid.fa-spinner.fa-spin
      else if theme.busuanzi.site_pv
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .item-name= `${_p('aside.card_webinfo.site_pv_name')} :`
          .item-count#busuanzi_value_site_pv
            i.fa-solid.fa-spinner.fa-spin
      if theme.aside.card_webinfo.last_push_date
        .webinfo-item
-          .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
+          .item-name= `${_p('aside.card_webinfo.last_push_date.name')} :`
          .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
-            i.fa-solid.fa-spinner.fa-spin
-
+            i.fa-solid.fa-spinner.fa-spin
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -2,7 +2,7 @@ extends includes/layout.pug

 block content
  - const noCardLayout = ['shuoshuo', '404'].includes(page.type) ? 'nc' : ''
-  - var commentsJsLoad = false 
+  - var commentsJsLoad = false

  mixin commentLoad
    if page.comments !== false && theme.comments.use
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -6,7 +6,7 @@ block content
      include includes/header/post-info.pug

    article#article-container.container.post-content
-      if theme.noticeOutdate.enable && page.noticeOutdate !== false 
+      if theme.noticeOutdate.enable && page.noticeOutdate !== false
        include includes/post/outdate-notice.pug
      else
        !=page.content
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "5.3.0-b2",
+  "version": "5.3.0-b3",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/plugins.yml
+++ b/plugins.yml
@@ -9,7 +9,7 @@ activate_power_mode:
 algolia_search:
  name: algoliasearch
  file: dist/lite/builds/browser.umd.js
-  version: 5.12.0
+  version: 5.16.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.4.6
+  version: 4.4.7
 clickShowText:
  name: butterfly-extsrc
  file: dist/click-show-text.min.js
@@ -66,12 +66,12 @@ docsearch_css:
  name: '@docsearch/css'
  other_name: docsearch-css
  file: dist/style.css
-  version: 3.6.3
+  version: 3.8.0
 docsearch_js:
  name: '@docsearch/js'
  other_name: docsearch-js
  file: dist/umd/index.js
-  version: 3.6.3
+  version: 3.8.0
 egjs_infinitegrid:
  name: '@egjs/infinitegrid'
  other_name: egjs-infinitegrid
@@ -95,7 +95,7 @@ fontawesome:
  name: '@fortawesome/fontawesome-free'
  file: css/all.min.css
  other_name: font-awesome
-  version: 6.6.0
+  version: 6.7.1
 gitalk:
  name: gitalk
  file: dist/gitalk.min.js
@@ -111,17 +111,17 @@ instantpage:
 instantsearch:
  name: instantsearch.js
  file: dist/instantsearch.production.min.js
-  version: 4.75.3
+  version: 4.75.6
 katex:
  name: katex
  file: dist/katex.min.css
  other_name: KaTeX
-  version: 0.16.11
+  version: 0.16.15
 katex_copytex:
  name: katex
  file: dist/contrib/copy-tex.min.js
  other_name: KaTeX
-  version: 0.16.11
+  version: 0.16.15
 lazyload:
  name: vanilla-lazyload
  file: dist/lazyload.iife.min.js
@@ -137,7 +137,7 @@ medium_zoom:
 mermaid:
  name: mermaid
  file: dist/mermaid.min.js
-  version: 11.4.0
+  version: 11.4.1
 meting_js:
  name: butterfly-extsrc
  file: metingjs/dist/Meting.min.js
@@ -190,7 +190,7 @@ snackbar_css:
 twikoo:
  name: twikoo
  file: dist/twikoo.all.min.js
-  version: 1.6.39
+  version: 1.6.40
 typed:
  name: typed.js
  file: dist/typed.umd.js
@@ -203,9 +203,9 @@ waline_css:
  name: '@waline/client'
  file: dist/waline.css
  other_name: waline
-  version: 3.3.2
+  version: 3.4.1
 waline_js:
  name: '@waline/client'
  file: dist/waline.js
  other_name: waline
-  version: 3.3.2
+  version: 3.4.1
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -1,40 +1,60 @@
 /**
- * Butterfly
- * ramdom cover
+ * Random cover for posts
 */

 'use strict'

-hexo.extend.filter.register('before_post_render', data => {
-  const imgTestReg = /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/i
-  let { cover: coverVal, top_img: topImg } = data
-
-  // 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}`
-  }
-
+hexo.extend.generator.register('post', locals => {
+  const recentCovers = []
  const randomCoverFn = () => {
    const { cover: { default_cover: defaultCover } } = hexo.theme.config
    if (!defaultCover) return false
    if (!Array.isArray(defaultCover)) return defaultCover
-    const num = Math.floor(Math.random() * defaultCover.length)
+    const defaultCoverLen = defaultCover.length
+    const limit = 3
+
+    let num
+    do {
+      num = Math.floor(Math.random() * defaultCoverLen)
+    } while (recentCovers.includes(num))
+
+    recentCovers.push(num)
+    if (recentCovers.length > limit) recentCovers.shift()
+
    return defaultCover[num]
  }

-  if (coverVal === false) return data
+  const handleImg = data => {
+    const imgTestReg = /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/i
+    let { cover: coverVal, top_img: topImg } = data

-  // If cover is not set, use random cover
-  if (!coverVal) {
-    const randomCover = randomCoverFn()
-    data.cover = randomCover
-    coverVal = randomCover // update coverVal
+    // 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 (coverVal === false) return data
+
+    // If cover is not set, use random cover
+    if (!coverVal) {
+      const randomCover = randomCoverFn()
+      data.cover = randomCover
+      coverVal = randomCover // update coverVal
+    }
+
+    if (coverVal && (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal))) {
+      data.cover_type = 'img'
+    }
+
+    return data
  }

-  if (coverVal && (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal))) {
-    data.cover_type = 'img'
-  }
-
-  return data
+  return locals.posts.sort('date').map(post => {
+    return {
+      data: handleImg(post),
+      layout: 'post',
+      path: post.path
+    }
+  })
 })
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -2,38 +2,68 @@

 hexo.extend.helper.register('aside_archives', function (options = {}) {
  const { config, page, site, url_for, _p } = this
-  const archiveDir = config.archive_dir
-  const { timezone } = config
-  const lang = toMomentLocale(page.lang || page.language || config.language)
-  const type = options.type || 'monthly'
-  const format = options.format || (type === 'monthly' ? 'MMMM YYYY' : 'YYYY')
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
-  const order = options.order || -1
-  const limit = options.limit
+  const {
+    archive_dir: archiveDir,
+    timezone,
+    language
+  } = config
+
+  // Destructure and set default options with object destructuring
+  const {
+    type = 'monthly',
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY',
+    show_count: showCount = true,
+    order = -1,
+    limit,
+    transform
+  } = 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, monthA, yearB, monthB) => yearA === yearB
+    : (yearA, yearB) => yearA === yearB

-  const posts = site.posts.sort('date', order)
-  if (!posts.length) return ''
+  // Early return if no posts
+  if (!site.posts.length) return ''

-  const data = []
-  posts.forEach(post => {
-    let date = post.date.clone()
-    if (timezone) date = date.tz(timezone)
+  // 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 year = date.year()
-    const month = date.month() + 1
+      const year = date.year()
+      const month = date.month() + 1

-    if (!data.length || !compareFunc(data[data.length - 1].year, data[data.length - 1].month, year, month)) {
      if (lang) date = date.locale(lang)
-      data.push({ name: date.format(format), year, month, count: 1 })
-    } else {
-      data[data.length - 1].count++
-    }
-  })

-  const link = item => {
+      // Find or create archive entry
+      const lastEntry = acc[acc.length - 1]
+      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 => {
    let url = `${archiveDir}/${item.year}/`
    if (type === 'monthly') {
      url += item.month < 10 ? `0${item.month}/` : `${item.month}/`
@@ -41,37 +71,48 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
    return url_for(url)
  }

-  const len = data.length
-  const limitLength = limit === 0 ? len : Math.min(len, limit)
+  // Limit results efficiently
+  const limitedData = limit > 0
+    ? data.slice(0, Math.min(data.length, limit))
+    : data

-  let result = `
+  // Use template literal for better readability
+  const archiveHeader = `
    <div class="item-headline">
      <i class="fas fa-archive"></i>
      <span>${_p('aside.card_archives')}</span>
-      ${len > limitLength ? `<a class="card-more-btn" href="${url_for(archiveDir)}/" title="${_p('aside.more_button')}"><i class="fas fa-angle-right"></i></a>` : ''}
+      ${data.length > limitedData.length
+        ? `<a class="card-more-btn" href="${url_for(archiveDir)}/"
+            title="${_p('aside.more_button')}">
+            <i class="fas fa-angle-right"></i>
+          </a>`
+        : ''}
    </div>
-    <ul class="card-archive-list">
  `

-  for (let i = 0; i < limitLength; i++) {
-    const item = data[i]
-    result += `
-      <li class="card-archive-list-item">
-        <a class="card-archive-list-link" href="${link(item)}">
-          <span class="card-archive-list-date">${options.transform ? options.transform(item.name) : item.name}</span>
-          ${showCount ? `<span class="card-archive-list-count">${item.count}</span>` : ''}
-        </a>
-      </li>
-    `
-  }
+  // Use map for generating list items, join for performance
+  const archiveList = `
+    <ul class="card-archive-list">
+      ${limitedData.map(item => `
+        <li class="card-archive-list-item">
+          <a class="card-archive-list-link" href="${createArchiveLink(item)}">
+            <span class="card-archive-list-date">
+              ${transform ? transform(item.name) : item.name}
+            </span>
+            ${showCount
+              ? `<span class="card-archive-list-count">${item.count}</span>`
+              : ''}
+          </a>
+        </li>
+      `).join('')}
+    </ul>
+  `

-  result += '</ul>'
-  return result
+  return archiveHeader + archiveList
 })

-const toMomentLocale = function (lang) {
-  if (!lang || lang === 'en' || lang === 'default') {
-    return 'en'
-  }
+// Improved locale conversion function
+const toMomentLocale = lang => {
+  if (!lang || ['en', 'default'].includes(lang)) return 'en'
  return lang.toLowerCase().replace('_', '-')
 }
--- a/scripts/tag/gallery.js
+++ b/scripts/tag/gallery.js
@@ -3,7 +3,7 @@
 * galleryGroup and gallery
 * {% galleryGroup [name] [descr] [url] [img] %}
 *
- * {% gallery [button] %}
+ * {% gallery [button],[limit],[firstLimit] %}
 * {% gallery url,[url],[button] %}
 */

@@ -11,54 +11,66 @@

 const urlFor = require('hexo-util').url_for.bind(hexo)

-const gallery = (args, content) => {
-  args = args.join(' ').split(',')
-  let button = false
-  let type = 'data'
-  let dataStr = ''
+const DEFAULT_LIMIT = 10
+const DEFAULT_FIRST_LIMIT = 10
+const IMAGE_REGEX = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g

-  if (args[0] === 'url') {
-    [type, dataStr, button] = args // url,[link],[lazyload]
-    dataStr = urlFor(dataStr)
-  } else {
-    [button] = args // [lazyload]
-    const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
-    let m
-    const arr = []
-    while ((m = regex.exec(content)) !== null) {
-      if (m.index === regex.lastIndex) {
-        regex.lastIndex++
-      }
-      arr.push({
-        url: m[2],
-        alt: m[1],
-        title: m[3]
-      })
-    }
+// Helper functions
+const parseGalleryArgs = args => {
+  const [type, ...rest] = args.join(' ').split(',').map(arg => arg.trim())
+  return {
+    isUrl: type === 'url',
+    params: type === 'url' ? rest : [type, ...rest]
+  }
+}

-    dataStr = JSON.stringify(arr)
+const parseImageContent = content => {
+  const images = []
+  let match
+
+  while ((match = IMAGE_REGEX.exec(content)) !== null) {
+    images.push({
+      url: match[2],
+      alt: match[1] || '',
+      title: match[3] || ''
+    })
  }

-  return `<div class="gallery-container" data-type="${type}" data-button="${button}">
-      <div class="gallery-items">${dataStr}</div>
-    </div>`
+  return images
+}
+
+const createGalleryHTML = (type, dataStr, button, limit, firstLimit) => {
+  return `<div class="gallery-container" data-type="${type}" data-button="${button}" data-limit="${limit}" data-first="${firstLimit}">
+    <div class="gallery-items">${dataStr}</div>
+  </div>`
+}
+
+const gallery = (args, content) => {
+  const { isUrl, params } = parseGalleryArgs(args)
+
+  if (isUrl) {
+    const [dataStr, button = false, limit = DEFAULT_LIMIT, firstLimit = DEFAULT_FIRST_LIMIT] = params
+    return createGalleryHTML('url', urlFor(dataStr), button, limit, firstLimit)
+  }
+
+  const [button = false, limit = DEFAULT_LIMIT, firstLimit = DEFAULT_FIRST_LIMIT] = params
+  const images = parseImageContent(content)
+  return createGalleryHTML('data', JSON.stringify(images), button, limit, firstLimit)
 }

 const galleryGroup = args => {
-  const [name, descr, url, img] = args
-  const imgUrl = urlFor(img)
-  const urlLink = urlFor(url)
+  const [name = '', descr = '', url = '', img = ''] = args.map(arg => arg.trim())

  return `<figure class="gallery-group">
-  <img class="gallery-group-img no-lightbox" src='${imgUrl}' alt="Group Image Gallery">
-  <figcaption>
-  <div class="gallery-group-name">${name}</div>
-  <p>${descr}</p>
-  <a href='${urlLink}'></a>
-  </figcaption>
-  </figure>
-  `
+    <img class="gallery-group-img no-lightbox" src='${urlFor(img)}' alt="Group Image Gallery">
+    <figcaption>
+      <div class="gallery-group-name">${name}</div>
+      <p>${descr}</p>
+      <a href='${urlFor(url)}'></a>
+    </figcaption>
+  </figure>`
 }

+// Register tags
 hexo.extend.tag.register('gallery', gallery, { ends: true })
 hexo.extend.tag.register('galleryGroup', galleryGroup)
--- a/scripts/tag/inlineImg.js
+++ b/scripts/tag/inlineImg.js
@@ -1,9 +1,9 @@
 /**
- * inlineImg 圖片
- * @param {Array} args 圖片名稱和高度
- * @param {string} args[0] 圖片名稱
- * @param {number} args[1] 圖片高度
- * @returns {string} 圖片標籤
+ * inlineImg
+ * @param {Array} args - Image name and height
+ * @param {string} args[0] - Image name
+ * @param {number} args[1] - Image height
+ * @returns {string} - Image tag
 */

 'use strict'
--- a/scripts/tag/mermaid.js
+++ b/scripts/tag/mermaid.js
@@ -10,7 +10,7 @@ const { escapeHTML } = require('hexo-util')

 const mermaid = (args, content) => {
  return `<div class="mermaid-wrap"><pre class="mermaid-src" hidden>
-  ${escapeHTML(content)}
+    ${escapeHTML(content)}
  </pre></div>`
 }

--- a/scripts/tag/timeline.js
+++ b/scripts/tag/timeline.js
@@ -1,41 +1,50 @@
 /**
- * timeline
- * by Jerry
+ * Timeline tag for Hexo
+ * Syntax:
+ * {% timeline [headline],[color] %}
+ * <!-- timeline [title] -->
+ * [content]
+ * <!-- endtimeline -->
+ * <!-- timeline [title] -->
+ * [content]
+ * <!-- endtimeline -->
+ * {% endtimeline %}
 */

 'use strict'

 const timeLineFn = (args, content) => {
-  const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g
+  // Use named capture groups for better readability
+  const tlBlock = /<!--\s*timeline\s*(?<title>.*?)\s*-->\n(?<content>[\s\S]*?)<!--\s*endtimeline\s*-->/g

-  let result = ''
-  let color = ''
-  let text = ''
-  if (args.length) {
-    [text, color] = args.join(' ').split(',')
-    const mdContent = hexo.render.renderSync({ text, engine: 'markdown' })
-    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${mdContent}</div></div></div>`
-  }
+  // Pre-compile markdown render function
+  const renderMd = text => hexo.render.renderSync({ text, engine: 'markdown' })

-  const matches = []
-  let match
+  // Parse arguments more efficiently
+  const [text, color = ''] = args.length ? args.join(' ').split(',') : []

-  while ((match = tlBlock.exec(content)) !== null) {
-    matches.push(match[1])
-    matches.push(match[2])
-  }
+  // Build initial headline if text exists
+  const headline = text
+    ? `<div class='timeline-item headline'>
+        <div class='timeline-item-title'>
+          <div class='item-circle'>${renderMd(text)}</div>
+        </div>
+      </div>`
+    : ''

-  for (let i = 0; i < matches.length; i += 2) {
-    const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
-    const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })
+  // Match all timeline blocks in one pass and transform
+  const items = Array.from(content.matchAll(tlBlock))
+    .map(({ groups: { title, content } }) =>
+      `<div class='timeline-item'>
+        <div class='timeline-item-title'>
+          <div class='item-circle'>${renderMd(title)}</div>
+        </div>
+        <div class='timeline-item-content'>${renderMd(content)}</div>
+      </div>`
+    )
+    .join('')

-    const tlTitleHtml = `<div class='timeline-item-title'><div class='item-circle'>${tlChildTitle}</div></div>`
-    const tlContentHtml = `<div class='timeline-item-content'>${tlChildContent}</div>`
-
-    result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
-  }
-
-  return `<div class="timeline ${color || ''}">${result}</div>`
+  return `<div class="timeline ${color}">${headline}${items}</div>`
 }

 hexo.extend.tag.register('timeline', timeLineFn, { ends: true })
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -224,14 +224,23 @@ document.addEventListener('DOMContentLoaded', () => {
   */

  const fetchUrl = async url => {
-    const response = await fetch(url)
-    return await response.json()
+    try {
+      const response = await fetch(url)
+      return await response.json()
+    } catch (error) {
+      console.error('Failed to fetch URL:', error)
+      return []
+    }
  }

-  const runJustifiedGallery = (item, data, isButton = false, tabs) => {
-    const dataLength = data.length
+  const runJustifiedGallery = (container, data, config) => {
+    const { isButton, limit, firstLimit, tabs } = config

-    const ig = new InfiniteGrid.JustifiedInfiniteGrid(item, {
+    const dataLength = data.length
+    const maxGroupKey = Math.ceil((dataLength - firstLimit) / limit + 1)
+
+    // Gallery configuration
+    const igConfig = {
      gap: 5,
      isConstantSize: true,
      sizeRange: [150, 600],
@@ -239,132 +248,130 @@ document.addEventListener('DOMContentLoaded', () => {
      // observeChildren: true,
      useTransform: true
      // useRecycle: false
-    })
-
-    const replaceDq = str => str.replace(/"/g, '&quot;') // replace double quotes to &quot;
-
-    const getItems = (nextGroupKey, count) => {
-      const nextItems = []
-      const startCount = (nextGroupKey - 1) * count
-
-      for (let i = 0; i < count; ++i) {
-        const num = startCount + i
-        if (num >= dataLength) {
-          break
-        }
-
-        const item = data[num]
-        const alt = item.alt ? `alt="${replaceDq(item.alt)}"` : ''
-        const title = item.title ? `title="${replaceDq(item.title)}"` : ''
-
-        nextItems.push(`<div class="item">
-            <img src="${item.url}" data-grid-maintained-target="true" ${alt + title} />
-          </div>`)
-      }
-      return nextItems
    }

-    const buttonText = GLOBAL_CONFIG.infinitegrid.buttonText
-    const addButton = item => {
-      const button = document.createElement('button')
-      button.innerHTML = buttonText + '<i class="fa-solid fa-arrow-down"></i>'
-
-      button.addEventListener('click', e => {
-        e.target.closest('button').remove()
-        btf.setLoading.add(item)
-        appendItem(ig.getGroups().length + 1, 10)
-      }, { once: true })
-
-      item.insertAdjacentElement('afterend', button)
-    }
-
-    const appendItem = (nextGroupKey, count) => {
-      ig.append(getItems(nextGroupKey, count), nextGroupKey)
-    }
-
-    const maxGroupKey = Math.ceil(dataLength / 10)
+    const ig = new InfiniteGrid.JustifiedInfiniteGrid(container, igConfig)
    let isLayoutHidden = false

-    const completeFn = e => {
-      if (tabs) {
-        const parentNode = item.parentNode
+    // Utility functions
+    const sanitizeString = str => (str && str.replace(/"/g, '&quot;')) || ''

+    const createImageItem = item => {
+      const alt = item.alt ? `alt="${sanitizeString(item.alt)}"` : ''
+      const title = item.title ? `title="${sanitizeString(item.title)}"` : ''
+      return `<div class="item">
+        <img src="${item.url}" data-grid-maintained-target="true" ${alt} ${title} />
+      </div>`
+    }
+
+    const getItems = (nextGroupKey, count, isFirst = false) => {
+      const startIndex = isFirst ? (nextGroupKey - 1) * count : (nextGroupKey - 2) * count + firstLimit
+      return data.slice(startIndex, startIndex + count).map(createImageItem)
+    }
+
+    // Load more button
+    const addLoadMoreButton = container => {
+      const button = document.createElement('button')
+      button.innerHTML = `${GLOBAL_CONFIG.infinitegrid.buttonText}<i class="fa-solid fa-arrow-down"></i>`
+
+      button.addEventListener('click', () => {
+        button.remove()
+        btf.setLoading.add(container)
+        appendItems(ig.getGroups().length + 1, limit)
+      }, { once: true })
+
+      container.insertAdjacentElement('afterend', button)
+    }
+
+    const appendItems = (nextGroupKey, count, isFirst) => {
+      ig.append(getItems(nextGroupKey, count, isFirst), nextGroupKey)
+    }
+
+    // Event handlers
+    const handleRenderComplete = e => {
+      if (tabs) {
+        const parentNode = container.parentNode
        if (isLayoutHidden) {
          parentNode.style.visibility = 'visible'
        }
-
-        if (item.offsetHeight === 0) {
+        if (container.offsetHeight === 0) {
          parentNode.style.visibility = 'hidden'
          isLayoutHidden = true
        }
      }

      const { updated, isResize, mounted } = e
-      if (!updated.length || !mounted.length || isResize) {
-        return
-      }
+      if (!updated.length || !mounted.length || isResize) return

-      btf.loadLightbox(item.querySelectorAll('img:not(.medium-zoom-image)'))
+      btf.loadLightbox(container.querySelectorAll('img:not(.medium-zoom-image)'))

      if (ig.getGroups().length === maxGroupKey) {
-        btf.setLoading.remove(item)
-        !tabs && ig.off('renderComplete', completeFn)
+        btf.setLoading.remove(container)
+        !tabs && ig.off('renderComplete', handleRenderComplete)
        return
      }

      if (isButton) {
-        btf.setLoading.remove(item)
-        addButton(item)
+        btf.setLoading.remove(container)
+        addLoadMoreButton(container)
      }
    }

-    const requestAppendFn = btf.debounce(e => {
+    const handleRequestAppend = btf.debounce(e => {
      const nextGroupKey = (+e.groupKey || 0) + 1
-      appendItem(nextGroupKey, 10)

-      if (nextGroupKey === maxGroupKey) {
-        ig.off('requestAppend', requestAppendFn)
-      }
+      if (nextGroupKey === 1) appendItems(nextGroupKey, firstLimit, true)
+      else appendItems(nextGroupKey, limit)
+
+      if (nextGroupKey === maxGroupKey) ig.off('requestAppend', handleRequestAppend)
    }, 300)

-    btf.setLoading.add(item)
-    ig.on('renderComplete', completeFn)
+    btf.setLoading.add(container)
+    ig.on('renderComplete', handleRenderComplete)

    if (isButton) {
-      appendItem(1, 10)
+      appendItems(1, firstLimit, true)
    } else {
-      ig.on('requestAppend', requestAppendFn)
+      ig.on('requestAppend', handleRequestAppend)
      ig.renderItems()
    }

-    btf.addGlobalFn('pjaxSendOnce', () => { ig.destroy() })
+    btf.addGlobalFn('pjaxSendOnce', () => ig.destroy())
  }

-  const addJustifiedGallery = async (ele, tabs = false) => {
-    if (!ele.length) return
-    const init = async () => {
-      for (const item of ele) {
-        if (btf.isHidden(item) || item.classList.contains('loaded')) continue
+  const addJustifiedGallery = async (elements, tabs = false) => {
+    if (!elements.length) return
+
+    const initGallery = async () => {
+      for (const element of elements) {
+        if (btf.isHidden(element) || element.classList.contains('loaded')) continue
+
+        const config = {
+          isButton: element.getAttribute('data-button') === 'true',
+          limit: parseInt(element.getAttribute('data-limit'), 10),
+          firstLimit: parseInt(element.getAttribute('data-first'), 10),
+          tabs
+        }
+
+        const container = element.firstElementChild
+        const content = container.textContent
+        container.textContent = ''
+        element.classList.add('loaded')

-        const isButton = item.getAttribute('data-button') === 'true'
-        const children = item.firstElementChild
-        const text = children.textContent
-        children.textContent = ''
-        item.classList.add('loaded')
        try {
-          const content = item.getAttribute('data-type') === 'url' ? await fetchUrl(text) : JSON.parse(text)
-          runJustifiedGallery(children, content, isButton, tabs)
-        } catch (e) {
-          console.error('Gallery data parsing failed:', e)
+          const data = element.getAttribute('data-type') === 'url' ? await fetchUrl(content) : JSON.parse(content)
+          runJustifiedGallery(container, data, config)
+        } catch (error) {
+          console.error('Gallery data parsing failed:', error)
        }
      }
    }

    if (typeof InfiniteGrid === 'function') {
-      init()
+      await initGallery()
    } else {
-      await btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
-      init()
+      await btf.getScript(GLOBAL_CONFIG.infinitegrid.js)
+      await initGallery()
    }
  }