feat: 不蒜子可配置 CDN closed #1132

feat: gallery 標簽外掛增加圖片懶加載，增加 lazyload rowHeight 和 limit 屬性配置
feat: 可設置固定導航欄 closed #1150
fix: 修復開啟懶加載後，再使用 flink_url 的方式引入友鏈數據，友鏈頭像有可能不顯示的 bug closed #1146
fix: 修復閲讀模式下，代碼塊的背景顏色仍顯示彩色背景的 bug (自定義代碼塊) closed #1139
improvement: 搜索結果換行時不會拆分單詞顯示
improvement: 優化搜索結果顯示滾動條位置
improvement: css/js 優化

_config.yml

@@ -13,9 +13,10 @@ menu:
   # Link: /link/ || fas fa-link
   # About: /about/ || fas fa-heart
 
-nav_info:
+nav:
   logo: # image
-  display_title: true # true or false
+  display_title: true
+  fixed: false # fixed navigation bar
 
 # Code Blocks (代碼相關)
 # --------------------------------------

languages/default.yml

@@ -117,5 +117,6 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 loading: Loading...
+load_more: Load More
 
 error404: Page not found

languages/en.yml

@@ -117,5 +117,6 @@ Snackbar:
   night_to_day: Light Mode Activated Manually
 
 loading: Loading...
+load_more: Load More
 
 error404: Page not found

languages/zh-CN.yml

@@ -118,5 +118,6 @@ Snackbar:
   night_to_day: 你已切换为浅色模式
 
 loading: 加载中...
+load_more: 加载更多
 
 error404: 页面没有找到

languages/zh-TW.yml

@@ -118,5 +118,6 @@ Snackbar:
   night_to_day: 你已切換為淺色模式
 
 loading: 載入中...
+load_more: 載入更多
 
 error404: 頁面沒有找到

layout/includes/additional-js.pug

@@ -66,4 +66,4 @@ div
     != partial("includes/third-party/pjax", {}, { cache: true })
 
   if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
-    script(async data-pjax src='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')

layout/includes/head.pug

@@ -15,7 +15,7 @@
 
 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
+meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
 title= tabTitle
 meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)

layout/includes/head/preconnect.pug

@@ -15,5 +15,5 @@ if theme.microsoft_clarity
 if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
   link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
 
-if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+if !theme.asset.busuanzi && (theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv)
   link(rel="preconnect" href="//busuanzi.ibruce.info")

layout/includes/header/nav.pug

@@ -1,21 +1,22 @@
-nav#nav
+- const isFixedClass = theme.nav.fixed ? 'fixed' : ''
+nav#nav(class=isFixedClass)
   span#blog-info
     a(href=url_for('/') title=config.title)
-      if theme.nav_info.logo
+      if theme.nav.logo
-        img.site-icon(src=url_for(theme.nav_info.logo))
+        img.site-icon(src=url_for(theme.nav.logo))
-      if theme.nav_info.display_title
+      if theme.nav.display_title
         span.site-name=config.title
     
   #menus
     if (theme.algolia_search.enable || theme.local_search.enable)
       #search-button
-        a.site-page.social-icon.search
+        a.site-page.social-icon.search(href="javascript:void(0);")
           i.fas.fa-search.fa-fw
           span=' '+_p('search.title')
     !=partial('includes/header/menu_item', {}, {cache: true})
 
     #toggle-menu
-      a.site-page
+      a.site-page(href="javascript:void(0);")
         i.fas.fa-bars.fa-fw
 
 

layout/includes/page/flink.pug

@@ -36,6 +36,7 @@
               }
 
               document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
+              window.lazyLoadInstance && window.lazyLoadInstance.update()
             })
         })()
 

package.json

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

plugins.yml

@@ -1,11 +1,11 @@
 algolia_search_v4:
   name: algoliasearch
   file: dist/algoliasearch-lite.umd.js
-  version: 4.14.2
+  version: 4.14.3
 instantsearch_v4:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.49.0
+  version: 4.49.4
 pjax:
   name: pjax
   file: pjax.min.js
@@ -37,17 +37,17 @@ disqusjs_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.7
+  version: 1.6.8
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.13.0
+  version: 2.14.6
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.13.0
+  version: 2.14.6
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -64,16 +64,16 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.3
+  version: 0.16.4
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.3
+  version: 0.16.4
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.1.7
+  version: 9.3.0
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -131,7 +131,7 @@ fancybox_v4:
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
-  version: 1.0.6
+  version: 1.0.8
 snackbar_css:
   name: node-snackbar
   file: dist/snackbar.min.css
