Merge branch 'dev'

feat(structured_data): 为网站首页添加结构化数据

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/

README.md

@@ -101,7 +101,7 @@ npm i hexo-theme-butterfly
 - [x] Chart.js
 - [x] Justified Gallery
 - [x] Lazyload images
-- [x] Instantpage/Pangu/Snackbar notification toast/PWA......
+- [x] Instantpage/Snackbar notification toast/PWA......
 
 ## ✨ Contributors
 

README_CN.md

@@ -101,7 +101,7 @@ theme: butterfly
 - [x] Chart.js 圖表顯示
 - [x] 照片牆
 - [x] 圖片懶加載
-- [x] Instantpage/Pangu/Snackbar彈窗/PWA......
+- [x] Instantpage/Snackbar彈窗/PWA......
 
 ## ✨ 貢獻者
 

_config.yml

@@ -13,6 +13,7 @@ nav:
   # Navigation bar logo image
   logo:
   display_title: true
+  display_post_title: true
   # Whether to fix navigation bar
   fixed: false
 
@@ -158,7 +159,7 @@ subtitle:
   # Choose: false/1/2/3
   # false - disable the function
   # 1 - hitokoto.cn
-  # 2 - yijuzhan.com
+  # 2 - https://api.aa1.cn/doc/yiyan.html
   # 3 - jinrishici.com
   source: false
   # If you close the typewriter effect, the subtitle will only show the first line of sub
@@ -254,12 +255,15 @@ noticeOutdate:
 # Footer Settings
 # --------------------------------------
 footer:
+  nav:
   owner:
     enable: true
-    since: 2019
+    since: 2025
-  custom_text:
   # Copyright of theme and framework
-  copyright: true
+  copyright:
+    enable: true
+    version: true
+  custom_text:
 
 # --------------------------------------
 # Aside Settings
@@ -399,6 +403,9 @@ rightside_item_order:
   # Default: toc,chat,comment
   show:
 
+# Animation for the bottom right config button
+rightside_config_animation: true
+
 # --------------------------------------
 # Global Settings
 # --------------------------------------
@@ -696,6 +703,12 @@ umami_analytics:
     # Umami Cloud (API key) / self-hosted Umami (token)
     token:
 
+# https://www.googletagmanager.com/
+google_tag_manager:
+  tag_id:
+  # optional
+  domain:
+
 # --------------------------------------
 # Advertisement
 # --------------------------------------
@@ -983,17 +996,12 @@ snackbar:
 # https://instant.page/
 instantpage: false
 
-# Pangu - Insert a space between Chinese character and English character
-# https://github.com/vinta/pangu.js
-pangu:
-  enable: false
-  # Specify the field to use pangu (site or post)
-  field: site
-
 # Lazyload
 # https://github.com/verlok/vanilla-lazyload
 lazyload:
   enable: false
+  # Use browser's native lazyload instead of vanilla-lazyload
+  native: false
   # Specify the field to use lazyload (site or post)
   field: site
   placeholder:
@@ -1023,6 +1031,10 @@ Open_Graph_meta:
     # fb_admins:
     # fb_app_id:
 
+# Structured Data
+# https://developers.google.com/search/docs/guides/intro-structured-data
+structured_data: true
+
 # Add the vendor prefixes to ensure compatibility
 css_prefix: true
 
@@ -1092,7 +1104,6 @@ CDN:
     # medium_zoom:
     # mermaid:
     # meting_js:
-    # pangu:
     # prismjs_autoloader:
     # prismjs_js:
     # prismjs_lineNumber_js:

languages/default.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: 'All articles on this blog are licensed under <a href="%s">%s</a> unless otherwise stated.'
   recommend: Related Articles
   edit: Edit
+  back_to_home: Back to Home
 
 search:
   title: Search

languages/en.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: 'All articles on this blog are licensed under <a href="%s">%s</a> unless otherwise stated.'
   recommend: Related Articles
   edit: Edit
+  back_to_home: Back to Home
 
 search:
   title: Search

languages/ja.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: 'このブログのすべての記事は、<a href="%s">%s</a> ライセンスの下で提供されており、特に明記されていない限り、すべての権利を留保します。転載時には出典を明記してください: <a href="%s">%s</a>。'
   recommend: 関連記事
   edit: 編集
+  back_to_home: ホームに戻る
 
 search:
   title: 検索

languages/ko.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: '이 블로그의 모든 글은 <a href="%s">%s</a> 라이선스를 따르며, 별도로 명시되지 않는 한 모든 권리를 보유합니다. 재배포 시 출처를 명시해 주세요: <a href="%s">%s</a>.'
   recommend: 관련 글
   edit: 편집
+  back_to_home: 홈으로 돌아가기
 
 search:
   title: 검색

languages/zh-CN.yml

@@ -33,6 +33,7 @@ post:
       <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来源 <a href="%s" target="_blank">%s</a>！'
   recommend: 相关推荐
   edit: 编辑
+  back_to_home: 返回首页
 
 search:
   title: 搜索

languages/zh-HK.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: '除特別聲明外，本博客所有文章均採用<a href="%s">%s</a> 授權協議。轉載請註明出處：<a href="%s">%s</a>。'
   recommend: 相關文章
   edit: 編輯
+  back_to_home: 返回首頁
 
 search:
   title: 搜尋

languages/zh-TW.yml

@@ -32,6 +32,7 @@ post:
     copyright_content: '本部落格所有文章除特別聲明外，均採用<a href="%s" target="_blank">%s</a> 授權協議。轉載請註明來源 <a href="%s" target="_blank">%s</a>！'
   recommend: 相關推薦
   edit: 編輯
+  back_to_home: 返回首頁
 
 search:
   title: 搜尋

layout/includes/additional-js.pug

@@ -11,15 +11,12 @@ div
   if theme.instantpage
     script(src=url_for(theme.asset.instantpage), type='module')
 
-  if theme.lazyload.enable
+  if theme.lazyload.enable && !theme.lazyload.native
     script(src=url_for(theme.asset.lazyload))
 
   if theme.snackbar.enable
     script(src=url_for(theme.asset.snackbar))
 
-  if theme.pangu.enable
-    != partial("includes/third-party/pangu.pug", {}, { cache: true })
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })
@@ -36,7 +33,7 @@ div
   != partial("includes/third-party/prismjs", {}, { cache: true })
 
   if theme.aside.enable && theme.aside.card_newest_comments.enable
-    if theme.pjax.enable || (!is_post() && page.aside !== false)
+    if theme.pjax.enable || (globalPageType !== 'post' && page.aside !== false)
       != partial("includes/third-party/newest-comments/index", {}, { cache: true })
 
   != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
@@ -58,3 +55,7 @@ div
     script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
 
   != partial('includes/third-party/search/index', {}, { cache: true })
+
+  if theme.google_tag_manager && theme.google_tag_manager.tag_id
+    noscript
+      iframe(src=`${theme.google_tag_manager.domain ? theme.google_tag_manager.domain : 'https://www.googletagmanager.com'}/ns.html?id=${theme.google_tag_manager.tag_id}` height="0" width="0" style="display:none;visibility:hidden")

layout/includes/footer.pug

@@ -1,18 +1,39 @@
-#footer-wrap
+- const { nav, owner, copyright, custom_text } = theme.footer
-  if theme.footer.owner.enable
+
+if nav
+  .footer-flex
+    for block in nav
+      .footer-flex-items(style=`${ block.width ? 'flex-grow:' + block.width : '' }`)
+        for blockItem in block.content
+          .footer-flex-item
+            .footer-flex-title= blockItem.title
+            .footer-flex-content
+              for subitem in blockItem.item
+                if subitem.html
+                  div!= subitem.html
+                else if subitem.url
+                  a(href=url_for(subitem.url), target='_blank' title=subitem.title)= subitem.title
+                else if subitem.title
+                  div!= subitem.title
+.footer-other
+  .footer-copyright
+    if owner.enable
       - const currentYear = new Date().getFullYear()
-    - const sinceYear = theme.footer.owner.since
+      - const sinceYear = owner.since
-    .copyright
+      span.copyright
         if sinceYear && sinceYear != currentYear
           != `©${sinceYear} - ${currentYear} By ${config.author}`
         else
           != `©${currentYear} By ${config.author}`
-  if theme.footer.copyright
+    if copyright.enable
-    .framework-info
+      - const v = copyright.version ? getVersion() : false
+      span.framework-info
+        if owner.enable && nav
+          span.footer-separator |
         span= _p('footer.framework') + ' '
-      a(href='https://hexo.io')= 'Hexo'
+        a(href='https://hexo.io')= `Hexo${ v ? ' ' + v.hexo : '' }`
         span.footer-separator |
         span= _p('footer.theme') + ' '
-      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
+        a(href='https://github.com/jerryc127/hexo-theme-butterfly')= `Butterfly${ v ? ' ' + v.theme : '' }`
   if theme.footer.custom_text
     .footer_custom_text!= theme.footer.custom_text

