Merge branch 'dev'

feat: 本地搜索，點擊文章內容也會跳轉到相應頁面
feat: 添加 docsearch
feat: 標籤頁支持配置 orderby 和 order 參數
feat: card_tags 可配置 orderby 和 order 參數
fix: 修復本地搜索，輸入 ?d 報錯的 bug closed #1192
fix: 修復 waline 在 pjax 模式下 css 沒有加載的 bug
fix: 修復 artalk 最新評論無法加載 closed #1191
fix: 修復 card_author 和 card_announcement 設為 false 後，aside 卡片沒有間距的 bug closed #1174
improvement: getCSS 重構

_config.yml

@@ -59,6 +59,15 @@ local_search:
   preload: false
   CDN:
 
+# Docsearch
+# https://docsearch.algolia.com/
+docsearch:
+  enable: false
+  appId:
+  apiKey:
+  indexName:
+  option:
+
 # Math (數學)
 # --------------------------------------
 # About the per_page
@@ -625,12 +634,9 @@ subtitle:
   enable: false
   # Typewriter Effect (打字效果)
   effect: true
-  # Effect Speed Options (打字效果速度參數)
-  startDelay: 300 # time before typing starts in milliseconds
-  typeSpeed: 150 # type speed in milliseconds
-  backSpeed: 50 # backspacing speed in milliseconds
-  # loop (循環打字)
-  loop: true
+  # Customize typed.js (配置typed.js)
+  # https://github.com/mattboldt/typed.js/#customization
+  typed_option:
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
@@ -689,6 +695,8 @@ aside:
     enable: true
     limit: 40 # if set 0 will show all
     color: false
+    orderby: random # Order of tags, random/name/length
+    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
     sort_order: # Don't modify the setting unless you know how it works
   card_archives:
     enable: true
@@ -915,6 +923,8 @@ CDN:
     # algolia_js:
     # algolia_search_v4:
     # instantsearch_v4:
+    # docsearch_js:
+    # docsearch_css:
     # pjax:
     # gitalk:
     # gitalk_css:
@@ -958,3 +968,4 @@ CDN:
     # prismjs_autoloader:
     # artalk_js:
     # artalk_css:
+    # busuanzi:

layout/includes/additional-js.pug

@@ -22,14 +22,6 @@ div
   if theme.pangu.enable
     != partial("includes/third-party/pangu.pug", {}, { cache: true })
 
-  //- search
-  if theme.algolia_search.enable
-    script(src=url_for(theme.asset.algolia_search_v4))
-    script(src=url_for(theme.asset.instantsearch_v4))
-    script(src=url_for(theme.asset.algolia_js))
-  else if theme.local_search.enable
-    script(src=url_for(theme.asset.local_search))
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })

layout/includes/header/index.pug

@@ -28,7 +28,9 @@ else
   - var top_img = false
   - var isHomeClass = 'not-top-img'
 
-header#page-header(class=isHomeClass style=bg_img)
+- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+
+header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
   !=partial('includes/header/nav', {}, {cache: true})
   if top_img !== false
     if is_post()

layout/includes/header/nav.pug

@@ -1,5 +1,4 @@
-- const isFixedClass = theme.nav.fixed ? 'fixed' : ''
-nav#nav(class=isFixedClass)
+nav#nav
   span#blog-info
     a(href=url_for('/') title=config.title)
       if theme.nav.logo
@@ -8,7 +7,7 @@ nav#nav(class=isFixedClass)
         span.site-name=config.title
     
   #menus
-    if (theme.algolia_search.enable || theme.local_search.enable)
+    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
       #search-button
         a.site-page.social-icon.search(href="javascript:void(0);")
           i.fas.fa-search.fa-fw

layout/includes/layout.pug

@@ -44,5 +44,5 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       include ./404.pug
 
     include ./rightside.pug
-    !=partial('includes/third-party/search/index', {}, {cache: true})
-    include ./additional-js.pug
+    include ./additional-js.pug
+    !=partial('includes/third-party/search/index', {}, {cache: true})

layout/includes/page/tags.pug

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

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

@@ -14,9 +14,13 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'object') initWaline()
+    const walineCSSLoad = document.getElementById('waline-css')
+
+    if (typeof Waline === 'object') {
+      walineCSSLoad ? initWaline() : getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(initWaline)
+    }
     else {
-      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
+      getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(() => {
         getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
       })
     }

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

@@ -43,5 +43,5 @@ script.
   } else {
     MathJax.startup.document.state(0)
     MathJax.texReset()
-    MathJax.typeset()
+    MathJax.typesetPromise()
   }

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

