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

_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
@@ -686,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
@@ -912,6 +923,8 @@ CDN:
     # algolia_js:
     # algolia_search_v4:
     # instantsearch_v4:
+    # docsearch_js:
+    # docsearch_css:
     # pjax:
     # gitalk:
     # gitalk_css:

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/nav.pug

@@ -7,7 +7,7 @@ nav#nav
         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
+    !=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/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

@@ -2,3 +2,5 @@ if theme.algolia_search.enable
   include ./algolia.pug
 else if theme.local_search.enable
   include ./local-search.pug
+else if theme.docsearch.enable
+  include ./docsearch.pug

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

@@ -18,3 +18,5 @@
       #local-search-results
 
   #search-mask
+
+  script(src=url_for(theme.asset.local_search))

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

package.json

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

plugins.yml

@@ -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.2
+docsearch_css:
+  name: '@docsearch/css'
+  other_name: docsearch-css
+  file: dist/style.css
+  version: 3.3.2

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()
+      if (id) link.id = id
-      link.onerror = () => reject()
+      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
+  let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
-  const minfontsize = options.minfontsize
+  unit = unit || 'px'
-  const maxfontsize = options.maxfontsize
-  const limit = options.limit
-  const unit = options.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
+  let rowHeight, limit, lazyload, type, dataStr
-  const limit = args[2] || 10
+
-  const lazyload = args[0] === 'true'
+  // url,[link],[lazyload],[rowHeight],[limit]
-  const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
+  if (args[0] === 'url') {
-  const lazyloadClass = lazyload ? 'lazyload' : ''
+    dataStr = args[1]
-  let m
+    lazyload = args[2] === 'true'
-  const arr = []
+    rowHeight = args[3] || 220
-  while ((m = regex.exec(content)) !== null) {
+    limit = args[4] || 10
-    if (m.index === regex.lastIndex) {
+    type = ' url'
-      regex.lastIndex++
+  } 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({
+    dataStr = JSON.stringify(arr)
-      url: m[2],
-      alt: m[1],
-      title: m[3]
-    })
   }
 
+  const lazyloadClass = lazyload ? 'lazyload' : ''
+
   return `<div class="gallery">
-    <div class="fj-gallery ${lazyloadClass}" data-rowHeight="${rowHeight}" data-limit="${limit}">
+    <div class="fj-gallery ${lazyloadClass + type}" data-rowHeight="${rowHeight}" data-limit="${limit}">
-    <span class="gallery-data">${JSON.stringify(arr)}</span>
+    <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
+  width: 5px
-  height: 8px
+  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
+  .sticky_layout:only-child
-    > .card-widget
+    > :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)
+        color: var(--search-a-color)
-        font-weight: 600
-        cursor: pointer
 
         &: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 lazyloadFn = (i, arr, limit) => {
-      const loadItem = i.getAttribute('data-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 fetchUrl = async (url) => {
-      const arr = JSON.parse(item.querySelector('.gallery-data').textContent)
+      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
+                matchContent = matchContent.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
-                const specialRegex = /[^\w\s]+/ // match special characters
+                dataTitle = dataTitle.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
-                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>')
               })
 
-              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) => {