layout/includes/head.pug

@@ -1,12 +1,18 @@
 - var pageTitle
-- is_archive() ? page.title = findArchivesTitle(page, theme.menu, date) : ''
+- globalPageType === 'archive' ? page.title = findArchivesTitle(page, theme.menu, date) : ''
-- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
+case globalPageType
-- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
+  when 'tag'
-- else if (is_current('/404.html', [strict])) pageTitle = _p('error404')
+    - pageTitle = _p('page.tag') + ': ' + page.tag
-- else pageTitle = page.title || config.title || ''
+  when 'category'
+    - pageTitle = _p('page.category') + ': ' + page.category
+  when '404'
+    - pageTitle = _p('error404')
+  default
+    - pageTitle = page.title || config.title || ''
+
 
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
-- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
+- var tabTitle = globalPageType === 'home' || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
 - var themeColorLight = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_light || '#ffffff'
@@ -25,6 +31,9 @@ meta(name="theme-color" content=themeColor)
 //- Open_Graph
 include ./head/Open_Graph.pug
 
+//- Structured Data
+include ./head/structured_data.pug
+
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex(null,config.pretty_urls.trailing_index,config.pretty_urls.trailing_html))
 

layout/includes/head/Open_Graph.pug

@@ -2,7 +2,7 @@ if theme.Open_Graph_meta.enable
   -
     const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
     let ogOption = Object.assign({
-      type: is_post() ? 'article' : 'website',
+      type: globalPageType === 'post' ? 'article' : 'website',
       image: coverVal ? full_url_for(coverVal) : '',
       fb_admins: theme.facebook_comments.user_id || '',
       fb_app_id: theme.facebook_comments.app_id || '',

layout/includes/head/analytics.pug

@@ -32,3 +32,14 @@ if theme.microsoft_clarity
         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "!{theme.microsoft_clarity}");
+
+if (theme.google_tag_manager && theme.google_tag_manager.tag_id)
+  script.
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    "!{theme.google_tag_manager.domain ? theme.google_tag_manager.domain : 'https://www.googletagmanager.com'}/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','!{theme.google_tag_manager.tag_id}');
+    btf.addGlobalFn('pjaxComplete', () => {
+      dataLayer.push({'event': 'pjaxComplete', 'page_title': document.title, 'page_location': location.href, 'page_path': window.location.pathname})
+    }, 'google_tag_manager')

layout/includes/head/config.pug

@@ -116,7 +116,7 @@ script.
       buttonText: '!{_p("load_more")}'
     },
     isPhotoFigcaption: !{theme.photofigcaption},
-    islazyload: !{theme.lazyload.enable},
+    islazyloadPlugin: !{theme.lazyload.enable && !theme.lazyload.native},
     isAnchor: !{theme.anchor.auto_update || false},
     percent: {
       toc: !{theme.toc.scroll_percent},

layout/includes/head/config_site.pug

@@ -9,8 +9,8 @@
   var showToc = false
   if (theme.aside.enable && page.aside !== false) {
     let tocEnable = false
-    if (is_post() && theme.toc.post) tocEnable = true
+    if (globalPageType === 'post' && theme.toc.post) tocEnable = true
-    else if (is_page() && theme.toc.page) tocEnable = true
+    else if (globalPageType === 'page' && theme.toc.page) tocEnable = true
     const pageToc = typeof page.toc === 'boolean' ? page.toc : tocEnable
     showToc = pageToc && (toc(page.content) !== '' || page.encrypt === true)
   }
@@ -19,9 +19,7 @@
 script#config-diff.
   var GLOBAL_CONFIG_SITE = {
     title: '!{titleVal}',
-    isPost: !{is_post()},
-    isHome: !{is_home()},
     isHighlightShrink: !{isHighlightShrink},
     isToc: !{showToc},
-    isShuoshuo: !{page.type == 'shuoshuo'}
+    pageType: '!{page.type == 'shuoshuo' ? 'shuoshuo' : globalPageType}'
   }

layout/includes/head/structured_data.pug

@@ -0,0 +1,55 @@
+if theme.structured_data
+  if page.layout === 'post'
+    -
+      // https://developers.google.com/search/docs/appearance/structured-data/article
+
+      const title = page.title
+      const url = page.permalink
+      const imageVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
+      const image = imageVal ? full_url_for(imageVal) : ''
+      const datePublished = page.date.toISOString()
+      const dateModified = (page.updated || page.date).toISOString()
+      const author = page.copyright_author || config.author
+      const authorHrefVal = page.copyright_author_href || theme.post_copyright.author_href || config.url
+      const authorHref = full_url_for(authorHrefVal)
+
+      const jsonLd = {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        "headline": title,
+        "url": url,
+        "image": image,
+        "datePublished": datePublished,
+        "dateModified": dateModified,
+        "author": [{
+          "@type": "Person",
+          "name": author,
+          "url": authorHref
+        }]
+      }
+
+      jsonLdScript = JSON.stringify(jsonLd, null, 2)
+    -
+
+  else if is_home() && (!page.current || page.current === 1)
+    -
+      // https://developers.google.com/search/docs/appearance/site-names#website
+
+      const baseUrl = config.url;
+      const currentPath = url_for('/');
+      const isRootOrSubdomain = currentPath.split('/').filter(Boolean).length === 0;
+
+      if (isRootOrSubdomain) {
+        const jsonLd = {
+          "@context": "https://schema.org",
+          "@type": "WebSite",
+          "name": config.title,
+          "url": full_url_for('/'),
+        }
+
+        jsonLdScript = JSON.stringify(jsonLd, null, 2)
+      }
+    -
+
+  script(type="application/ld+json").
+    !{jsonLdScript}

layout/includes/header/index.pug

@@ -6,33 +6,32 @@
   var bg_img = ''
 
 if !theme.disable_top_img && page.top_img !== false
-  if is_post()
+  case globalPageType
+    when 'post'
       - top_img = page.top_img || page.cover || theme.default_top_img
-  else if is_page()
+    when 'page'
       - top_img = page.top_img || theme.default_top_img
-  else if is_tag()
+    when 'tag'
-    - top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
+      - top_img = theme.tag_per_img && theme.tag_per_img[page.tag] || returnTopImg(theme.tag_img)
-    - top_img = top_img || returnTopImg(theme.tag_img)
+    when 'category'
-  else if is_category()
+      - top_img = theme.category_per_img && theme.category_per_img[page.category] || returnTopImg(theme.category_img)
-    - top_img = theme.category_per_img && theme.category_per_img[page.category]
+    when 'home'
-    - top_img = top_img || returnTopImg(theme.category_img)
-  else if is_home()
       - top_img = returnTopImg(theme.index_img)
-  else if is_archive()
+    when 'archive'
       - top_img = returnTopImg(theme.archive_img)
-  else
+    default
       - top_img = page.top_img || theme.default_top_img
 
   if top_img !== false
     - bg_img = getBgPath(top_img)
-    - headerClassName = is_home() ? 'full_page' : is_post() ? 'post-bg' : 'not-home-page'
+    - headerClassName = globalPageType === 'home' ? 'full_page' : globalPageType === 'post' ? 'post-bg' : 'not-home-page'
 
 header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
   include ./nav.pug
   if top_img !== false
-    if is_post()
+    if globalPageType === 'post'
       include ./post-info.pug
-    else if is_home()
+    else if globalPageType === 'home'
       #site-info
         h1#site-title=config.title
         if theme.subtitle.enable
@@ -48,6 +47,6 @@ header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
       #page-site-info
         h1#site-title=page.title || page.tag || page.category
   else
-    //- improvement seo
+    //- improve seo
-    if !is_post()
+    if globalPageType !== 'post'
       h1.title-seo=page.title || page.tag || page.category || config.title

layout/includes/header/nav.pug

@@ -5,9 +5,13 @@ nav#nav
         img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
       if theme.nav.display_title
         span.site-name=config.title
-    if is_post()
+    if globalPageType === 'post' && theme.nav.display_post_title
       a.nav-page-title(href=url_for('/'))
         span.site-name=(page.title || config.title)
+        span.site-name
+          i.fa-solid.fa-circle-arrow-left
+          span= '  ' + _p('post.back_to_home')
+
   #menus
     if theme.search.use
       #search-button

layout/includes/layout.pug

@@ -1,7 +1,8 @@
+- var globalPageType = getPageType(page, is_home)
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
-- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
+- page.aside = globalPageType === 'archive' ? theme.aside.display.archive: globalPageType === 'category' ? theme.aside.display.category : globalPageType === 'tag' ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
-- var pageType = is_post() ? 'post' : 'page'
+- var pageType = globalPageType === 'post' ? 'post' : 'page'
 - pageType = page.type ? pageType + ' type-' + page.type : pageType
 
 doctype html

layout/includes/mixins/indexPostUI.pug

@@ -20,7 +20,7 @@ mixin indexPostUI()
                   div.post-bg(style=`background: ${post_cover}`)
           .recent-post-info(class=no_cover)
             a.article-title(href=url_for(link) title=title)
-              if is_home() && (article.top || article.sticky > 0)
+              if globalPageType === 'home' && (article.top || article.sticky > 0)
                 i.fas.fa-thumbtack.sticky
               = title
             .article-meta-wrap

layout/includes/pagination.pug

@@ -1,4 +1,5 @@
--
+if page.total !== 1
+  -
     var options = {
       prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
       next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
@@ -6,8 +7,8 @@
       escape: false
     }
 
-if is_post()
+  if globalPageType === 'post'
-  - let paginationOrder = theme.post_pagination === 1 ? { prev: page.prev, next: page.next } : { prev: page.next, next: page.prev }
+    - let paginationOrder = theme.post_pagination === 2 ? { prev: page.prev, next: page.next } : { prev: page.next, next: page.prev }
 
     nav#pagination.pagination-post
       each direction, key in paginationOrder
@@ -29,9 +30,9 @@ if is_post()
               if getPostDesc
                 .info-2
                   .info-item-1!=getPostDesc
-else
+  else
     nav#pagination
       .pagination
-      if is_home()
+        if globalPageType === 'home'
           - options.format = 'page/%d/#content-inner'
         !=paginator(options)

layout/includes/rightside.pug

@@ -1,9 +1,10 @@
 - const { readmode, translate, darkmode, aside, chat } = theme
+
 mixin rightsideItem(array)
   each item in array
     case item
       when 'readmode'
-        if is_post() && readmode
+        if globalPageType === 'post' && readmode
           button#readmode(type="button" title=_p('rightside.readmode_title'))
             i.fas.fa-book-open
       when 'translate'
@@ -23,37 +24,29 @@ mixin rightsideItem(array)
             i.fas.fa-list-ul
       when 'chat'
         if chat.rightside_button && chat.use
-          button#chat-btn(type="button" title=_p("rightside.chat"))
+          button#chat-btn(type="button" title=_p("rightside.chat") style="display:none")
             i.fas.fa-message
       when 'comment'
         if commentsJsLoad
           a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
             i.fas.fa-comments
 
+- const { enable, hide, show } = theme.rightside_item_order
+- const hideArray = enable && hide ? hide.split(',') : ['readmode','translate','darkmode','hideAside']
+- const showArray = enable && show ? show.split(',') : ['toc','chat','comment']
+- const needCogBtn = (enable && hide) || (!enable && ((globalPageType === 'post' && (readmode || translate.enable || (darkmode.enable && darkmode.button))) || (translate.enable || (darkmode.enable && darkmode.button))))
+
 #rightside
-  - const { enable, hide, show } = theme.rightside_item_order
-  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
-  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
-
-  
   #rightside-config-hide
-    if hideArray
+    if hideArray.length
       +rightsideItem(hideArray)
-  #rightside-config-show
-    if enable
-      if hide
-        button#rightside-config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog.fa-spin
-    else
-      if is_post()
-        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
-          button#rightside-config(type="button" title=_p("rightside.setting"))
-            i.fas.fa-cog.fa-spin
-      else if translate.enable || (darkmode.enable && darkmode.button)
-        button#rightside-config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog.fa-spin
 
-    if showArray
+  #rightside-config-show
+    if needCogBtn
+      button#rightside-config(type="button" title=_p("rightside.setting"))
+        i.fas.fa-cog(class=theme.rightside_config_animation ? 'fa-spin' : '')
+
+    if showArray.length
       +rightsideItem(showArray)
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))

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

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