@@ -1,4 +1,4 @@
-- const { server, option } = theme.artalk
+- const { server, site, option } = theme.artalk
 - const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/'
 - const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp'
 
@@ -45,8 +45,15 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
+    const headerList = {
+      method: 'POST',
+      headers: {
+        'Origin': window.location.origin
+      }
+    }
+
     const getComment = () => {
-      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}',{method: "POST"})
+      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}&site_name=!{site}', headerList)
         .then(response => response.json())
         .then(d => {
           const artalk = d.data.map(function (e) {

layout/includes/third-party/search/algolia.pug

@@ -16,3 +16,7 @@
           .algolia-poweredBy
   
   #search-mask
+
+  script(src=url_for(theme.asset.algolia_search_v4))
+  script(src=url_for(theme.asset.instantsearch_v4))
+  script(src=url_for(theme.asset.algolia_js))

layout/includes/third-party/search/docsearch.pug

@@ -0,0 +1,27 @@
+- const { appId, apiKey, indexName, option } = theme.docsearch
+
+.docsearch-wrap
+  #docsearch(style="display:none")
+  link(rel="stylesheet" href=url_for(theme.asset.docsearch_css))
+  script(src=url_for(theme.asset.docsearch_js))
+  script.
+    (() => {
+      docsearch(Object.assign({
+        appId: '!{appId}',
+        apiKey: '!{apiKey}',
+        indexName: '!{indexName}',
+        container: '#docsearch',
+      }, !{JSON.stringify(option)}))
+
+
+      const searchClickFn = () => {
+        document.querySelector('#search-button > .search').addEventListener('click', () => {
+          document.querySelector('.DocSearch-Button').click()
+        })
+      }
+
+      searchClickFn()
+      window.addEventListener('pjax:complete', searchClickFn)
+    })()
+
+

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

@@ -1,4 +1,6 @@
 if theme.algolia_search.enable
   include ./algolia.pug
 else if theme.local_search.enable
-  include ./local-search.pug
+  include ./local-search.pug
+else if theme.docsearch.enable
+  include ./docsearch.pug

layout/includes/third-party/search/local-search.pug

@@ -17,4 +17,6 @@
       hr
       #local-search-results
 
-  #search-mask
+  #search-mask
+
+  script(src=url_for(theme.asset.local_search))

layout/includes/third-party/subtitle.pug

@@ -1,6 +1,30 @@
-- const { effect,loop,source,sub,startDelay,typeSpeed,backSpeed } = theme.subtitle
+- const { effect,source,sub,typed_option } = theme.subtitle
 - let subContent = sub || new Array()
 
+script.
+  window.typedJSFn = {
+    init: (str) => {
+      window.typed = new Typed('#subtitle', Object.assign({
+        strings: str,
+        startDelay: 300,
+        typeSpeed: 150,
+        loop: true,
+        backSpeed: 50,
+      }, !{JSON.stringify(typed_option)}))
+    },
+    run: (subtitleType) => {
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+    }
+  }
+
 case source
   when 1
     script.
@@ -12,28 +36,13 @@ case source
               const from = '出自 ' + data.from
               const sub = !{JSON.stringify(subContent)}
               sub.unshift(data.hitokoto, from)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
             } else {
               document.getElementById('subtitle').innerHTML = data.hitokoto
             }
           })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   when 2
     script.
@@ -44,28 +53,13 @@ case source
             const from = '出自 ' + str[1]
             const sub = !{JSON.stringify(subContent)}
             sub.unshift(con, from)
-            window.typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: !{startDelay},
-              typeSpeed: !{typeSpeed},
-              loop: !{loop},
-              backSpeed: !{backSpeed},
-            })
+            typedJSFn.init(sub)
           } else {
             document.getElementById('subtitle').innerHTML = con
           }
         })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   when 3
     script.
@@ -76,53 +70,23 @@ case source
               const sub = !{JSON.stringify(subContent)}
               const content = result.data.content
               sub.unshift(content)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
             } else {
               document.getElementById('subtitle').innerHTML = result.data.content
             }
           })
         })
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
 
   default
     - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
-        if (!{effect}) { 
-          window.typed = new Typed("#subtitle", {
-            strings: !{JSON.stringify(subContent)},
-            startDelay: !{startDelay},
-            typeSpeed: !{typeSpeed},
-            loop: !{loop},
-            backSpeed: !{backSpeed}
-          })
+        if (!{effect}) {
+          typedJSFn.init(!{JSON.stringify(subContent)})
         } else {
           document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
         }
       }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)

