Merge branch 'dev'

fix: 修復 typeJSFn 重複賦值的 bug
fix: 修復固定狀態欄後，標題有陰影的 bug
fix: 修復 gallery 標籤將圖片鏈接截斷導致404無法加載圖片的 bug closed #1160
fix: 修復開啟導航欄固定後，點擊部分滾動向上的按鈕，滾動的目標部分被導航欄遮擋的 bug closed #1158
fix: 修復固定導航欄後，toc 被遮擋的 closed #1159
fix: 切換簡繁時，會改變 html 的 lang 屬性

_config.yml

@@ -13,6 +13,11 @@ menu:
   # Link: /link/ || fas fa-link
   # About: /about/ || fas fa-heart
 
+nav:
+  logo: # image
+  display_title: true
+  fixed: false # fixed navigation bar
+
 # Code Blocks (代碼相關)
 # --------------------------------------
 
@@ -185,6 +190,7 @@ toc:
   number: true
   expand: false
   style_simple: false # for post
+  scroll_percent: true
 
 post_copyright:
   enable: true
@@ -396,7 +402,7 @@ tidio:
   public_key:
 
 # daovoice
-# http://daovoice.io/
+# http://dashboard.daovoice.io/app
 daovoice:
   enable: false
   app_id:
@@ -440,10 +446,6 @@ baidu_analytics:
 # https://analytics.google.com/analytics/web/
 google_analytics:
 
-# CNZZ Analytics
-# https://www.umeng.com/
-cnzz_analytics:
-
 # Cloudflare Analytics
 # https://www.cloudflare.com/zh-tw/web-analytics/
 cloudflare_analytics:
@@ -623,16 +625,13 @@ subtitle:
   enable: false
   # Typewriter Effect (打字效果)
   effect: true
-  # Effect Speed Options (打字效果速度參數)
+  # Customize typed.js (配置typed.js)
-  startDelay: 300 # time before typing starts in milliseconds
+  # https://github.com/mattboldt/typed.js/#customization
-  typeSpeed: 150 # type speed in milliseconds
+  typed_option:
-  backSpeed: 50 # backspacing speed in milliseconds
-  # loop (循環打字)
-  loop: true
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
-  # source: 2  調用一句網（簡體） http://yijuzhan.com/
+  # source: 2  調用一句網（簡體） https://yijuzhan.com/
   # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
@@ -753,6 +752,9 @@ darkmode:
   # autoChangeMode: false
   autoChangeMode: false
 
+# show scroll percent in scroll-to-top button
+rightside_scroll_percent: false
+
 # Don't modify the following settings unless you know how they work (非必要請不要修改 )
 # Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
 # Don't repeat 不要重複
@@ -894,7 +896,7 @@ CDN:
   # when set it to local, you need to install hexo-butterfly-extjs
   third_party_provider: jsdelivr
 
-  # Add version number to CDN, true or false  
+  # Add version number to CDN, true or false
   version: false
 
   # Custom format
@@ -952,4 +954,5 @@ CDN:
     # prismjs_lineNumber_js:
     # prismjs_autoloader:
     # artalk_js:
-    # artalk_css:
+    # artalk_css:
+    # busuanzi:

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)
@@ -26,7 +26,7 @@ meta(name="theme-color" content=themeColor)
 include ./head/Open_Graph.pug
 
 !=favicon_tag(theme.favicon || config.favicon)
-link(rel="canonical" href=urlNoIndex())
+link(rel="canonical" href=urlNoIndex(null,config.pretty_urls.trailing_index,config.pretty_urls.trailing_html))
 
 //- 預解析
 !=partial('includes/head/preconnect', {}, {cache: true})

layout/includes/head/Open_Graph.pug

@@ -1,8 +1,9 @@
 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',
-      image: (page.cover || theme.avatar.img) ? full_url_for(page.cover || theme.avatar.img) : '',
+      image: coverVal ? full_url_for(coverVal) : '',
       fb_admins: theme.facebook_comments.user_id || '',
       fb_app_id: theme.facebook_comments.app_id || '',
     }, theme.Open_Graph_meta.option)

layout/includes/head/analytics.pug

@@ -16,9 +16,6 @@ if theme.google_analytics
     gtag('js', new Date());
     gtag('config', '!{theme.google_analytics}');
 