@@ -1,17 +1,46 @@
 script.
-  (() => {
+  (() = {
     const abcjsInit = () => {
-      const abcjsFn = () => setTimeout(() => {
+      const abcjsFn = () => {
-        document.querySelectorAll(".abc-music-sheet").forEach(ele => {
+        setTimeout(() => {
-          if (ele.children.length > 0) return
+          const sheets = document.querySelectorAll(".abc-music-sheet")
-          ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
+          for (let i = 0; i < sheets.length; i++) {
-        })
+            const ele = sheets[i]
-      }, 100)
+            if (ele.children.length > 0) continue
 
-      typeof ABCJS === 'object' ? abcjsFn()
+            // Parse parameters from data-params attribute
-        : btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+            let params = {}
+            const dp = ele.getAttribute("data-params")
+            if (dp) {
+              try {
+                params = JSON.parse(dp)
+              } catch (e) {
+                console.error("Failed to parse data-params:", e)
+              }
             }
 
-    window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
+            // Merge parsed parameters with the responsive option
-    btf.addGlobalFn('encrypt', abcjsInit, 'abcjs')
+            // Ensures params content appears before responsive
+            const options = { ...params, responsive: "resize" }
+
+            // Render the music score using ABCJS.renderAbc
+            ABCJS.renderAbc(ele, ele.innerHTML, options)
+          }
+        }, 100)
+      }
+
+      if (typeof ABCJS === "object") {
+        abcjsFn()
+      } else {
+        btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn)
+      }
+    }
+
+    if (window.pjax) {
+      abcjsInit()
+    } else {
+      window.addEventListener("load", abcjsInit)
+    }
+
+    btf.addGlobalFn("encrypt", abcjsInit, "abcjs")
   })()

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

@@ -1,6 +1,3 @@
 if theme.abcjs.enable
-  if theme.abcjs.per_page
+  if theme.abcjs.per_page && (['post','page'].includes(globalPageType)) || page.abcjs
-    if is_post() || is_page()
-      include ./abcjs.pug
-  else if page.abcjs
     include ./abcjs.pug

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

@@ -1,6 +1,12 @@
 //- https://chatra.io/help/api/
 script.
   (() => {
+    window.ChatraID = '#{theme.chatra.id}'
+    window.Chatra = window.Chatra || function() {
+      (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}
 
@@ -17,26 +23,16 @@ script.
 
         window.ChatraSetup = { startHidden: true }
       
-      window.chatBtnFn = () => {
+        window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
-        document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
+
-      }
+        document.getElementById('chat-btn').style.display = 'block'
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => Chatra('hide'),
           show: () => Chatra('show')
         }
       }
-
+    })
-    (function(d, w, c) {
-      w.ChatraID = '#{theme.chatra.id}'
-      var s = d.createElement('script')
-      w[c] = w[c] || function() {
-        (w[c].q = w[c].q || []).push(arguments)
-      }
-      s.async = true
-      s.src = 'https://call.chatra.io/chatra.js'
-      if (d.head) d.head.appendChild(s)
-    })(document, window, 'Chatra')
   })()
 
 

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

@@ -1,16 +1,9 @@
 script.
   (() => {
-    window.$crisp = [];
+    window.$crisp = ['safe', true]
-    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"
-    (function () {
-      d = document;
-      s = d.createElement("script");
-      s.src = "https://client.crisp.chat/l.js";
-      s.async = 1;
-      d.getElementsByTagName("head")[0].appendChild(s);
-    })();
-    $crisp.push(["safe", true])
 
+    btf.getScript('https://client.crisp.chat/l.js').then(() => {
       const isChatBtn = !{theme.chat.rightside_button}
       const isChatHideShow = !{theme.chat.button_hide_show}
 
@@ -28,10 +21,12 @@ script.
 
         window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
 
+        document.getElementById('chat-btn').style.display = 'block'
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => $crisp.push(["do", "chat:hide"]),
           show: () => $crisp.push(["do", "chat:show"])
         }
       }
+    })
   })()

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

@@ -1,6 +1,6 @@
-script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 script.
   (() => {
+    btf.getScript('//code.tidio.co/!{theme.tidio.public_key}.js').then(() => {
       const isChatBtn = !{theme.chat.rightside_button}
       const isChatHideShow = !{theme.chat.button_hide_show}
 
@@ -31,11 +31,15 @@ script.
           if (!window.tidioChatApi) return
           isShow ? close() : open()
         }
+
+        document.getElementById('chat-btn').style.display = 'block'
+
       } else if (isChatHideShow) {
         window.chatBtn = {
           hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
           show: () => window.tidioChatApi && window.tidioChatApi.show()
         }
       }
+    })
   })()
 

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