layout/includes/widget/card_tags.pug

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

layout/includes/widget/index.pug

@@ -19,7 +19,7 @@
     //- page
     !=partial('includes/widget/card_author', {}, {cache: true})
     !=partial('includes/widget/card_announcement', {}, {cache: true})
-    !=partial('includes/widget/card_top_self', {}, {cache: true})      
+    !=partial('includes/widget/card_top_self', {}, {cache: true})
 
     .sticky_layout
       if showToc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

plugins.yml

@@ -5,7 +5,7 @@ algolia_search_v4:
 instantsearch_v4:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.49.4
+  version: 4.51.0
 pjax:
   name: pjax
   file: pjax.min.js
@@ -37,7 +37,7 @@ disqusjs_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.8
+  version: 1.6.10
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
@@ -73,7 +73,7 @@ katex_copytex:
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.3.0
+  version: 9.4.0
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -144,7 +144,7 @@ fontawesomeV6:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 6.2.1
+  version: 6.3.0
 flickr_justified_gallery_js:
   name: flickr-justified-gallery
   file: dist/fjGallery.min.js
@@ -198,3 +198,13 @@ pace_default_css:
   other_name: pace
   file: themes/blue/pace-theme-minimal.css
   version: 1.2.4
+docsearch_js:
+  name: '@docsearch/js'
+  other_name: docsearch-js
+  file: dist/umd/index.js
+  version: 3.3.3
+docsearch_css:
+  name: '@docsearch/css'
+  other_name: docsearch-css
+  file: dist/style.css
+  version: 3.3.3

scripts/helpers/inject_head_js.js