-if theme.cnzz_analytics
-  script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`)
-
 if theme.cloudflare_analytics
   script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
 

layout/includes/head/config.pug

@@ -120,5 +120,9 @@ script.
     },
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
-    isAnchor: !{theme.anchor.auto_update || false}
+    isAnchor: !{theme.anchor.auto_update || false},
+    percent: {
+      toc: !{theme.toc.scroll_percent},
+      rightside: !{theme.rightside_scroll_percent},
+    }
   }

layout/includes/head/preconnect.pug

@@ -6,9 +6,6 @@ if theme.google_analytics
 if theme.baidu_analytics
   link(rel="preconnect" href="//hm.baidu.com")
 
-if theme.cnzz_analytics
-  link(rel="preconnect" href="//s4.cnzz.com")
-
 if theme.cloudflare_analytics
   link(rel="preconnect" href="//static.cloudflareinsights.com")
 
@@ -18,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/index.pug

@@ -1,6 +1,6 @@
 if !theme.disable_top_img && page.top_img !== false
   if is_post()
-    - var top_img = page.top_img || page.cover || page.randomcover
+    - var top_img = page.top_img || page.cover || theme.default_top_img
   else if is_page()
     - var top_img = page.top_img || theme.default_top_img
   else if is_tag()
@@ -17,7 +17,7 @@ if !theme.disable_top_img && page.top_img !== false
     - var top_img = page.top_img || theme.default_top_img
 
   if top_img !== false
-    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
+    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
     - var bg_img = top_img ? imgSource : ''
     - var site_title = page.title || page.tag || page.category || config.title
     - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
@@ -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,17 +1,21 @@
 nav#nav
-  span#blog_name
+  span#blog-info
-    a#site-name(href=url_for('/')) #[=config.title]
+    a(href=url_for('/') title=config.title)
+      if theme.nav.logo
+        img.site-icon(src=url_for(theme.nav.logo))
+      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/layout.pug

@@ -33,7 +33,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
           if (footerBg === true)
             - var footer_bg = bg_img
           else
-            - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
+            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
         else
           - var footer_bg = ''
 

layout/includes/mixins/article-sort.pug

@@ -11,7 +11,10 @@ mixin articleSort(posts)
       .article-sort-item(class=no_cover)
         if article.cover && theme.cover.archives_enable
           a.article-sort-item-img(href=url_for(article.path) title=title)
-            img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+            if article.cover_type === 'img'
+              img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+            else
+              div(style=`background: ${article.cover}`)
         .article-sort-item-info
           .article-sort-item-time
             i.far.fa-calendar-alt

layout/includes/mixins/post-ui.pug

@@ -14,7 +14,10 @@ mixin postUI(posts)
       if post_cover && theme.cover.index_enable
         .post_cover(class=leftOrRight)
           a(href=url_for(link) title=title)
-            img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
+            if article.cover_type === 'img'
+              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+            else
+              div.post-bg(style=`background: ${post_cover}`)
       .recent-post-info(class=no_cover)
         a.article-title(href=url_for(link) title=title)= title
         .article-meta-wrap

layout/includes/page/flink.pug

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

layout/includes/pagination.pug

@@ -13,19 +13,23 @@ if is_post()
     if(prev)
       - var hasPageNext = next ? 'pull-left' : 'pull-full'
       .prev-post(class=hasPageNext)
-        - var pagination_cover = prev.cover === false ? prev.randomcover : prev.cover
+        a(href=url_for(prev.path) title=prev.title)
-        a(href=url_for(prev.path))
+          if prev.cover_type === 'img'
-          img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+            img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+          else
+            .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
           .pagination-info
             .label=_p('pagination.prev')
             .prev_info=prev.title
           
     if(next)
       - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
-      - var pagination_cover = next.cover == false ? next.randomcover : next.cover
       .next-post(class=hasPagePrev)
-        a(href=url_for(next.path))
+        a(href=url_for(next.path) title=next.title)
-          img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+          if next.cover_type === 'img'
+            img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+          else
+            .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
           .pagination-info
             .label=_p('pagination.next')
             .next_info=next.title

layout/includes/rightside.pug

@@ -57,4 +57,5 @@ mixin rightsideItem(array)
       +rightsideItem(showArray)
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))
+      span.scroll-percent
       i.fas.fa-arrow-up

layout/includes/third-party/card-post-count/waline.pug

@@ -10,7 +10,7 @@ script.
         const waline = Waline.init(initData)
       }
 
-      if (typeof Waline === 'function') initWaline() 
+      if (typeof Waline === 'object') initWaline() 
       else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
     }
 

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

@@ -1,13 +1,6 @@
 - const { server, site, option } = theme.artalk
 
 script.
-  function addArtalkSource () {
-    const ele = document.createElement('link')
-    ele.rel = 'stylesheet'
-    ele.href= '!{theme.asset.artalk_css}'
-    document.getElementsByTagName('head')[0].appendChild(ele)
-  }
-
   function loadArtalk () {
     function initArtalk () {
       window.artalkItem = new Artalk(Object.assign({
@@ -22,7 +15,7 @@ script.
 
     if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
     else {
-      addArtalkSource()
+      getCSS('!{theme.asset.artalk_css}')
       typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
                                   : setTimeout(()=>{initArtalk()},200)
     }

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

@@ -2,13 +2,6 @@
 
 script.
   function loadDisqusjs () {
-    function addDisqusjsCSS () {
-      const ele = document.createElement('link')
-      ele.rel = 'stylesheet'
-      ele.href= '!{url_for(theme.asset.disqusjs_css)}'
-      document.getElementsByTagName('head')[0].appendChild(ele)
-    }
-
     function initDisqusjs () {
       window.disqusjs = null
       disqusjs = new DisqusJS(Object.assign({
@@ -34,7 +27,7 @@ script.
 
     if (window.disqusJsLoad) initDisqusjs()
     else {
-      addDisqusjsCSS()
+      getCSS('!{url_for(theme.asset.disqusjs_css)}')
       getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs)
       window.disqusJsLoad = true
     }

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

@@ -1,11 +1,4 @@
 script.
-  function addGitalkSource () {
-    const ele = document.createElement('link')
-    ele.rel = 'stylesheet'
-    ele.href= '!{url_for(theme.asset.gitalk_css)}'
-    document.getElementsByTagName('head')[0].appendChild(ele)
-  }
-
   function loadGitalk () {
     function initGitalk () {
       var gitalk = new Gitalk(Object.assign({
@@ -23,7 +16,7 @@ script.
 
     if (typeof Gitalk === 'function') initGitalk()
     else {
-      addGitalkSource()
+      getCSS('!{url_for(theme.asset.gitalk_css)}')
       getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk)
     }
   }

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

@@ -3,13 +3,6 @@
 
 script.
   function loadWaline () {
-    function insertCSS () {
-      const link = document.createElement("link")
-      link.rel = "stylesheet"
-      link.href = "!{url_for(theme.asset.waline_css)}"
-      document.head.appendChild(link)
-    }
-
     function initWaline () {
       const waline = Waline.init(Object.assign({
         el: '#waline-wrap',
@@ -21,10 +14,11 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'function') initWaline()
+    if (typeof Waline === 'object') initWaline()
     else {
-      insertCSS()
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
-      getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+      })
     }
   }
 

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

@@ -64,7 +64,7 @@ script.
         }) 
       }
 
-      if (typeof Waline === 'function') loadWaline() 
+      if (typeof Waline === 'object') loadWaline()
       else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
     }
 

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

@@ -1,3 +1,4 @@
-.social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites)
+- const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
+.social-share(data-image=url_for(coverVal) data-sites= theme.sharejs.sites)
 link(rel='stylesheet' href=url_for(theme.asset.sharejs_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.asset.sharejs) defer)

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', {
+              typedJSFn.init(sub)
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
             } else {
               document.getElementById('subtitle').innerHTML = data.hitokoto
             }
           })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        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', {
+            typedJSFn.init(sub)
-              strings: sub,
-              startDelay: !{startDelay},
-              typeSpeed: !{typeSpeed},
-              loop: !{loop},
-              backSpeed: !{backSpeed},
-            })
           } else {
             document.getElementById('subtitle').innerHTML = con
           }
         })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        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', {
+              typedJSFn.init(sub)
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
             } else {
               document.getElementById('subtitle').innerHTML = result.data.content
             }
           })
         })
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
 
   default
     - subContent = subContent.length ? subContent : new Array(config.subtitle)
     script.
       function subtitleType () {
-        if (!{effect}) { 
+        if (!{effect}) {
-          window.typed = new Typed("#subtitle", {
+          typedJSFn.init(!{JSON.stringify(subContent)})
-            strings: !{JSON.stringify(subContent)},
-            startDelay: !{startDelay},
-            typeSpeed: !{typeSpeed},
-            loop: !{loop},
-            backSpeed: !{backSpeed}
-          })
         } else {
           document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
         }
       }
-
+      typedJSFn.run(subtitleType)
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }

layout/includes/widget/card_recent_post.pug

@@ -14,7 +14,10 @@ if theme.aside.card_recent_post.enable
         .aside-list-item(class=no_cover)
           if post_cover && theme.cover.aside_enable
             a.thumbnail(href=url_for(link) title=title)
-              img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+              if article.cover_type === 'img'
+                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+              else
+                div(style=`background: ${post_cover}`)
           .content
             a.title(href=url_for(link) title=title)= title
             if theme.aside.card_recent_post.sort === 'updated'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.5.1",
+  "version": "4.6.1",
   "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.7
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.13.0
+  version: 2.14.7
 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

@@ -12,7 +12,7 @@ hexo.extend.filter.register('before_generate', () => {
   const themeConfig = hexo.theme.config
   const { CDN } = themeConfig
 
-  const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir,'/plugins.yml'), engine: 'yaml'})
+  const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir, '/plugins.yml'), engine: 'yaml' })
   const internalSrc = {
     main: {
       name: 'hexo-theme-butterfly',
@@ -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}`,
@@ -72,11 +73,11 @@ hexo.extend.filter.register('before_generate', () => {
         cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
         custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
       }
-      
+
       data[key] = cdnSource[type]
     })
 