@@ -5,7 +5,7 @@ script.
   (() => {
     let artalkItem = null
     const option = !{JSON.stringify(option)}
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
 
     const destroyArtalk = () => {
       if (artalkItem) {

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

@@ -4,7 +4,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
 
     const disqusReset = conf => {
       window.DISQUS && window.DISQUS.reset({
@@ -72,7 +72,7 @@ script.
       if (!{lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
       else {
         loadDisqus()
-        !{ count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : '' }
+        !{ count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
       }
     } else {
       window.loadOtherComment = loadDisqus

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

@@ -3,7 +3,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
     const dqOption = !{JSON.stringify(dqOption)}
 
     const destroyDisqusjs = () => {
@@ -79,7 +79,7 @@ script.
       if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs-wrap'), loadDisqusjs)
       else {
         loadDisqusjs()
-        !{ theme.comments.count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : '' }
+        !{ theme.comments.count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
       }
     } else {
       window.loadOtherComment = loadDisqusjs

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

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

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

@@ -5,7 +5,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const getGiscusTheme = theme => theme === 'dark' ? '!{dark_theme}' : '!{light_theme}'

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

@@ -2,7 +2,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const commentCount = n => {

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

@@ -2,7 +2,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
 
     const loadLivere = (el, path) => {
       window.livereOptions = {

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

@@ -2,7 +2,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const loadScript = src => {

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

@@ -3,7 +3,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const getCount = () => {
@@ -33,7 +33,7 @@ script.
         path: isShuoshuo ? path : (option && option.path) || path
       })
 
-      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
+      !{count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : ''}
 
       isShuoshuo && (window.shuoshuoComment.destroyTwikoo = () => {
         if (el.children.length) {

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

@@ -5,7 +5,7 @@
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
     const getUtterancesTheme = theme => theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
 

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

@@ -7,7 +7,7 @@ if site.data.valine
 
 script.
   (() => {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const initValine = (el, path) => {

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

@@ -4,7 +4,7 @@
 script.
   (() => {
     let initFn = window.walineFn || null
-    const isShuoshuo = GLOBAL_CONFIG_SITE.isShuoshuo
+    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
     const option = !{JSON.stringify(option)}
 
     const destroyWaline = ele => ele.destroy()

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

@@ -2,9 +2,6 @@
 
 script.
   (() => {
-    const $chartjs = document.querySelectorAll('#article-container .chartjs-container')
-    if ($chartjs.length === 0) return
-
     const applyThemeDefaultsConfig = theme => {
       if (theme === 'dark-mode') {
         Chart.defaults.color = "!{fontColor.dark}"
@@ -35,10 +32,10 @@ script.
       })
     }
 
-    const runChartJS = () => {
+    const runChartJS = ele => {
       window.loadChartJS = true
 
-      Array.from($chartjs).forEach((item, index) => {
+      Array.from(ele).forEach((item, index) => {
         const chartSrc = item.firstElementChild
         const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
         const width = item.getAttribute('data-width')
@@ -80,12 +77,15 @@ script.
     }
 
     const loadChartJS = () => {
-      window.loadChartJS ? runChartJS() : btf.getScript('!{url_for(theme.asset.chartjs)}').then(runChartJS)
+      const chartJSEle = document.querySelectorAll('#article-container .chartjs-container')
+      if (chartJSEle.length === 0) return
+
+      window.loadChartJS ? runChartJS(chartJSEle) : btf.getScript('!{url_for(theme.asset.chartjs)}').then(() => runChartJS(chartJSEle))
     }
 
     // Listen for theme change events
-    btf.addGlobalFn('themeChange', runChartJS, 'chartjs')
+    btf.addGlobalFn('themeChange', loadChartJS, 'chartjs')
-    btf.addGlobalFn('encrypt', runChartJS, 'chartjs')
+    btf.addGlobalFn('encrypt', loadChartJS, 'chartjs')
 
     window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
   })()

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

@@ -1,10 +1,10 @@
 case theme.math.use
   when 'mathjax'
-    if (theme.math.per_page && (is_post() || is_page())) || page.mathjax
+    if (theme.math.per_page && (['post','page'].includes(globalPageType))) || page.mathjax
       include ./mathjax.pug
 
   when 'katex'
-    if (theme.math.per_page && (is_post() || is_page())) || page.katex
+    if (theme.math.per_page && (['post','page'].includes(globalPageType))) || page.katex
       include ./katex.pug
 
 if theme.mermaid.enable

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,7 +42,10 @@ 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 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,

layout/includes/third-party/newest-comments/common.pug

@@ -23,8 +23,9 @@ script.
           result += '<div class="aside-list-item">'
 
           if (!{theme.aside.card_newest_comments.avatar} && array[i].avatar) {
-            const imgAttr = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+            const imgAttr = '!{theme.lazyload.enable && !theme.lazyload.native ? "data-lazy-src" : "src"}'
-            result += `<a href="${array[i].url}" class="thumbnail"><img ${imgAttr}="${array[i].avatar}" alt="${array[i].nick}"></a>`
+            const lazyloadNative = '!{theme.lazyload.enable && theme.lazyload.native ? "loading=\"lazy\"" : ""}'
+            result += `<a href="${array[i].url}" class="thumbnail"><img ${imgAttr}="${array[i].avatar}" alt="${array[i].nick}" ${lazyloadNative}></a>`
           }
 
           result += `<div class="content">

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 => {

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

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

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 => {

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 => {

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 => {

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 {

layout/includes/third-party/pangu.pug

@@ -1,23 +0,0 @@
-script.
-  (() => {
-    const panguFn = () => {
-      if (typeof pangu === 'object') pangu.autoSpacingPage()
-      else {
-        btf.getScript('!{url_for(theme.asset.pangu)}')
-          .then(() => {
-            pangu.autoSpacingPage()
-          })
-      }
-    }
-
-    const panguInit = () => {
-      if (!{theme.pangu.field === 'post'}){
-        GLOBAL_CONFIG_SITE.isPost && panguFn()
-      } else {
-        panguFn()
-      }
-    }
-
-    btf.addGlobalFn('pjaxComplete', panguInit, 'pangu')
-    document.addEventListener('DOMContentLoaded', panguInit)
-  })()

layout/includes/third-party/pjax.pug

@@ -7,10 +7,12 @@ if theme.pjax.exclude
 
 - let choose = theme.comments.use
 if choose
-  if theme.Open_Graph_meta.enable && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
+  if choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus')
-    - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
-  if choose.includes('Utterances') || choose.includes('Giscus')
     - pjaxSelectors.unshift('link[rel="canonical"]')
+    if theme.Open_Graph_meta.enable
+      - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]', 'meta[property="og:description"]')
+    else
+      - pjaxSelectors.unshift('meta[name="description"]')
 
 script(src=url_for(theme.asset.pjax))
 script.
@@ -57,7 +59,10 @@ script.
 
     document.addEventListener('pjax:error', e => {
       if (e.request.status === 404) {
-        pjax.loadUrl('!{url_for("/404.html")}')
+        const usePjax = !{theme.pjax && theme.pjax.enable}
+        !{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
       }
     })
   })()

layout/includes/third-party/share/addtoany.pug

@@ -1,6 +1,6 @@
 .addtoany
   .a2a_kit.a2a_kit_size_32.a2a_default_style
-    - let addtoanyItem = theme.addtoany.item.split(',')
+    - let addtoanyItem = theme.share.addtoany.item.split(',')
     each name in addtoanyItem
       a(class="a2a_button_" + name)
 

layout/includes/third-party/subtitle.pug

@@ -1,4 +1,4 @@
-- const { effect,source,sub,typed_option } = theme.subtitle
+- const { effect, source, sub, typed_option } = theme.subtitle
 - let subContent = sub || new Array()
 
 script.
@@ -22,6 +22,26 @@ script.
       } else {
         subtitleType()
       }
+    },
+    processSubtitle: (content, extraContents = []) => {
+      if (!{effect}) {
+        const sub = !{JSON.stringify(subContent)}.slice()
+
+        if (extraContents.length > 0) {
+          sub.unshift(...extraContents)
+        }
+
+        if (typeof content === 'string') {
+          sub.unshift(content)
+        } else if (Array.isArray(content)) {
+          sub.unshift(...content)
+        }
+
+        sub.length > 0 && typedJSFn.init(sub)
+      } else {
+        document.getElementById('subtitle').textContent = typeof content === 'string' ? content :
+          (Array.isArray(content) && content.length > 0 ? content[0] : '')
+      }
     }
   }
   btf.addGlobalFn('pjaxSendOnce', () => { typed.destroy() }, 'typedDestroy')
@@ -33,14 +53,12 @@ case source
         fetch('https://v1.hitokoto.cn')
           .then(response => response.json())
           .then(data => {
-            if (!{effect}) {
             const from = '出自 ' + data.from
-              const sub = !{JSON.stringify(subContent)}
+            typedJSFn.processSubtitle(data.hitokoto, [from])
-              sub.unshift(data.hitokoto, from)
+          })
-              typedJSFn.init(sub)
+          .catch(err => {
-            } else {
+            console.error('Failed to get the Hitokoto API:', err)
-              document.getElementById('subtitle').textContent = data.hitokoto
+            typedJSFn.processSubtitle(!{JSON.stringify(subContent)})
-            }
           })
       }
       typedJSFn.run(subtitleType)
@@ -48,46 +66,48 @@ case source
   when 2
     script.
       function subtitleType () {
-        btf.getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
+        fetch('https://v.api.aa1.cn/api/yiyan/index.php')
-          const con = str[0]
+          .then(response => response.text())
-          if (!{effect}) {
+          .then(data => {
-            const from = '出自 ' + str[1]
+            const reg = /<p>(.*?)<\/p>/g
-            const sub = !{JSON.stringify(subContent)}
+            const result = reg.exec(data)
-            sub.unshift(con, from)
+            if (result && result[1]) {
-            typedJSFn.init(sub)
+              typedJSFn.processSubtitle(result[1])
             } else {
-            document.getElementById('subtitle').textContent = con
+              throw new Error('Failed to parse the return value of the Yiyan API')
             }
           })
+          .catch(err => {
+            console.error('Failed to get the Yiyan API:', err)
+            typedJSFn.processSubtitle(!{JSON.stringify(subContent.length)})
+          })
       }
       typedJSFn.run(subtitleType)
 
   when 3
     script.
       function subtitleType () {
-        btf.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
+        btf.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js')
-          jinrishici.load(result =>{
+          .then(() => {
-            if (!{effect}) {
+            jinrishici.load(result => {
-              const sub = !{JSON.stringify(subContent)}
+              if (result && result.data && result.data.content) {
-              const content = result.data.content
+                typedJSFn.processSubtitle(result.data.content)
-              sub.unshift(content)
-              typedJSFn.init(sub)
               } else {
-              document.getElementById('subtitle').textContent = result.data.content
+                throw new Error('Failed to parse the return value of Jinrishici API')
               }
             })
           })
+          .catch(err => {
+            console.error('Failed to get the Jinrishici API:', err)
+            typedJSFn.processSubtitle(!{JSON.stringify(subContent.length)})
+          })
       }
       typedJSFn.run(subtitleType)
 
   default
-    - subContent = subContent.length ? subContent : new Array(config.subtitle)
+    if subContent.length > 0
       script.
         function subtitleType () {
-        if (!{effect}) {
+          typedJSFn.processSubtitle(!{JSON.stringify(subContent)})
-          typedJSFn.init(!{JSON.stringify(subContent)})
-        } else {
-          document.getElementById("subtitle").textContent = !{JSON.stringify(subContent[0])}
-        }
         }
         typedJSFn.run(subtitleType)

layout/includes/third-party/umami_analytics.pug

@@ -35,7 +35,7 @@ script.
 
     const insertData = async () => {
       try {
-        if (GLOBAL_CONFIG_SITE.isPost && config.page_pv) {
+        if (GLOBAL_CONFIG_SITE.pageType === 'post' && config.page_pv) {
           const pagePV = document.getElementById('umamiPV')
           if (pagePV) {
             const data = await getData(true)

layout/includes/widget/card_post_toc.pug

@@ -12,4 +12,3 @@
     .toc-content.toc-div-class(class=tocExpandClass style="display:none")!=toc(page.origin, {list_number: tocNumber})
   else
     .toc-content(class=tocExpandClass)!=toc(page.content, {list_number: tocNumber})
-      

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-name= `${_p('aside.card_webinfo.site_wordcount')} :`
-          .item-count=totalcount(site)
+          .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
-

layout/includes/widget/index.pug

@@ -1,6 +1,6 @@
 #aside-content.aside-content
   //- post
-  if is_post()
+  if globalPageType === 'post'
     - const tocStyle = page.toc_style_simple
     - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
     if showToc && tocStyleVal

layout/post.pug

@@ -33,4 +33,3 @@ block content
     if page.comments !== false && theme.comments.use
       - var commentsJsLoad = true
       !=partial('includes/third-party/comments/index', {}, {cache: true})
-      

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.2.2",
+  "version": "5.4.1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -15,16 +15,18 @@
     "hexo-theme-butterfly"
   ],
   "repository": {
-    "type" : "git",
+    "type": "git",
-    "url" : "https://github.com/jerryc127/hexo-theme-butterfly.git"
+    "url": "https://github.com/jerryc127/hexo-theme-butterfly.git"
   },
   "bugs": {
     "url": "https://github.com/jerryc127/hexo-theme-butterfly/issues",
     "email": "my@crazywong.com"
   },
   "dependencies": {
+    "hexo-renderer-pug": "^3.0.0",
     "hexo-renderer-stylus": "^3.0.1",
-    "hexo-renderer-pug": "^3.0.0"
+    "hexo-util": "^3.3.0",
+    "moment-timezone": "^0.5.48"
   },
   "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.4.4
+  version: 6.5.1
 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.12.0
+  version: 5.30.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.5.0
 clickShowText:
   name: butterfly-extsrc
   file: dist/click-show-text.min.js
@@ -57,21 +57,21 @@ click_heart:
 disqusjs:
   name: disqusjs
   file: dist/browser/disqusjs.es2015.umd.min.js
-  version: 3.0.2
+  version: 3.1.0
 disqusjs_css:
   name: disqusjs
   file: dist/browser/styles/disqusjs.css
-  version: 3.0.2
+  version: 3.1.0
 docsearch_css:
   name: '@docsearch/css'
   other_name: docsearch-css
   file: dist/style.css
-  version: 3.6.3
+  version: 3.9.0
 docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 3.6.3
+  version: 3.9.0
 egjs_infinitegrid:
   name: '@egjs/infinitegrid'
   other_name: egjs-infinitegrid
@@ -80,12 +80,12 @@ egjs_infinitegrid:
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 5.0.36
+  version: 6.0.7
   other_name: fancyapps-ui
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 5.0.36
+  version: 6.0.7
   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: 6.6.0
+  version: 6.7.2
 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.79.0
 katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.11
+  version: 0.16.22
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.11
+  version: 0.16.22
 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.8.0
 meting_js:
   name: butterfly-extsrc
   file: metingjs/dist/Meting.min.js
@@ -152,10 +152,6 @@ pace_js:
   other_name: pace
   file: pace.min.js
   version: 1.2.4
-pangu:
-  name: pangu
-  file: dist/browser/pangu.min.js
-  version: 4.0.7
 pjax:
   name: pjax
   file: pjax.min.js
@@ -164,17 +160,17 @@ prismjs_autoloader:
   name: prismjs
   file: plugins/autoloader/prism-autoloader.min.js
   other_name: prism
-  version: 1.29.0
+  version: 1.30.0
 prismjs_js:
   name: prismjs
   file: prism.js
   other_name: prism
-  version: 1.29.0
+  version: 1.30.0
 prismjs_lineNumber_js:
   name: prismjs
   file: plugins/line-numbers/prism-line-numbers.min.js
   other_name: prism
-  version: 1.29.0
+  version: 1.30.0
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -194,7 +190,7 @@ snackbar_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.39
+  version: 1.6.44
 typed:
   name: typed.js
   file: dist/typed.umd.js
@@ -202,14 +198,14 @@ typed:
 valine:
   name: valine
   file: dist/Valine.min.js
-  version: 1.5.2
+  version: 1.5.3
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 3.3.2
+  version: 3.5.7
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 3.3.2
+  version: 3.5.7

scripts/common/postDesc.js

@@ -3,13 +3,14 @@
 const { stripHTML, truncate } = require('hexo-util')
 
 // Truncates the given content to a specified length, removing HTML tags and replacing newlines with spaces.
-const truncateContent = (content, length) => {
+const truncateContent = (content, length, encrypt = false) => {
-  return truncate(stripHTML(content), { length, separator: ' ' }).replace(/\n/g, ' ')
+  if (!content || encrypt) return ''
+  return truncate(stripHTML(content).replace(/\n/g, ' '), { length })
 }
 
 // Generates a post description based on the provided data and theme configuration.
 const postDesc = (data, hexo) => {
-  const { description, content, postDesc } = data
+  const { description, content, postDesc, encrypt } = data
 
   if (postDesc) return postDesc
 
@@ -23,10 +24,10 @@ const postDesc = (data, hexo) => {
       result = description
       break
     case 2:
-      result = description || truncateContent(content, length)
+      result = description || truncateContent(content, length, encrypt)
       break
     default:
-      result = truncateContent(content, length)
+      result = truncateContent(content, length, encrypt)
   }
 
   data.postDesc = result

scripts/events/merge_config.js

@@ -5,6 +5,7 @@ hexo.extend.filter.register('before_generate', () => {
     nav: {
       logo: null,
       display_title: true,
+      display_post_title: true,
       fixed: false
     },
     menu: null,
@@ -119,12 +120,16 @@ hexo.extend.filter.register('before_generate', () => {
       message_next: 'days since the last update, the content of the article may be outdated.'
     },
     footer: {
+      nav: null,
       owner: {
         enable: true,
-        since: 2019
+        since: 2024
       },
-      custom_text: null,
+      copyright: {
-      copyright: true
+        enable: true,
+        version: true
+      },
+      custom_text: null
     },
     aside: {
       enable: true,
@@ -223,6 +228,7 @@ hexo.extend.filter.register('before_generate', () => {
       hide: null,
       show: null
     },
+    rightside_config_animation: true,
     anchor: {
       auto_update: false,
       click_to_scroll: false
@@ -383,6 +389,10 @@ hexo.extend.filter.register('before_generate', () => {
     crisp: {
       website_id: null
     },
+    google_tag_manager: {
+      tag_id: null,
+      domain: 'https://www.googletagmanager.com'
+    },
     baidu_analytics: null,
     google_analytics: null,
     cloudflare_analytics: null,
@@ -545,12 +555,9 @@ hexo.extend.filter.register('before_generate', () => {
       bg_dark: '#1f1f1f'
     },
     instantpage: false,
-    pangu: {
-      enable: false,
-      field: 'site'
-    },
     lazyload: {
       enable: false,
+      native: false,
       field: 'site',
       placeholder: null,
       blur: false
@@ -567,6 +574,7 @@ hexo.extend.filter.register('before_generate', () => {
       enable: true,
       option: null
     },
+    structured_data: true,
     css_prefix: true,
     inject: {
       head: null,

scripts/filters/post_lazyload.js

@@ -9,6 +9,10 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 const lazyload = htmlContent => {
+  if (hexo.theme.config.lazyload.native) {
+    return htmlContent.replace(/(<img.*?)(>)/ig, '$1 loading=\'lazy\'$2')
+  }
+
   const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
   return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
 }

scripts/filters/random_cover.js

@@ -1,33 +1,57 @@
 /**
- * Butterfly
+ * Random cover for posts
- * ramdom cover
  */
 
 'use strict'
 
-hexo.extend.filter.register('before_post_render', data => {
+hexo.extend.generator.register('post', locals => {
-  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
+  const previousIndexes = []
+
+  const getRandomCover = defaultCover => {
+    if (!defaultCover) return false
+    if (!Array.isArray(defaultCover)) return defaultCover
+
+    const coverCount = defaultCover.length
+
+    if (coverCount === 1) {
+      return defaultCover[0]
+    }
+
+    const maxPreviousIndexes = coverCount === 2 ? 1 : (coverCount === 3 ? 2 : 3)
+
+    let index
+    do {
+      index = Math.floor(Math.random() * coverCount)
+    } while (previousIndexes.includes(index) && previousIndexes.length < coverCount)
+
+    previousIndexes.push(index)
+    if (previousIndexes.length > maxPreviousIndexes) {
+      previousIndexes.shift()
+    }
+
+    return defaultCover[index]
+  }
+
+  const handleImg = 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 (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) {
-    if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) data.cover = `${data.path}${coverVal}`
+        data.top_img = `${data.path}${topImg}`
+      }
+      if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) {
+        data.cover = `${data.path}${coverVal}`
       }
-
-  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)
-    return defaultCover[num]
     }
 
     if (coverVal === false) return data
 
     // If cover is not set, use random cover
     if (!coverVal) {
-    const randomCover = randomCoverFn()
+      const { cover: { default_cover: defaultCover } } = hexo.theme.config
+      const randomCover = getRandomCover(defaultCover)
       data.cover = randomCover
       coverVal = randomCover // update coverVal
     }
@@ -37,4 +61,22 @@ hexo.extend.filter.register('before_post_render', data => {
     }
 
     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]
+
+    post.__post = true
+
+    return {
+      data: handleImg(post),
+      layout: 'post',
+      path: post.path
+    }
+  })
 })

scripts/helpers/aside_archives.js

@@ -2,38 +2,74 @@
 
 hexo.extend.helper.register('aside_archives', function (options = {}) {
   const { config, page, site, url_for, _p } = this
-  const archiveDir = config.archive_dir
+  const { archive_dir: archiveDir, timezone, language } = config
-  const { timezone } = config
+
-  const lang = toMomentLocale(page.lang || page.language || config.language)
+  // Destructure and set default options with object destructuring
-  const type = options.type || 'monthly'
+  const {
-  const format = options.format || (type === 'monthly' ? 'MMMM YYYY' : 'YYYY')
+    type = 'monthly',
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
+    format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY',
-  const order = options.order || -1
+    show_count: showCount = true,
-  const limit = options.limit
+    order = -1,
-  const compareFunc = type === 'monthly'
+    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)
+  // Early return if no posts
-  if (!posts.length) return ''
+  if (!site.posts.length) return ''
 
-  const data = []
+  // Use reduce for more efficient data processing
-  posts.forEach(post => {
+  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
 
-    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 (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
+        })
+      }
+    } 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 => {
     let url = `${archiveDir}/${item.year}/`
     if (type === 'monthly') {
       url += item.month < 10 ? `0${item.month}/` : `${item.month}/`
@@ -41,37 +77,50 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
     return url_for(url)
   }
 
-  const len = data.length
+  // Limit results efficiently
-  const limitLength = limit === 0 ? len : Math.min(len, limit)
+  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++) {
+  // Use map for generating list items, join for performance
-    const item = data[i]
+  const archiveList = `
-    result += `
+    <ul class="card-archive-list">
+      ${limitedData
+        .map(
+          item => `
         <li class="card-archive-list-item">
-        <a class="card-archive-list-link" href="${link(item)}">
+          <a class="card-archive-list-link" href="${createArchiveLink(item)}">
-          <span class="card-archive-list-date">${options.transform ? options.transform(item.name) : item.name}</span>
+            <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 archiveHeader + archiveList
-  return result
 })
 
-const toMomentLocale = function (lang) {
+// Improved locale conversion function
-  if (!lang || lang === 'en' || lang === 'default') {
+const toMomentLocale = lang => {
-    return 'en'
+  if (!lang || ['en', 'default'].includes(lang)) return 'en'
-  }
   return lang.toLowerCase().replace('_', '-')
 }

scripts/helpers/page.js

@@ -81,7 +81,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   return loop(menu) || defaultTitle
 })
 
-hexo.extend.helper.register('getBgPath', path => {
+hexo.extend.helper.register('getBgPath', function(path) {
   if (!path) return ''
 
   const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
@@ -91,7 +91,7 @@ hexo.extend.helper.register('getBgPath', path => {
   if (colorPattern.test(path)) {
     return `background-color: ${path};`
   } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path)) {
-    return `background-image: url(${path});`
+    return `background-image: url(${this.url_for(path)});`
   } else {
     return `background: ${path};`
   }
@@ -131,3 +131,22 @@ hexo.extend.helper.register('shuoshuoFN', (data, page) => {
 
   return finalResult
 })
+
+hexo.extend.helper.register('getPageType', (page, isHome) => {
+  const { layout, tag, category, type, archive } = page
+  if (layout) return layout
+  if (tag) return 'tag'
+  if (category) return 'category'
+  if (archive) return 'archive'
+  if (type) {
+    if (type === 'tags' || type === 'categories') return type
+    else return 'page'
+  }
+  if (isHome) return 'home'
+  return 'post'
+})
+
+hexo.extend.helper.register('getVersion', () => {
+  const { version } = require('../../package.json')
+  return { hexo: hexo.version, theme: version }
+})

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) => {
+const DEFAULT_LIMIT = 10
-  args = args.join(' ').split(',')
+const DEFAULT_FIRST_LIMIT = 10
-  let button = false
+const IMAGE_REGEX = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
-  let type = 'data'
-  let dataStr = ''
 
-  if (args[0] === 'url') {
+// Helper functions
-    [type, dataStr, button] = args // url,[link],[lazyload]
+const parseGalleryArgs = args => {
-    dataStr = urlFor(dataStr)
+  const [type, ...rest] = args.join(' ').split(',').map(arg => arg.trim())
-  } else {
+  return {
-    [button] = args // [lazyload]
+    isUrl: type === 'url',
-    const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
+    params: type === 'url' ? rest : [type, ...rest]
-    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],
+const parseImageContent = content => {
-        title: m[3]
+  const images = []
+  let match
+
+  while ((match = IMAGE_REGEX.exec(content)) !== null) {
+    images.push({
+      url: match[2],
+      alt: match[1] || '',
+      title: match[3] || ''
     })
   }
 
-    dataStr = JSON.stringify(arr)
+  return images
-  }
+}
 
-  return `<div class="gallery-container" data-type="${type}" data-button="${button}">
+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 [name = '', descr = '', url = '', img = ''] = args.map(arg => arg.trim())
-  const imgUrl = urlFor(img)
-  const urlLink = urlFor(url)
 
   return `<figure class="gallery-group">
-  <img class="gallery-group-img no-lightbox" src='${imgUrl}' alt="Group Image Gallery">
+    <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='${urlLink}'></a>
+      <a href='${urlFor(url)}'></a>
     </figcaption>
-  </figure>
+  </figure>`
-  `
 }
 
+// Register tags
 hexo.extend.tag.register('gallery', gallery, { ends: true })
 hexo.extend.tag.register('galleryGroup', galleryGroup)

scripts/tag/hide.js

@@ -16,48 +16,35 @@
 
 'use strict'
 
-const parseArgs = args => {
+const parseArgs = args => args.join(' ').split(',')
-  return args.join(' ').split(',')
-}
 
 const generateStyle = (bg, color) => {
   let style = 'style="'
-  if (bg) {
+  if (bg) style += `background-color: ${bg};`
-    style += `background-color: ${bg};`
+  if (color) style += `color: ${color}`
-  }
-  if (color) {
-    style += `color: ${color}`
-  }
   style += '"'
   return style
 }
 
 const hideInline = args => {
   const [content, display = 'Click', bg = false, color = false] = parseArgs(args)
-  const group = generateStyle(bg, color)
+  const style = generateStyle(bg, color)
-
+  return `<span class="hide-inline"><button type="button" class="hide-button" ${style}>${display}</button><span class="hide-content">${content}</span></span>`
-  return `<span class="hide-inline"><button type="button" class="hide-button" ${group}>${display}
-  </button><span class="hide-content">${content}</span></span>`
 }
 
 const hideBlock = (args, content) => {
   const [display = 'Click', bg = false, color = false] = parseArgs(args)
-  const group = generateStyle(bg, color)
+  const style = generateStyle(bg, color)
-
+  const renderedContent = hexo.render.renderSync({ text: content, engine: 'markdown' })
-  return `<div class="hide-block"><button type="button" class="hide-button" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button" ${style}>${display}</button><div class="hide-content">${renderedContent}</div></div>`
-    </button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
 }
 
 const hideToggle = (args, content) => {
   const [display, bg = false, color = false] = parseArgs(args)
-  const group = generateStyle(bg, color)
+  const style = generateStyle(bg, color)
-  let border = ''
+  const border = bg ? `style="border: 1px solid ${bg}"` : ''
-
+  const renderedContent = hexo.render.renderSync({ text: content, engine: 'markdown' })
-  if (bg) {
+  return `<details class="toggle" ${border}><summary class="toggle-button" ${style}>${display}</summary><div class="toggle-content">${renderedContent}</div></details>`
-    border = `style="border: 1px solid ${bg}"`
-  }
-
-  return `<details class="toggle" ${border}><summary class="toggle-button" ${group}>${display}</summary><div class="toggle-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></details>`
 }
 
 hexo.extend.tag.register('hideInline', hideInline)

scripts/tag/inlineImg.js

@@ -1,9 +1,9 @@
 /**
- * inlineImg 圖片
+ * inlineImg
- * @param {Array} args 圖片名稱和高度
+ * @param {Array} args - Image name and height
- * @param {string} args[0] 圖片名稱
+ * @param {string} args[0] - Image name
- * @param {number} args[1] 圖片高度
+ * @param {number} args[1] - Image height
- * @returns {string} 圖片標籤
+ * @returns {string} - Image tag
  */
 
 'use strict'

scripts/tag/score.js

@@ -6,17 +6,45 @@
 'use strict'
 
 const score = (args, content) => {
+  // Escape HTML tags and some special characters, including curly braces
   const escapeHtmlTags = s => {
     const lookup = {
       '&': '&',
       '"': '"',
-      '\'': ''',
+      "'": ''',
       '<': '&lt;',
-      '>': '&gt;'
+      '>': '&gt;',
+      '{': '&#123;',
+      '}': '&#125;'
     }
-    return s.replace(/[&"'<>]/g, c => lookup[c])
+    return s.replace(/[&"'<>{}]/g, c => lookup[c])
   }
-  return `<div class="abc-music-sheet">${escapeHtmlTags(content)}</div>`
+
+  const trimmed = content.trim()
+  // Split content using six dashes as a delimiter
+  const parts = trimmed.split('------')
+
+  if (parts.length < 2) {
+    // If no delimiter is found, treat the entire content as the score
+    return `<div class="abc-music-sheet">${escapeHtmlTags(trimmed)}</div>`
+  }
+
+  // First part is parameters (JSON string), the rest is the score content
+  const paramPart = parts[0].trim()
+  const scorePart = parts.slice(1).join('------').trim()
+
+  let paramsObj = {}
+  try {
+    paramsObj = JSON.parse(paramPart)
+  } catch (e) {
+    console.error("Failed to parse JSON in score tag:", e)
+  }
+
+  // Use double quotes for data-params attribute value,
+  // ensuring JSON internal double quotes are escaped
+  return `<div class="abc-music-sheet" data-params="${escapeHtmlTags(JSON.stringify(paramsObj))}">
+    ${escapeHtmlTags(scorePart)}
+  </div>`
 }
 
-hexo.extend.tag.register('score', score, { ends: true })
+hexo.extend.tag.register("score", score, { ends: true })

scripts/tag/timeline.js

@@ -1,41 +1,50 @@
 /**
- * timeline
+ * Timeline tag for Hexo
- * by Jerry
+ * 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 = ''
+  // Pre-compile markdown render function
-  let color = ''
+  const renderMd = text => hexo.render.renderSync({ text, engine: 'markdown' })
-  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>`
-  }
 
-  const matches = []
+  // Parse arguments more efficiently
-  let match
+  const [text, color = ''] = args.length ? args.join(' ').split(',') : []
 
-  while ((match = tlBlock.exec(content)) !== null) {
+  // Build initial headline if text exists
-    matches.push(match[1])
+  const headline = text
-    matches.push(match[2])
+    ? `<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) {
+  // Match all timeline blocks in one pass and transform
-    const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
+  const items = Array.from(content.matchAll(tlBlock))
-    const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })
+    .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>`
+  return `<div class="timeline ${color}">${headline}${items}</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>`
 }
 
 hexo.extend.tag.register('timeline', timeLineFn, { ends: true })

source/css/_global/index.styl

@@ -10,8 +10,8 @@
   --preloader-bg: $preloader-bg
   --preloader-color: $preloader-word-color
   --tab-border-color: $tab-border-color
-  --tab-botton-bg: $tab-botton-bg
+  --tab-button-bg: $tab-button-bg
-  --tab-botton-color: $tab-botton-color
+  --tab-button-color: $tab-button-color
   --tab-button-hover-bg: $tab-button-hover-bg
   --tab-button-active-bg: $tab-button-active-bg
   --card-bg: $card-bg

source/css/_layout/footer.styl

@@ -13,17 +13,16 @@
       background-color: var(--mark-bg)
       content: ''
 
-#footer-wrap
+  & > *
     position: relative
-  padding: 40px 20px
     color: var(--light-grey)
-  text-align: center
 
   a
     color: var(--light-grey)
+    transition: all .3s ease-in-out
 
     &:hover
-      text-decoration: underline
+      color: $light-blue
 
   .footer-separator
     margin: 0 4px
@@ -33,3 +32,56 @@
     max-height: 1.4em
     width: auto
     vertical-align: text-bottom
+
+  .footer-flex
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: space-between
+    margin: 0 auto
+    padding: 40px 60px
+    max-width: 1200px
+    width: 100%
+    text-align: left
+    gap: 13px
+
+    +maxWidth768()
+      padding: 30px
+      gap: 10px
+
+    .footer-flex-items
+      flex-shrink: 0
+      min-width: 100px
+      text-align: left
+      white-space: nowrap
+
+    .footer-flex-title
+      margin-bottom: 5px
+      white-space: nowrap
+      font-weight: 600
+      font-size: 1.4em
+
+    .footer-flex-item
+      margin: 10px 0
+      white-space: nowrap
+
+    a
+      display: block
+      white-space: nowrap
+
+  .footer-other
+    padding: 40px 20px
+    width: 100%
+    text-align: center
+
+    if hexo-config('footer.nav')
+      padding: 10px 8px
+      background-color: rgba(0, 0, 0, .1)
+
+      .copyright,
+      .framework-info,
+      .footer_custom_text
+        font-size: .9em
+    else
+      .framework-info
+        display: block

source/css/_layout/head.styl

@@ -436,3 +436,28 @@
       &:hover
         &:after
           width: 100%
+
+  .nav-page-title
+    position: relative
+    overflow: hidden
+
+    & > :first-child,
+    & > :last-child
+      display: inline-block
+      transition: all .3s ease-in-out
+
+    & > :last-child
+      position: absolute
+      top: 50%
+      left: 0
+      opacity: 0
+      transform: translateY(-50%) translateY(-10px)
+
+    &:hover
+      & > :last-child
+        opacity: 1
+        transform: translateY(-50%) translateY(0)
+
+      & > :first-child
+        opacity: 0
+        transform: translateY(10px)

source/css/_layout/pagination.styl

@@ -12,11 +12,10 @@
     width: 100% !important
 
   .pagination-related
-    width: 50%
     height: 150px
 
-    +maxWidth768()
+    +minWidth768()
-      width: 100%
+      flex: 1
 
     .info-1
       .info-item-2
@@ -31,6 +30,10 @@
     margin-top: 40px
     width: 100%
     addBorderRadius()
+    display: flex
+
+    +maxWidth768()
+      flex-direction: column
 
 .layout
   .pagination

source/css/_mode/darkmode.styl

@@ -10,8 +10,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --preloader-bg: darken(#121212, 2)
     --preloader-color: alpha(#FFFFFF, .7)
     --tab-border-color: #2c2c2c
-    --tab-botton-bg: #2c2c2c
+    --tab-button-bg: #2c2c2c
-    --tab-botton-color: alpha(#FFFFFF, .7)
+    --tab-button-color: alpha(#FFFFFF, .7)
     --tab-button-hover-bg: lighten(#121212, 15)
     --tab-button-active-bg: #121212
     --card-bg: #121212

source/css/_page/homepage.styl

@@ -172,3 +172,4 @@ $indexEnable = hexo-config('cover.index_enable')
       & > .content
         @extend .limit-more-line
         -webkit-line-clamp: 2
+        word-break: break-word

source/css/_tags/tabs.styl

@@ -14,14 +14,14 @@
       flex-wrap: wrap
       margin: 0
       padding: 0
-      background: var(--tab-botton-bg)
+      background: var(--tab-button-bg)
 
       > .tab
         flex-grow: 1
         padding: 8px 18px
         border-top: 2px solid var(--tab-border-color)
-        background: var(--tab-botton-bg)
+        background: var(--tab-button-bg)
-        color: var(--tab-botton-color)
+        color: var(--tab-button-color)
         line-height: 2
         transition: all .4s
 

source/css/var.styl

@@ -14,18 +14,18 @@ $code-background = $themeColorEnable && hexo-config('theme_color.code_background
 $theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
 // font
 
-$chinseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
+$chineseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
-$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chinseFont, sans-serif
+$default-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chineseFont, sans-serif
-$dafault-code-font = consolas, Menlo, 'PingFang SC', $chinseFont, sans-serif
+$default-code-font = consolas, Menlo, monospace, 'PingFang SC', $chineseFont, sans-serif
 
-$font-family = hexo-config('font.font_family') ? unquote(hexo-config('font.font_family')) : $dafault-font-family
+$font-family = hexo-config('font.font_family') ? unquote(hexo-config('font.font_family')) : $default-font-family
-$code-font-family = hexo-config('font.code_font_family') ? unquote(hexo-config('font.code_font_family')) : $dafault-code-font
+$code-font-family = hexo-config('font.code_font_family') ? unquote(hexo-config('font.code_font_family')) : $default-code-font
 $site-name-font = hexo-config('blog_title_font.font_family') && unquote(hexo-config('blog_title_font.font_family'))
 // hr
 $hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
 $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
 $hr-icon-top = $hrEnable && hexo-config('hr_icon.icon_top') ? convert(hexo-config('hr_icon.icon_top')) : -10px
-// page beatutify
+// page beautify
 $beautifyEnable = hexo-config('beautify.enable')
 $title-prefix-icon = $beautifyEnable && hexo-config('beautify.title_prefix_icon') ? hexo-config('beautify.title_prefix_icon') : '\f0c1'
 $title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title_prefix_icon_color') ? convert(hexo-config('beautify.title_prefix_icon_color')) : $light-red
@@ -175,8 +175,8 @@ $tagsP-purple-color = #6f42c1
 $tagsP-green-color = #5cb85c
 // Tag Plugins - Tab
 $tab-border-color = #f0f0f0
-$tab-botton-bg = #f0f0f0
+$tab-button-bg = #f0f0f0
-$tab-botton-color = $font-color
+$tab-button-color = $font-color
 $tab-button-hover-bg = darken($tab-border-color, 8)
 $tab-active-border-color = $theme-color
 $tab-button-active-bg = $card-bg

source/js/main.js

@@ -224,14 +224,23 @@ document.addEventListener('DOMContentLoaded', () => {
    */
 
   const fetchUrl = async url => {
+    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 runJustifiedGallery = (container, data, config) => {
-    const dataLength = data.length
+    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, '"') // replace double quotes to "
-
-    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 ig = new InfiniteGrid.JustifiedInfiniteGrid(container, igConfig)
-        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)
     let isLayoutHidden = false
 
-    const completeFn = e => {
+    // Utility functions
-      if (tabs) {
+    const sanitizeString = str => (str && str.replace(/"/g, '&quot;')) || ''
-        const parentNode = item.parentNode
 
+    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 (container.offsetHeight === 0) {
-        if (item.offsetHeight === 0) {
           parentNode.style.visibility = 'hidden'
           isLayoutHidden = true
         }
       }
 
       const { updated, isResize, mounted } = e
-      if (!updated.length || !mounted.length || isResize) {
+      if (!updated.length || !mounted.length || isResize) return
-        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)
+        btf.setLoading.remove(container)
-        !tabs && ig.off('renderComplete', completeFn)
+        !tabs && ig.off('renderComplete', handleRenderComplete)
         return
       }
 
       if (isButton) {
-        btf.setLoading.remove(item)
+        btf.setLoading.remove(container)
-        addButton(item)
+        addLoadMoreButton(container)
       }
     }
 
-    const requestAppendFn = btf.debounce(e => {
+    const handleRequestAppend = btf.debounce(e => {
       const nextGroupKey = (+e.groupKey || 0) + 1
-      appendItem(nextGroupKey, 10)
 
-      if (nextGroupKey === maxGroupKey) {
+      if (nextGroupKey === 1) appendItems(nextGroupKey, firstLimit, true)
-        ig.off('requestAppend', requestAppendFn)
+      else appendItems(nextGroupKey, limit)
-      }
+
+      if (nextGroupKey === maxGroupKey) ig.off('requestAppend', handleRequestAppend)
     }, 300)
 
-    btf.setLoading.add(item)
+    btf.setLoading.add(container)
-    ig.on('renderComplete', completeFn)
+    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) => {
+  const addJustifiedGallery = async (elements, tabs = false) => {
-    if (!ele.length) return
+    if (!elements.length) return
-    const init = async () => {
+
-      for (const item of ele) {
+    const initGallery = async () => {
-        if (btf.isHidden(item) || item.classList.contains('loaded')) continue
+      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)
+          const data = element.getAttribute('data-type') === 'url' ? await fetchUrl(content) : JSON.parse(content)
-          runJustifiedGallery(children, content, isButton, tabs)
+          runJustifiedGallery(container, data, config)
-        } catch (e) {
+        } catch (error) {
-          console.error('Gallery data parsing failed:', e)
+          console.error('Gallery data parsing failed:', error)
         }
       }
     }
 
     if (typeof InfiniteGrid === 'function') {
-      init()
+      await initGallery()
     } else {
-      await btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
+      await btf.getScript(GLOBAL_CONFIG.infinitegrid.js)
-      init()
+      await initGallery()
     }
   }
 
@@ -864,7 +871,7 @@ document.addEventListener('DOMContentLoaded', () => {
     menuMask && menuMask.addEventListener('click', () => { sidebarFn.close() })
 
     clickFnOfSubMenu()
-    GLOBAL_CONFIG.islazyload && lazyloadImg()
+    GLOBAL_CONFIG.islazyloadPlugin && lazyloadImg()
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
 
     if (GLOBAL_CONFIG.autoDarkmode) {
@@ -890,7 +897,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initAdjust()
     justifiedIndexPostUI()
 
-    if (GLOBAL_CONFIG_SITE.isPost) {
+    if (GLOBAL_CONFIG_SITE.pageType === 'post') {
       addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
     } else {
@@ -900,11 +907,11 @@ document.addEventListener('DOMContentLoaded', () => {
       toggleCardCategory()
     }
 
-    GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
+    GLOBAL_CONFIG_SITE.pageType === 'home' && scrollDownInIndex()
     scrollFn()
 
     forPostFn()
-    !GLOBAL_CONFIG_SITE.isShuoshuo && btf.switchComments(document)
+    GLOBAL_CONFIG_SITE.pageType !== 'shuoshuo' && btf.switchComments(document)
     openMobileMenu()
   }
 

source/js/utils.js

@@ -186,6 +186,7 @@
 
       if (service === 'medium_zoom') {
         mediumZoom(ele, { background: 'var(--zoom-bg)' })
+        return
       }
 
       if (service === 'fancybox') {
@@ -198,7 +199,9 @@
         })
 
         if (!window.fancyboxRun) {
-          Fancybox.bind('[data-fancybox]', {
+          let options = ''
+          if (Fancybox.version < '6') {
+            options = {
               Hash: false,
               Thumbs: {
                 showOnStart: false
@@ -226,7 +229,41 @@
                   right: ['slideshow', 'thumbs', 'close']
                 }
               }
-          })
+            }
+          } else {
+            options = {
+              Hash: false,
+              Carousel: {
+                transition: 'slide',
+                Thumbs: {
+                  showOnStart: false
+                },
+                Toolbar: {
+                  display: {
+                    left: ['counter'],
+                    middle: [
+                      'zoomIn',
+                      'zoomOut',
+                      'toggle1to1',
+                      'rotateCCW',
+                      'rotateCW',
+                      'flipX',
+                      'flipY',
+                      "reset"
+                    ],
+                    right: ['autoplay', 'thumbs', 'close']
+                  }
+                },
+                Zoomable: {
+                  Panzoom: {
+                    maxScale: 4
+                  }
+                }
+              }
+            }
+          }
+
+          Fancybox.bind('[data-fancybox]', options)
           window.fancyboxRun = true
         }
       }