@@ -61,12 +61,18 @@ hexo.extend.helper.register('inject_head_js', function () {
   `
 
   const getCSS = `
-    win.getCSS = url => new Promise((resolve, reject) => {
+    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
       const link = document.createElement('link')
       link.rel = 'stylesheet'
       link.href = url
-      link.onload = () => resolve()
-      link.onerror = () => reject()
+      if (id) link.id = id
+      link.onerror = reject
+      link.onload = link.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        link.onload = link.onreadystatechange = null
+        resolve()
+      }
       document.head.appendChild(link)
     })
   `

scripts/helpers/page.js

@@ -24,11 +24,8 @@ hexo.extend.helper.register('page_description', function () {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let source = options.source
-  const minfontsize = options.minfontsize
-  const maxfontsize = options.maxfontsize
-  const limit = options.limit
-  const unit = options.unit || 'px'
+  let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
+  unit = unit || 'px'
 
   let result = ''
   if (limit > 0) {
@@ -43,7 +40,7 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   })
 
   const length = sizes.length - 1
-  source.forEach(tag => {
+  source.sort(orderby, order).forEach(tag => {
     const ratio = length ? sizes.indexOf(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
     let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`

scripts/tag/gallery.js

@@ -3,6 +3,7 @@
  * galleryGroup and gallery
  * {% galleryGroup [name] [descr] [url] [img] %}
  * {% gallery [lazyload],[rowHeight],[limit] %}
+ * {% gallery url,[url],[lazyload],[rowHeight],[limit] %}
  */
 
 'use strict'
@@ -12,28 +13,42 @@ const urlFor = require('hexo-util').url_for.bind(hexo)
 function gallery (args, content) {
   const { data, languages } = hexo.theme.i18n
   args = args.join(' ').split(',')
-  const rowHeight = args[1] || 220
-  const limit = args[2] || 10
-  const lazyload = args[0] === 'true'
-  const regex = /!\[(.*?)\]\((.*?)\s*(?:["'](.*?)["']?)?\s*\)/g
-  const lazyloadClass = lazyload ? 'lazyload' : ''
-  let m
-  const arr = []
-  while ((m = regex.exec(content)) !== null) {
-    if (m.index === regex.lastIndex) {
-      regex.lastIndex++
+  let rowHeight, limit, lazyload, type, dataStr
+
+  // url,[link],[lazyload],[rowHeight],[limit]
+  if (args[0] === 'url') {
+    dataStr = args[1]
+    lazyload = args[2] === 'true'
+    rowHeight = args[3] || 220
+    limit = args[4] || 10
+    type = ' url'
+  } else {
+    rowHeight = args[1] || 220
+    limit = args[2] || 10
+    lazyload = args[0] === 'true'
+    type = ' data'
+    const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
+    let m
+    const arr = []
+    while ((m = regex.exec(content)) !== null) {
+      if (m.index === regex.lastIndex) {
+        regex.lastIndex++
+      }
+      arr.push({
+        url: m[2],
+        alt: m[1],
+        title: m[3]
+      })
     }
 
-    arr.push({
-      url: m[2],
-      alt: m[1],
-      title: m[3]
-    })
+    dataStr = JSON.stringify(arr)
   }
 
+  const lazyloadClass = lazyload ? 'lazyload' : ''
+
   return `<div class="gallery">
-    <div class="fj-gallery ${lazyloadClass}" data-rowHeight="${rowHeight}" data-limit="${limit}">
-    <span class="gallery-data">${JSON.stringify(arr)}</span>
+    <div class="fj-gallery ${lazyloadClass + type}" data-rowHeight="${rowHeight}" data-limit="${limit}">
+    <span class="gallery-data">${dataStr}</span>
     </div>
     <button class="gallery-load-more"><span>${data[languages[0]].load_more}</span><i class="fa-solid fa-arrow-down"></i></button>
     </div>`

source/css/_global/index.styl

@@ -6,7 +6,7 @@
   --hr-before-color: lighten($theme-hr-color, 30%)
   --search-bg: $search-bg
   --search-input-color: $search-input-color
-  --search-result-title: $search-result-title
+  --search-a-color: $search-a-color
   --preloader-bg: $preloader-bg
   --preloader-color: $preloader-word-color
   --tab-border-color: $tab-border-color
@@ -50,8 +50,8 @@ body
 
 // scrollbar - chrome/safari
 *::-webkit-scrollbar
-  width: 8px
-  height: 8px
+  width: 5px
+  height: 5px
 
 *::-webkit-scrollbar-thumb
   background: var(--scrollbar-color)

source/css/_layout/aside.styl

@@ -291,8 +291,8 @@
           background: $theme-toc-color
           color: $toc-active-color
 
-  :only-child
-    > .card-widget
+  .sticky_layout:only-child
+    > :first-child
       margin-top: 0
 
   .card-more-btn

source/css/_layout/head.styl

@@ -124,7 +124,8 @@
       background: rgba(255, 255, 255, .8)
       box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
 
-      a
+      a,
+      .site-name
         color: var(--font-color)
         text-shadow: none
 
@@ -137,10 +138,6 @@
       box-shadow: 0 5px 6px -5px alpha($grey, .6)
       transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
-      &.fixed
-        top: 0
-        transition: all .5s
-
       #blog-info
         color: var(--font-color)
 
@@ -158,8 +155,13 @@
         &:hover
           color: $light-blue
 
-  &.nav-visible
-    #nav:not(.fixed)
+    &.fixed
+      #nav
+        top: 0
+        transition: all .5s
+
+  &.nav-visible:not(.fixed)
+    #nav
       transition: all .5s
       transform: translate3d(0, 100%, 0)
 
@@ -168,6 +170,19 @@
         top: 70px
         transition: top .5s
 
+  &.fixed
+    #nav
+      position: fixed
+
+    & + .layout
+      & > .aside-content > .sticky_layout
+        top: 70px
+        transition: top .5s
+
+      #card-toc
+        .toc-content
+          max-height: calc(100vh - 170px)
+
 #page
   h1.page-title
     margin: 8px 0 20px
@@ -265,9 +280,6 @@
   &.show
     opacity: 1
 
-  &.fixed
-    position: fixed
-
   #blog-info
     flex: 1
     color: var(--light-grey)

source/css/_mode/darkmode.styl

@@ -6,7 +6,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hr-before-color: alpha(#FFFFFF, .7)
     --search-bg: #121212
     --search-input-color: alpha(#FFFFFF, .7)
-    --search-result-title: alpha(#FFFFFF, .9)
+    --search-a-color: alpha(#FFFFFF, .7)
     --preloader-bg: darken(#121212, 2)
     --preloader-color: alpha(#FFFFFF, .7)
     --tab-border-color: #2c2c2c

source/css/_search/algolia.styl

@@ -16,7 +16,7 @@
       @extend .list-beauty
 
       a
-        color: var(--search-result-title)
+        color: var(--search-a-color)
 
         &:hover
           color: $search-color

source/css/_search/local-search.styl

@@ -43,13 +43,14 @@
 
       a
         display: block
-        color: var(--search-result-title)
-        font-weight: 600
-        cursor: pointer
+        color: var(--search-a-color)
 
         &:hover
           color: $search-color
 
+      .search-result-title
+        font-weight: 600
+
       .search-result
         margin: 0 0 8px
         word-break: break-word

source/css/var.styl

@@ -82,7 +82,7 @@ $search-bg = #f6f8fa
 $search-input-color = $font-black
 $search-color = $theme-color
 $search-keyword-highlight = #F47466
-$search-result-title = $font-black
+$search-a-color = $font-black
 // comments
 $comments-switch-first-text = $bright-blue
 $comments-switch-second-text = $light-orange

source/js/main.js

@@ -243,8 +243,8 @@ document.addEventListener('DOMContentLoaded', function () {
       return str
     }
 
-    const lazyloadFn = (i, arr) => {
-      const loadItem = i.getAttribute('data-limit')
+    const lazyloadFn = (i, arr, limit) => {
+      const loadItem = limit
       const arrLength = arr.length
       if (arrLength > loadItem) i.insertAdjacentHTML('beforeend', htmlStr(arr.splice(0, loadItem)))
       else {
@@ -254,29 +254,43 @@ document.addEventListener('DOMContentLoaded', function () {
       return arrLength > loadItem ? loadItem : arrLength
     }
 
-    ele.forEach(item => {
-      const arr = JSON.parse(item.querySelector('.gallery-data').textContent)
+    const fetchUrl = async (url) => {
+      const response = await fetch(url)
+      return await response.json()
+    }
+
+    const runJustifiedGallery = (item, arr) => {
       if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
       else {
-        lazyloadFn(item, arr)
         const limit = item.getAttribute('data-limit')
+        lazyloadFn(item, arr, limit)
         const clickBtnFn = () => {
-          const lastItemLength = lazyloadFn(item, arr)
+          const lastItemLength = lazyloadFn(item, arr, limit)
           fjGallery(item, 'appendImages', item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`))
           btf.loadLightbox(item.querySelectorAll('img'))
           lastItemLength < limit && item.nextElementSibling.removeEventListener('click', clickBtnFn)
         }
         item.nextElementSibling.addEventListener('click', clickBtnFn)
       }
-    })
+      btf.initJustifiedGallery(item)
+      btf.loadLightbox(item.querySelectorAll('img'))
+    }
+
+    const addJustifiedGallery = () => {
+      ele.forEach(item => {
+        item.classList.contains('url')
+          ? fetchUrl(item.textContent).then(res => { runJustifiedGallery(item, res) })
+          : runJustifiedGallery(item, JSON.parse(item.textContent))
+      })
+    }
 
     if (window.fjGallery) {
-      setTimeout(() => { btf.initJustifiedGallery(ele) }, 100)
+      addJustifiedGallery()
       return
     }
 
     getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
-    getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
+    getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(addJustifiedGallery)
   }
 
   /**

source/js/search/local-search.js

@@ -153,24 +153,18 @@ window.addEventListener('load', () => {
 
               // highlight all keywords
               keywords.forEach(keyword => {
-                let regexStr = keyword
-                const specialRegex = /[^\w\s]+/ // match special characters
-                if (keyword.length === 1 && specialRegex.test(keyword)) {
-                  regexStr = `\\${keyword}`
-                }
-                const regS = new RegExp(regexStr, 'gi')
-                matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
-                dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+                matchContent = matchContent.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
+                dataTitle = dataTitle.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
               })
 
-              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
+              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '"><span class="search-result-title">' + dataTitle + '</span>'
               count += 1
 
               if (dataContent !== '') {
                 str += '<p class="search-result">' + pre + matchContent + post + '</p>'
               }
             }
-            str += '</div>'
+            str += '</a></div>'
           }
         })
         if (count === 0) {

source/js/utils.js

@@ -122,7 +122,8 @@ const btf = {
 
   scrollToDest: (pos, time = 500) => {
     const currentPos = window.pageYOffset
-    if (currentPos > pos) pos = pos - 70
+    const isNavFixed = document.getElementById('page-header').classList.contains('fixed')
+    if (currentPos > pos || isNavFixed) pos = pos - 70
 
     if ('scrollBehavior' in document.documentElement.style) {
       window.scrollTo({
@@ -251,7 +252,7 @@ const btf = {
   },
 
   initJustifiedGallery: function (selector) {
-    selector.forEach(function (i) {
+    const runJustifiedGallery = i => {
       if (!btf.isHidden(i)) {
         fjGallery(i, {
           itemSelector: '.fj-gallery-item',
@@ -262,7 +263,10 @@ const btf = {
           }
         })
       }
-    })
+    }
+
+    if (Array.from(selector).length === 0) runJustifiedGallery(selector)
+    else selector.forEach(i => { runJustifiedGallery(i) })
   },
 
   updateAnchor: (anchor) => {