feat: gallery 標籤外掛增加 json 獲取

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 重構

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/_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

@@ -252,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',
@@ -263,7 +263,10 @@ const btf = {
           }
         })
       }
-    })
+    }
+
+    if (Array.from(selector).length === 0) runJustifiedGallery(selector)
+    else selector.forEach(i => { runJustifiedGallery(i) })
   },
 
   updateAnchor: (anchor) => {