@@ -144,7 +144,7 @@ fontawesomeV6:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 6.2.0
+  version: 6.2.1
 flickr_justified_gallery_js:
   name: flickr-justified-gallery
   file: dist/fjGallery.min.js
@@ -183,11 +183,11 @@ prismjs_autoloader:
 artalk_js:
   name: artalk
   file: dist/Artalk.js
-  version: 2.4.3
+  version: 2.4.4
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.4.3
+  version: 2.4.4
 pace_js:
   name: pace-js
   other_name: pace

scripts/events/cdn.js

@@ -46,7 +46,7 @@ hexo.extend.filter.register('before_generate', () => {
   }
 
   const createCDNLink = (data, type, cond = '') => {
-    Object.keys(data).map(key => {
+    Object.keys(data).forEach(key => {
       let { name, version, file, other_name } = data[key]
 
       const min_file = minFile(file)
@@ -65,6 +65,7 @@ hexo.extend.filter.register('before_generate', () => {
         min_cdnjs_file,
         cdnjs_name
       }
+
       const cdnSource = {
         local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
         jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
@@ -76,7 +77,7 @@ hexo.extend.filter.register('before_generate', () => {
       data[key] = cdnSource[type]
     })
 
-    if (cond === 'internal') data['main_css'] = 'css/index.css'
+    if (cond === 'internal') data.main_css = 'css/index.css'
     return data
   }
 

scripts/helpers/findArchiveLength.js

@@ -1,5 +1,5 @@
 hexo.extend.helper.register('findArchiveLength', function (func) {
-  const allPostsLength = this.site.posts.length;
+  const allPostsLength = this.site.posts.length
   if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false) return allPostsLength
   const { yearly, monthly, daily } = hexo.config.archive_generator
   const { year, month, day } = this.page
@@ -18,15 +18,15 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
   }
 
   const generateDateObj = (type) => {
-    let dateObj = []
+    const dateObj = []
     let length = 0
 
     posts.forEach(post => {
-      let date = post.date.clone()
+      const date = post.date.clone()
       const year = date.year()
       const month = date.month() + 1
       const day = date.date()
-      let lastData = dateObj[length - 1]
+      const lastData = dateObj[length - 1]
 
       if (!lastData || !compareFunc(type, lastData.year, lastData.month, lastData.day, year, month, day)) {
         const name = type === 'year' ? year : type === 'month' ? `${year}-${month}` : `${year}-${month}-${day}`
@@ -40,7 +40,7 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
       } else {
         lastData.count++
       }
-    });
+    })
 
     return dateObj
   }

scripts/helpers/inject_head_js.js

@@ -9,8 +9,8 @@ hexo.extend.helper.register('inject_head_js', function () {
   const { darkmode, aside } = this.theme
 
   const { theme_color } = hexo.theme.config
-  const themeColorLight = theme_color && theme_color.enable && theme_color.meta_theme_color_light || '#ffffff'
+  const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
-  const themeColorDark = theme_color && theme_color.enable && theme_color.meta_theme_color_dark || '#0d0d0d'
+  const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
 
   const localStore = `
     win.saveToLocal = {

scripts/helpers/page.js

@@ -74,8 +74,8 @@ hexo.extend.helper.register('injectHtml', function (data) {
 hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   if (page.year) {
     const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
-    const date_format = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
+    const dateFormat = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
-    return date(dateStr, date_format)
+    return date(dateStr, dateFormat)
   }
 
   const defaultTitle = this._p('page.archives')

scripts/tag/gallery.js

@@ -1,6 +1,8 @@
 /**
  * Butterfly
- * galleryGroup and allery
+ * galleryGroup and gallery
+ * {% galleryGroup [name] [descr] [url] [img] %}
+ * {% gallery [lazyload],[rowHeight],[limit] %}
  */
 
 'use strict'
@@ -8,13 +10,38 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)
 
 function gallery (args, content) {
-  return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+  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++
+    }
+
+    arr.push({
+      url: m[2],
+      alt: m[1],
+      title: m[3]
+    })
+  }
+
+  return `<div class="gallery">
+    <div class="fj-gallery ${lazyloadClass}" data-rowHeight="${rowHeight}" data-limit="${limit}">
+    <span class="gallery-data">${JSON.stringify(arr)}</span>
+    </div>
+    <button class="gallery-load-more"><span>${data[languages[0]].load_more}</span><i class="fa-solid fa-arrow-down"></i></button>
     </div>`
 }
 
 function galleryGroup (args) {
   const name = args[0]
-  const desrc = args[1]
+  const descr = args[1]
   const url = urlFor(args[2])
   const img = urlFor(args[3])
 
@@ -23,7 +50,7 @@ function galleryGroup (args) {
   <img class="gallery-group-img no-lightbox" src='${img}' alt="Group Image Gallery">
   <figcaption>
   <div class="gallery-group-name">${name}</div>
-  <p>${desrc}</p>
+  <p>${descr}</p>
   <a href='${url}'></a>
   </figcaption>
   </figure>

source/css/_layout/head.styl

@@ -137,6 +137,10 @@
       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)
 
@@ -155,7 +159,7 @@
           color: $light-blue
 
   &.nav-visible
-    #nav
+    #nav:not(.fixed)
       transition: all .5s
       transform: translate3d(0, 100%, 0)
 
@@ -261,6 +265,9 @@
   &.show
     opacity: 1
 
+  &.fixed
+    position: fixed
+
   #blog-info
     flex: 1
     color: var(--light-grey)

source/css/_mode/readmode.styl

@@ -106,7 +106,7 @@ if hexo-config('readmode')
           color: var(--font-color) !important
 
         .hljs
-          background: var(-highlight-bg) !important
+          background: var(--highlight-bg) !important
 
       h1,
       h2,

source/css/_search/algolia.styl

@@ -28,7 +28,7 @@
 
     .algolia-hit-item-content
       margin: 0 0 8px
-      word-break: break-all
+      word-break: break-word
 
     .ais-Pagination
       margin: 20px 0 0
@@ -69,6 +69,8 @@
     #algolia-hits
       > div
         overflow-y: scroll
+        margin: 0 -20px
+        padding: 0 22px
 
         +minWidth768()
           max-height: calc(80vh - 240px)

source/css/_search/local-search.styl

@@ -51,15 +51,17 @@
           color: $search-color
 
       .search-result
-        margin: 0 8px 8px 0
+        margin: 0 0 8px
-        word-break: break-all
+        word-break: break-word
 
       .search-keyword
         color: $search-keyword-highlight
         font-weight: bold
 
     .search-result-list
-      overflow-y: auto
+      overflow-y: overlay
+      margin: 0 -20px
+      padding: 0 22px
       max-height: calc(80vh - 130px)
 
       +maxWidth768()

source/css/_tags/gallery.styl

@@ -94,9 +94,46 @@
     overflow: auto
     padding: 0 0 16px
 
-  .fj-gallery
+  .gallery
     margin: 0 0 16px
+    text-align: center
+
+    .fj-gallery
       opacity: 0
 
       .img-alt
         display: none
+
+      &.lazyload
+        + button
+          display: inline-block
+
+      .gallery-data
+        display: none
+
+    button
+      display: none
+      margin-top: 25px
+      padding: 10px
+      width: 9em
+      border-radius: 5px
+      background: var(--btn-bg)
+      color: var(--btn-color)
+      font-weight: bold
+      font-size: 1.1em
+      transition: all .3s
+
+      & > *
+        transition: all .4s
+
+      i
+        width: 0
+        opacity: 0
+
+      &:hover
+        background: var(--btn-hover-color)
+
+        i
+          margin-left: 2px
+          width: 20px
+          opacity: 1

source/js/main.js

@@ -232,14 +232,42 @@ document.addEventListener('DOMContentLoaded', function () {
    * justified-gallery 圖庫排版
    */
   const runJustifiedGallery = function (ele) {
-    ele.forEach(item => {
+    const htmlStr = arr => {
-      const $imgList = item.querySelectorAll('img')
+      let str = ''
-
+      const replaceDq = str => str.replace(/"/g, '"') // replace double quotes to "
-      $imgList.forEach(i => {
+      arr.forEach(i => {
-        const dataLazySrc = i.getAttribute('data-lazy-src')
+        const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ''
-        if (dataLazySrc) i.src = dataLazySrc
+        const title = i.title ? `title="${replaceDq(i.title)}"` : ''
-        btf.wrap(i, 'div', { class: 'fj-gallery-item' })
+        str += `<div class="fj-gallery-item"><img src="${i.url}" ${alt + title}"></div>`
       })
+      return str
+    }
+
+    const lazyloadFn = (i, arr) => {
+      const loadItem = i.getAttribute('data-limit')
+      const arrLength = arr.length
+      if (arrLength > loadItem) i.insertAdjacentHTML('beforeend', htmlStr(arr.splice(0, loadItem)))
+      else {
+        i.insertAdjacentHTML('beforeend', htmlStr(arr))
+        i.classList.remove('lazyload')
+      }
+      return arrLength > loadItem ? loadItem : arrLength
+    }
+
+    ele.forEach(item => {
+      const arr = JSON.parse(item.querySelector('.gallery-data').textContent)
+      if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
+      else {
+        lazyloadFn(item, arr)
+        const limit = item.getAttribute('data-limit')
+        const clickBtnFn = () => {
+          const lastItemLength = lazyloadFn(item, arr)
+          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)
+      }
     })
 
     if (window.fjGallery) {
@@ -263,8 +291,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (perNum < 95) {
       $goUp.classList.add('show-percent')
       $goUp.querySelector('.scroll-percent').textContent = perNum
-    }
+    } else {
-    else {
       $goUp.classList.remove('show-percent')
     }
   }
@@ -329,7 +356,6 @@ document.addEventListener('DOMContentLoaded', function () {
       if (document.body.scrollHeight <= innerHeight) {
         $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
       }
-
     }, 200)
 
     window.scrollCollect = scrollTask

source/js/search/algolia.js

@@ -56,7 +56,7 @@ window.addEventListener('load', () => {
       post = '...'
     }
 
-    let matchContent = pre + content.substring(start, end) + post
+    const matchContent = pre + content.substring(start, end) + post
     return matchContent
   }
 
@@ -68,10 +68,11 @@ window.addEventListener('load', () => {
 
   const search = instantsearch({
     indexName: algolia.indexName,
+    /* global algoliasearch */
     searchClient: algoliasearch(algolia.appId, algolia.apiKey),
     searchFunction (helper) {
       helper.state.query && helper.search()
-    },
+    }
   })
 
   const configure = instantsearch.widgets.configure({
@@ -130,7 +131,7 @@ window.addEventListener('load', () => {
   })
 
   const powerBy = instantsearch.widgets.poweredBy({
-    container: '#algolia-info > .algolia-poweredBy',
+    container: '#algolia-info > .algolia-poweredBy'
   })
 
   const pagination = instantsearch.widgets.pagination({
@@ -144,7 +145,6 @@ window.addEventListener('load', () => {
     }
   })
 
-
   search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
 
   search.start()

source/js/search/local-search.js

@@ -154,7 +154,7 @@ window.addEventListener('load', () => {
               // highlight all keywords
               keywords.forEach(keyword => {
                 let regexStr = keyword
-                const specialRegex = new RegExp("[^\\w\\s]+") // match special characters
+                const specialRegex = /[^\w\s]+/ // match special characters
                 if (keyword.length === 1 && specialRegex.test(keyword)) {
                   regexStr = `\\${keyword}`
                 }

source/js/utils.js

@@ -62,10 +62,10 @@ const btf = {
     const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
     const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
     Snackbar.show({
-      text: text,
+      text,
       backgroundColor: bg,
-      showAction: showAction,
+      showAction,
-      duration: duration,
+      duration,
       pos: position,
       customClass: 'snackbar-css'
     })
@@ -186,12 +186,12 @@ const btf = {
    * @param {*} options object key: value
    */
   wrap: (selector, eleType, options) => {
-    const creatEle = document.createElement(eleType)
+    const createEle = document.createElement(eleType)
     for (const [key, value] of Object.entries(options)) {
-      creatEle.setAttribute(key, value)
+      createEle.setAttribute(key, value)
     }
-    selector.parentNode.insertBefore(creatEle, selector)
+    selector.parentNode.insertBefore(createEle, selector)
-    creatEle.appendChild(selector)
+    createEle.appendChild(selector)
   },
 
   unwrap: el => {
@@ -255,7 +255,7 @@ const btf = {
       if (!btf.isHidden(i)) {
         fjGallery(i, {
           itemSelector: '.fj-gallery-item',
-          rowHeight: 220,
+          rowHeight: i.getAttribute('data-rowHeight'),
           gutter: 4,
           onJustify: function () {
             this.$container.style.opacity = '1'
@@ -271,7 +271,7 @@ const btf = {
       const title = GLOBAL_CONFIG_SITE.title
       window.history.replaceState({
         url: location.href,
-        title: title
+        title
       }, title, anchor)
     }
   },