-    if (cond === 'internal') data['main_css'] = 'css/index.css'
+    if (cond === 'internal') data.main_css = 'css/index.css'
     return data
   }
 
@@ -89,6 +90,6 @@ hexo.extend.filter.register('before_generate', () => {
     return obj
   }
 
-  themeConfig.asset = Object.assign(createCDNLink(internalSrc,CDN.internal_provider,'internal'),
+  themeConfig.asset = Object.assign(createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
-  createCDNLink(thirdPartySrc,CDN.third_party_provider), deleteNullValue(CDN.option))
+    createCDNLink(thirdPartySrc, CDN.third_party_provider), deleteNullValue(CDN.option))
 })

scripts/events/comment.js

@@ -11,4 +11,4 @@ hexo.extend.filter.register('before_generate', () => {
   }
   const newArray = use.map(item => item.toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase()))
   themeConfig.comments.use = newArray
-})
+})

scripts/events/init.js

@@ -1,8 +1,7 @@
-const logger = require('hexo-log')()
-
 hexo.extend.filter.register('before_generate', () => {
   // Get first two digits of the Hexo version number
   const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
+  const logger = hexo.log
 
   if (hexoVer < 5.3) {
     logger.error('Please update Hexo to V5.3.0 or higher!')
@@ -13,7 +12,9 @@ hexo.extend.filter.register('before_generate', () => {
   if (hexo.locals.get) {
     const data = hexo.locals.get('data')
     if (data && data.butterfly) {
-      logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ")
+      logger.error(
+        " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' "
+      )
       logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
       process.exit(-1)
     }

scripts/events/welcome.js

@@ -1,17 +1,13 @@
-const logger = require('hexo-log')()
-
 hexo.on('ready', () => {
   const { version } = require('../../package.json')
-  logger.info(`
+  hexo.log.info(`
   ===================================================================
-                                                                     
+      #####  #    # ##### ##### ###### #####  ###### #      #   #
-      #####  #    # ##### ##### ###### #####  ###### #      #   #    
+      #    # #    #   #     #   #      #    # #      #       # #
-      #    # #    #   #     #   #      #    # #      #       # #     
+      #####  #    #   #     #   #####  #    # #####  #        #
-      #####  #    #   #     #   #####  #    # #####  #        #     
+      #    # #    #   #     #   #      #####  #      #        #
-      #    # #    #   #     #   #      #####  #      #        #      
+      #    # #    #   #     #   #      #   #  #      #        #
-      #    # #    #   #     #   #      #   #  #      #        #    
+      #####   ####    #     #   ###### #    # #      ######   #
-      #####   ####    #     #   ###### #    # #      ######   #  
-
                             ${version}
   ===================================================================`)
 })

scripts/filters/random_cover.js

@@ -6,40 +6,40 @@
 'use strict'
 
 hexo.extend.filter.register('before_post_render', function (data) {
-  const { config } = this
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
-  if (config.post_asset_folder) {
+  let randomCover
-    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  let coverVal = data.cover
+
+  // Add path to top_img and cover if post_asset_folder is enabled
+  if (hexo.config.post_asset_folder) {
     const topImg = data.top_img
-    const cover = data.cover
     if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) data.top_img = data.path + topImg
-    if (cover && cover.indexOf('/') === -1) data.cover = data.path + cover
+    if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) data.cover = data.path + coverVal
   }
 
-  if (data.cover === false) {
+  const randomCoverFn = () => {
-    data.randomcover = randomCover()
+    const theme = hexo.theme.config
-    return data
+    if (!(theme.cover && theme.cover.default_cover)) return false
+    if (!Array.isArray(theme.cover.default_cover)) return theme.cover.default_cover
+    const num = Math.floor(Math.random() * theme.cover.default_cover.length)
+    return theme.cover.default_cover[num]
+  }
+
+  if (coverVal === false) return data
+
+  // If cover is not set, use random cover
+  if (!coverVal) {
+    randomCover = randomCoverFn()
+    data.cover = randomCover
+    coverVal = randomCover // update coverVal
+  }
+
+  if (coverVal) {
+    if (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal)) {
+      data.cover_type = 'img'
+      return data
+    }
   }
 
-  data.cover = data.cover || randomCover()
   return data
 })
-
-function randomCover () {
-  const theme = hexo.theme.config
-  let cover
-  let num
-
-  if (theme.cover && theme.cover.default_cover) {
-    if (!Array.isArray(theme.cover.default_cover)) {
-      cover = theme.cover.default_cover
-      return cover
-    } else {
-      num = Math.floor(Math.random() * theme.cover.default_cover.length)
-      cover = theme.cover.default_cover[num]
-      return cover
-    }
-  } else {
-    cover = theme.default_top_img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-    return cover
-  }
-}

scripts/helpers/findArchiveLength.js

@@ -1,13 +1,13 @@
 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
+  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
   if (yearly === false || !year) return allPostsLength
 
   const posts = this.site.posts.sort('date')
 
-  const compareFunc = (type,y1,m1,d1,y2,m2,d2) => {
+  const compareFunc = (type, y1, m1, d1, y2, m2, d2) => {
     if (type === 'year') {
       return y1 === y2
     } else if (type === 'month') {
@@ -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,12 +40,12 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
       } else {
         lastData.count++
       }
-    });
+    })
 
     return dateObj
   }
 
-  const data = func('createArchiveObj', ()=> {
+  const data = func('createArchiveObj', () => {
     const yearObj = yearly ? generateDateObj('year') : []
     const monthObj = monthly ? generateDateObj('month') : []
     const dayObj = daily ? generateDateObj('day') : []
@@ -55,4 +55,4 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
 
   const name = month ? day ? `${year}-${month}-${day}` : `${year}-${month}` : year
   return data.find(item => item.name === name).count
-})
+})

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 = {
@@ -60,6 +60,17 @@ hexo.extend.helper.register('inject_head_js', function () {
     })
   `
 
+  const getCSS = `
+    win.getCSS = url => new Promise((resolve, reject) => {
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = url
+      link.onload = () => resolve()
+      link.onerror = () => reject()
+      document.head.appendChild(link)
+    })
+  `
+
   let darkmodeJs = ''
   if (darkmode.enable) {
     darkmodeJs = `
@@ -144,5 +155,5 @@ hexo.extend.helper.register('inject_head_js', function () {
     detectApple()
     `
 
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
+  return `<script>(win=>{${localStore + getScript + getCSS + darkmodeJs + asideStatus + detectApple}})(window)</script>`
 })

scripts/helpers/page.js

@@ -54,8 +54,8 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
   return result
 })
 
-hexo.extend.helper.register('urlNoIndex', function (url = null) {
+hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = false) {
-  return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
+  return prettyUrls(url || this.url, { trailing_index: trailingIndex, trailing_html: trailingHtml })
 })
 
 hexo.extend.helper.register('md5', function (path) {
@@ -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')
@@ -95,3 +95,11 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
 
   return loop(menu) || defaultTitle
 })
+
+hexo.extend.helper.register('isImgOrUrl', function (path) {
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
+    return true
+  }
+  return false
+})

scripts/helpers/related_post.js

@@ -15,7 +15,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
           title: post.title,
           path: post.path,
           cover: post.cover,
-          randomcover: post.randomcover,
+          cover_type: post.cover_type,
           weight: 1,
           updated: post.updated,
           created: post.date
@@ -50,13 +50,14 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
     result += '<div class="relatedPosts-list">'
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-      const cover =
+      const cover = relatedPosts[i].cover || 'var(--default-bg-color)'
-        relatedPosts[i].cover === false
-          ? relatedPosts[i].randomcover
-          : relatedPosts[i].cover
       const title = this.escape_html(relatedPosts[i].title)
       result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${title}">`
-      result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+      if (relatedPosts[i].cover_type === 'img') {
+        result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+      } else {
+        result += `<div class="cover" style="background: ${cover}"></div>`
+      }
       if (dateType === 'created') {
         result += `<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> ${this.date(relatedPosts[i].created, hexoConfig.date_format)}</div>`
       } else {

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
-          </div>`
+  args = args.join(' ').split(',')
+  const rowHeight = args[1] || 220
+  const limit = args[2] || 10
+  const lazyload = args[0] === 'true'
+  const regex = /!\[(.*?)\]\(([^\s]*)\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/_global/function.styl

@@ -36,11 +36,11 @@
 
 .postImgHover
   &:hover
-    img
+    .cover
       opacity: .8
       transform: scale(1.1)
 
-  img
+  .cover
     position: absolute
     width: 100%
     height: 100%

source/css/_global/index.styl

@@ -33,6 +33,7 @@
   --pseudo-hover: $pseudo-hover
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
+  --default-bg-color: $theme-color
 
 body
   position: relative
@@ -165,7 +166,7 @@ a
 if $site-name-font
   #site-title,
   #site-subtitle,
-  #site-name,
+  .site-name,
   #aside-content .author-info__name,
   #aside-content .author-info__description
     font-family: $site-name-font

source/css/_layout/aside.styl

@@ -115,7 +115,7 @@
         width: w = 4.2em
         height: w
 
-        & > img
+        :first-child
           @extend .imgHover
 
       .content

source/css/_layout/footer.styl

@@ -1,6 +1,6 @@
 #footer
   position: relative
-  background: $light-blue
+  background-color: $light-blue
   background-attachment: scroll
   background-position: bottom
   background-size: cover

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,8 +138,16 @@
       box-shadow: 0 5px 6px -5px alpha($grey, .6)
       transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
+      #blog-info
+        color: var(--font-color)
+
+        &:hover
+          color: $light-blue
+
+        .site-name
+          text-shadow: none
+
       a,
-      #site-name,
       #toggle-menu
         color: var(--font-color)
         text-shadow: none
@@ -146,7 +155,12 @@
         &:hover
           color: $light-blue
 
-  &.nav-visible
+    &.fixed
+      #nav
+        top: 0
+        transition: all .5s
+
+  &.nav-visible:not(.fixed)
     #nav
       transition: all .5s
       transform: translate3d(0, 100%, 0)
@@ -156,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
@@ -253,8 +280,15 @@
   &.show
     opacity: 1
 
-  #blog_name
+  #blog-info
     flex: 1
+    color: var(--light-grey)
+    @extend .limit-one-line
+
+    .site-icon
+      margin-right: 6px
+      height: 36px
+      vertical-align: middle
 
   #toggle-menu
     display: none
@@ -270,10 +304,9 @@
     &:hover
       color: var(--white)
 
-  #site-name
+  .site-name
     text-shadow: 2px 2px 4px rgba($dark-black, .15)
     font-weight: bold
-    cursor: pointer
 
   .menus_items
     display: inline

source/css/_layout/rightside.styl

@@ -47,3 +47,22 @@
   +maxWidth900()
     #hide-aside-btn
       display: none
+
+  if hexo-config('rightside_scroll_percent')
+    #go-up
+      .scroll-percent
+        display: none
+
+      &.show-percent
+        .scroll-percent
+          display: block
+
+          & + i
+            display: none
+
+      &:hover
+        .scroll-percent
+          display: none
+
+          & + i
+            display: block

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/_page/archives.styl

@@ -101,7 +101,7 @@
       width: 80px
       height: 80px
 
-      img
+      :first-child
         @extend .imgHover
 
     &-info

source/css/_page/homepage.styl

@@ -15,7 +15,7 @@
       height: auto
 
     &:hover
-      img.post_bg
+      img.post-bg
         transform: scale(1.1)
 
     &.ads-wrap
@@ -31,7 +31,7 @@
         width: 100%
         height: 230px
 
-      img.post_bg
+      .post-bg
         @extend .imgHover
 
       &.right

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
-    opacity: 0
+    text-align: center
 
-    .img-alt
+    .fj-gallery
-      display: none
+      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

@@ -1,21 +1,24 @@
 document.addEventListener('DOMContentLoaded', function () {
-  let blogNameWidth, menusWidth, searchWidth, $nav
+  let headerContentWidth, $nav
   let mobileSidebarOpen = false
 
-  const adjustMenu = (init) => {
+  const adjustMenu = init => {
+    const getAllWidth = ele => {
+      let width = 0
+      ele.length && Array.from(ele).forEach(i => { width += i.offsetWidth })
+      return width
+    }
+
     if (init) {
-      blogNameWidth = document.getElementById('site-name').offsetWidth
+      const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children)
-      const $menusEle = document.querySelectorAll('#menus .menus_item')
+      const menusWidth = getAllWidth(document.getElementById('menus').children)
-      menusWidth = 0
+      headerContentWidth = blogInfoWidth + menusWidth
-      $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
-      const $searchEle = document.querySelector('#search-button')
-      searchWidth = $searchEle ? $searchEle.offsetWidth : 0
       $nav = document.getElementById('nav')
     }
 
     let hideMenuIndex = ''
     if (window.innerWidth <= 768) hideMenuIndex = true
-    else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
+    else hideMenuIndex = headerContentWidth > $nav.offsetWidth - 120
 
     if (hideMenuIndex) {
       $nav.classList.add('hide-menu')
@@ -229,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, '&quot;') // replace double quotes to &quot;
-      $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) {
@@ -244,13 +275,24 @@ document.addEventListener('DOMContentLoaded', function () {
       return
     }
 
-    const newEle = document.createElement('link')
+    getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
-    newEle.rel = 'stylesheet'
-    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
-    document.body.appendChild(newEle)
     getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
   }
 
+  /**
+   * rightside scroll percent
+   */
+  const rightsideScrollPercent = currentTop => {
+    const perNum = btf.getScrollPercent(currentTop, document.body)
+    const $goUp = document.getElementById('go-up')
+    if (perNum < 95) {
+      $goUp.classList.add('show-percent')
+      $goUp.querySelector('.scroll-percent').textContent = perNum
+    } else {
+      $goUp.classList.remove('show-percent')
+    }
+  }
+
   /**
    * 滾動處理
    */
@@ -276,40 +318,43 @@ document.addEventListener('DOMContentLoaded', function () {
     const $header = document.getElementById('page-header')
     const isChatBtnHide = typeof chatBtnHide === 'function'
     const isChatBtnShow = typeof chatBtnShow === 'function'
+    const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     const scrollTask = btf.throttle(() => {
-        const currentTop = window.scrollY || document.documentElement.scrollTop
+      const currentTop = window.scrollY || document.documentElement.scrollTop
-        const isDown = scrollDirection(currentTop)
+      const isDown = scrollDirection(currentTop)
-        if (currentTop > 56) {
+      if (currentTop > 56) {
-          if (isDown) {
+        if (isDown) {
-            if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-            if (isChatBtnShow && isChatShow === true) {
+          if (isChatBtnShow && isChatShow === true) {
-              chatBtnHide()
+            chatBtnHide()
-              isChatShow = false
+            isChatShow = false
-            }
-          } else {
-            if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-            if (isChatBtnHide && isChatShow === false) {
-              chatBtnShow()
-              isChatShow = true
-            }
-          }
-          $header.classList.add('nav-fixed')
-          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-            $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
           }
         } else {
-          if (currentTop === 0) {
+          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-            $header.classList.remove('nav-fixed', 'nav-visible')
+          if (isChatBtnHide && isChatShow === false) {
+            chatBtnShow()
+            isChatShow = true
           }
-          $rightside.style.cssText = "opacity: ''; transform: ''"
         }
-
+        $header.classList.add('nav-fixed')
-        if (document.body.scrollHeight <= innerHeight) {
+        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
           $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
         }
-      }, 200)
+      } else {
-    
+        if (currentTop === 0) {
+          $header.classList.remove('nav-fixed', 'nav-visible')
+        }
+        $rightside.style.cssText = "opacity: ''; transform: ''"
+      }
+
+      isShowPercent && rightsideScrollPercent(currentTop)
+
+      if (document.body.scrollHeight <= innerHeight) {
+        $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+      }
+    }, 200)
+
     window.scrollCollect = scrollTask
 
     window.addEventListener('scroll', scrollCollect)
@@ -325,26 +370,15 @@ document.addEventListener('DOMContentLoaded', function () {
 
     if (!($article && (isToc || isAnchor))) return
 
-    let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
+    let $tocLink, $cardToc, autoScrollToc, $tocPercentage, isExpand
 
     if (isToc) {
       const $cardTocLayout = document.getElementById('card-toc')
       $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
       $tocLink = $cardToc.querySelectorAll('.toc-link')
-      const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
+      $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
       isExpand = $cardToc.classList.contains('is-expand')
 
-      scrollPercent = currentTop => {
-        const docHeight = $article.clientHeight
-        const winHeight = document.documentElement.clientHeight
-        const headerHeight = $article.offsetTop
-        const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
-        const scrollPercent = (currentTop - headerHeight) / (contentMath)
-        const scrollPercentRounded = Math.round(scrollPercent * 100)
-        const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
-        $tocPercentage.textContent = percentage
-      }
-
       window.mobileToc = {
         open: () => {
           $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
@@ -433,13 +467,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // main of scroll
-    window.tocScrollFn = function () {
+    window.tocScrollFn = btf.throttle(() => {
-      return btf.throttle(function () {
+      const currentTop = window.scrollY || document.documentElement.scrollTop
-        const currentTop = window.scrollY || document.documentElement.scrollTop
+      if (isToc && GLOBAL_CONFIG.percent.toc) {
-        isToc && scrollPercent(currentTop)
+        $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
-        findHeadPosition(currentTop)
+      }
-      }, 100)()
+      findHeadPosition(currentTop)
-    }
+    }, 100)
+
     window.addEventListener('scroll', tocScrollFn)
   }
 

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) {
+    searchFunction (helper) {
       helper.state.query && helper.search()
-    },
+    }
   })
 
   const configure = instantsearch.widgets.configure({
@@ -89,16 +90,16 @@ window.addEventListener('load', () => {
   const hits = instantsearch.widgets.hits({
     container: '#algolia-hits',
     templates: {
-      item(data) {
+      item (data) {
         const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
         const result = data._highlightResult
         const content = result.contentStripTruncate
-                        ? cutContent(result.contentStripTruncate.value)
+          ? cutContent(result.contentStripTruncate.value)
-                        : result.contentStrip
+          : result.contentStrip
-                        ? cutContent(result.contentStrip.value)
+            ? cutContent(result.contentStrip.value)
-                        : result.content
+            : result.content
-                        ? cutContent(result.content.value)
+              ? cutContent(result.content.value)
-                        : ''
+              : ''
         return `
           <a href="${link}" class="algolia-hit-item-link">
           ${result.title.value || 'no-title'}
@@ -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,8 +145,7 @@ window.addEventListener('load', () => {
     }
   })
 
-
+  search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
-  search.addWidgets([configure,searchBox,hits,stats,powerBy,pagination]) // add the widgets to the instantsearch instance
 
   search.start()
 

source/js/search/local-search.js

@@ -56,7 +56,7 @@ window.addEventListener('load', () => {
       const res = await response.text()
       const t = await new window.DOMParser().parseFromString(res, 'text/xml')
       const a = await t
-      data = [...a.querySelectorAll('entry')].map(item =>{
+      data = [...a.querySelectorAll('entry')].map(item => {
         return {
           title: item.querySelector('title').textContent,
           content: item.querySelector('content') && item.querySelector('content').textContent,
@@ -84,8 +84,11 @@ window.addEventListener('load', () => {
     $input.addEventListener('input', function () {
       const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
       if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+      else {
+        $resultContent.innerHTML = ''
+        return
+      }
 
-      $resultContent.innerHTML = ''
       let str = '<div class="search-result-list">'
       if (keywords.length <= 0) return
       let count = 0
@@ -150,7 +153,12 @@ window.addEventListener('load', () => {
 
               // highlight all keywords
               keywords.forEach(keyword => {
-                const regS = new RegExp(keyword, 'gi')
+                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>')
               })

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'
     })
@@ -88,7 +88,7 @@ const btf = {
       const minuteCount = dateDiff / minute
 
       if (monthCount > 12) {
-        result = datePost.toLocaleDateString().replace(/\//g, '-')
+        result = datePost.toISOString().slice(0, 10)
       } else if (monthCount >= 1) {
         result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
       } else if (dayCount >= 1) {
@@ -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({
@@ -186,12 +187,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 +256,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,8 +272,19 @@ const btf = {
       const title = GLOBAL_CONFIG_SITE.title
       window.history.replaceState({
         url: location.href,
-        title: title
+        title
       }, title, anchor)
     }
+  },
+
+  getScrollPercent: (currentTop, ele) => {
+    const docHeight = ele.clientHeight
+    const winHeight = document.documentElement.clientHeight
+    const headerHeight = ele.offsetTop
+    const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+    const scrollPercent = (currentTop - headerHeight) / (contentMath)
+    const scrollPercentRounded = Math.round(scrollPercent * 100)
+    const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
+    return percentage
   }
 }