Merge branch 'dev'

update package.json
remove: 移除多余的代码
2026-04-10 21:17:07 +08:00 · 2023-01-18 20:28:07 +08:00 · 2023-01-18 20:27:31 +08:00 · 2023-01-17 15:02:42 +08:00 · 2023-01-17 14:46:55 +08:00 · 2023-01-15 01:40:13 +08:00
57 changed files with 557 additions and 379 deletions
--- a/_config.yml
+++ b/_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 (打字效果速度參數)
-  startDelay: 300 # time before typing starts in milliseconds
-  typeSpeed: 150 # type speed in milliseconds
-  backSpeed: 50 # backspacing speed in milliseconds
-  # loop (循環打字)
-  loop: true
+  # Customize typed.js (配置typed.js)
+  # https://github.com/mattboldt/typed.js/#customization
+  typed_option:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
-  # 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:
--- a/languages/default.yml
+++ b/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
--- a/languages/en.yml
+++ b/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
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -118,5 +118,6 @@ Snackbar:
  night_to_day: 你已切换为浅色模式

 loading: 加载中...
+load_more: 加载更多

 error404: 页面没有找到
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -118,5 +118,6 @@ Snackbar:
  night_to_day: 你已切換為淺色模式

 loading: 載入中...
+load_more: 載入更多

 error404: 頁面沒有找到
--- a/layout/includes/additional-js.pug
+++ b/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')
--- a/layout/includes/head.pug
+++ b/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})
--- a/layout/includes/head/Open_Graph.pug
+++ b/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)
--- a/layout/includes/head/analytics.pug
+++ b/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}"}`)

--- a/layout/includes/head/config.pug
+++ b/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},
+    }
  }
--- a/layout/includes/head/preconnect.pug
+++ b/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")
--- a/layout/includes/header/index.pug
+++ b/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()
--- a/layout/includes/header/nav.pug
+++ b/layout/includes/header/nav.pug
@@ -1,17 +1,21 @@
 nav#nav
-  span#blog_name
-    a#site-name(href=url_for('/')) #[=config.title]
+  span#blog-info
+    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


--- a/layout/includes/layout.pug
+++ b/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 = ''

--- a/layout/includes/mixins/article-sort.pug
+++ b/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
--- a/layout/includes/mixins/post-ui.pug
+++ b/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
--- a/layout/includes/page/flink.pug
+++ b/layout/includes/page/flink.pug
@@ -36,6 +36,7 @@
              }

              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
+              window.lazyLoadInstance && window.lazyLoadInstance.update()
            })
        })()

--- a/layout/includes/pagination.pug
+++ b/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))
-          img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
+        a(href=url_for(prev.path) title=prev.title)
+          if prev.cover_type === 'img'
+            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))
-          img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
+        a(href=url_for(next.path) title=next.title)
+          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
--- a/layout/includes/rightside.pug
+++ b/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
--- a/layout/includes/third-party/card-post-count/waline.pug
+++ b/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)
    }

--- a/layout/includes/third-party/comments/artalk.pug
+++ b/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)
    }
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/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
    }
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/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)
    }
  }
--- a/layout/includes/third-party/comments/waline.pug
+++ b/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()
-      getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
+        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+      })
    }
  }

--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/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)
    }

--- a/layout/includes/third-party/share/share-js.pug
+++ b/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)
--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -1,6 +1,30 @@
- const { effect,loop,source,sub,startDelay,typeSpeed,backSpeed } = theme.subtitle
+- const { effect,source,sub,typed_option } = theme.subtitle
 - let subContent = sub || new Array()

+script.
+  window.typedJSFn = {
+    init: (str) => {
+      window.typed = new Typed('#subtitle', Object.assign({
+        strings: str,
+        startDelay: 300,
+        typeSpeed: 150,
+        loop: true,
+        backSpeed: 50,
+      }, !{JSON.stringify(typed_option)}))
+    },
+    run: (subtitleType) => {
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+    }
+  }
+
 case source
  when 1
    script.
@@ -12,28 +36,13 @@ case source
              const from = '出自 ' + data.from
              const sub = !{JSON.stringify(subContent)}
              sub.unshift(data.hitokoto, from)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
            } else {
              document.getElementById('subtitle').innerHTML = data.hitokoto
            }
          })
      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)

  when 2
    script.
@@ -44,28 +53,13 @@ case source
            const from = '出自 ' + str[1]
            const sub = !{JSON.stringify(subContent)}
            sub.unshift(con, from)
-            window.typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: !{startDelay},
-              typeSpeed: !{typeSpeed},
-              loop: !{loop},
-              backSpeed: !{backSpeed},
-            })
+            typedJSFn.init(sub)
          } else {
            document.getElementById('subtitle').innerHTML = con
          }
        })
      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)

  when 3
    script.
@@ -76,53 +70,23 @@ case source
              const sub = !{JSON.stringify(subContent)}
              const content = result.data.content
              sub.unshift(content)
-              window.typed = new Typed('#subtitle', {
-                strings: sub,
-                startDelay: !{startDelay},
-                typeSpeed: !{typeSpeed},
-                loop: !{loop},
-                backSpeed: !{backSpeed},
-              })
+              typedJSFn.init(sub)
            } else {
              document.getElementById('subtitle').innerHTML = result.data.content
            }
          })
        })
      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)

  default
    - subContent = subContent.length ? subContent : new Array(config.subtitle)
    script.
      function subtitleType () {
-        if (!{effect}) { 
-          window.typed = new Typed("#subtitle", {
-            strings: !{JSON.stringify(subContent)},
-            startDelay: !{startDelay},
-            typeSpeed: !{typeSpeed},
-            loop: !{loop},
-            backSpeed: !{backSpeed}
-          })
+        if (!{effect}) {
+          typedJSFn.init(!{JSON.stringify(subContent)})
        } else {
          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
        }
      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
+      typedJSFn.run(subtitleType)
--- a/layout/includes/widget/card_recent_post.pug
+++ b/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'
--- a/package.json
+++ b/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": {
--- a/plugins.yml
+++ b/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
--- a/scripts/events/cdn.js
+++ b/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'),
-  createCDNLink(thirdPartySrc,CDN.third_party_provider), deleteNullValue(CDN.option))
+  themeConfig.asset = Object.assign(createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
+    createCDNLink(thirdPartySrc, CDN.third_party_provider), deleteNullValue(CDN.option))
 })
--- a/scripts/events/comment.js
+++ b/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
-})
+})
--- a/scripts/events/init.js
+++ b/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)
    }
--- a/scripts/events/welcome.js
+++ b/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}
  ===================================================================`)
 })
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -6,40 +6,40 @@
 'use strict'

 hexo.extend.filter.register('before_post_render', function (data) {
-  const { config } = this
-  if (config.post_asset_folder) {
-    const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  let randomCover
+  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) {
-    data.randomcover = randomCover()
-    return data
+  const randomCoverFn = () => {
+    const theme = hexo.theme.config
+    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
-  }
-}
--- a/scripts/helpers/findArchiveLength.js
+++ b/scripts/helpers/findArchiveLength.js
@@ -1,13 +1,13 @@
 hexo.extend.helper.register('findArchiveLength', function (func) {
-  const allPostsLength = this.site.posts.length;
-  if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false ) return allPostsLength
+  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
  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
-})
+})
--- a/scripts/helpers/inject_head_js.js
+++ b/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 themeColorDark = theme_color && theme_color.enable && theme_color.meta_theme_color_dark || '#0d0d0d'
+  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 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>`
 })
--- a/scripts/helpers/page.js
+++ b/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) {
-  return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
+hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex = false, trailingHtml = 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'
-    return date(dateStr, date_format)
+    const dateFormat = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
+    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
+})
--- a/scripts/helpers/related_post.js
+++ b/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 =
-        relatedPosts[i].cover === false
-          ? relatedPosts[i].randomcover
-          : relatedPosts[i].cover
+      const cover = relatedPosts[i].cover || 'var(--default-bg-color)'
      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 {
--- a/scripts/tag/gallery.js
+++ b/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('')}
-          </div>`
+  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*(?:["'](.*?)["']?)?\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>
--- a/source/css/_global/function.styl
+++ b/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%
--- a/source/css/_global/index.styl
+++ b/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
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -115,7 +115,7 @@
        width: w = 4.2em
        height: w

-        & > img
+        :first-child
          @extend .imgHover

      .content
--- a/source/css/_layout/footer.styl
+++ b/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
--- a/source/css/_layout/head.styl
+++ b/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
--- a/source/css/_layout/rightside.styl
+++ b/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
--- a/source/css/_mode/readmode.styl
+++ b/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,
--- a/source/css/_page/archives.styl
+++ b/source/css/_page/archives.styl
@@ -101,7 +101,7 @@
      width: 80px
      height: 80px

-      img
+      :first-child
        @extend .imgHover

    &-info
--- a/source/css/_page/homepage.styl
+++ b/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
--- a/source/css/_search/algolia.styl
+++ b/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)
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -51,15 +51,17 @@
          color: $search-color

      .search-result
-        margin: 0 8px 8px 0
-        word-break: break-all
+        margin: 0 0 8px
+        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()
--- a/source/css/_tags/gallery.styl
+++ b/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
-      display: none
+    .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
--- a/source/js/main.js
+++ b/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 $menusEle = document.querySelectorAll('#menus .menus_item')
-      menusWidth = 0
-      $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
-      const $searchEle = document.querySelector('#search-button')
-      searchWidth = $searchEle ? $searchEle.offsetWidth : 0
+      const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children)
+      const menusWidth = getAllWidth(document.getElementById('menus').children)
+      headerContentWidth = blogInfoWidth + menusWidth
      $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 $imgList = item.querySelectorAll('img')
-
-      $imgList.forEach(i => {
-        const dataLazySrc = i.getAttribute('data-lazy-src')
-        if (dataLazySrc) i.src = dataLazySrc
-        btf.wrap(i, 'div', { class: 'fj-gallery-item' })
+    const htmlStr = arr => {
+      let str = ''
+      const replaceDq = str => str.replace(/"/g, '&quot;') // replace double quotes to &quot;
+      arr.forEach(i => {
+        const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ''
+        const title = i.title ? `title="${replaceDq(i.title)}"` : ''
+        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')
-    newEle.rel = 'stylesheet'
-    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
-    document.body.appendChild(newEle)
+    getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
    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 isDown = scrollDirection(currentTop)
-        if (currentTop > 56) {
-          if (isDown) {
-            if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-            if (isChatBtnShow && isChatShow === true) {
-              chatBtnHide()
-              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)'
+      const currentTop = window.scrollY || document.documentElement.scrollTop
+      const isDown = scrollDirection(currentTop)
+      if (currentTop > 56) {
+        if (isDown) {
+          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
+          if (isChatBtnShow && isChatShow === true) {
+            chatBtnHide()
+            isChatShow = false
          }
        } else {
-          if (currentTop === 0) {
-            $header.classList.remove('nav-fixed', 'nav-visible')
+          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
+          if (isChatBtnHide && isChatShow === false) {
+            chatBtnShow()
+            isChatShow = true
          }
-          $rightside.style.cssText = "opacity: ''; transform: ''"
        }
-
-        if (document.body.scrollHeight <= innerHeight) {
+        $header.classList.add('nav-fixed')
+        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 () {
-      return btf.throttle(function () {
-        const currentTop = window.scrollY || document.documentElement.scrollTop
-        isToc && scrollPercent(currentTop)
-        findHeadPosition(currentTop)
-      }, 100)()
-    }
+    window.tocScrollFn = btf.throttle(() => {
+      const currentTop = window.scrollY || document.documentElement.scrollTop
+      if (isToc && GLOBAL_CONFIG.percent.toc) {
+        $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
+      }
+      findHeadPosition(currentTop)
+    }, 100)
+
    window.addEventListener('scroll', tocScrollFn)
  }

--- a/source/js/search/algolia.js
+++ b/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)
-                        : result.contentStrip
-                        ? cutContent(result.contentStrip.value)
-                        : result.content
-                        ? cutContent(result.content.value)
-                        : ''
+          ? cutContent(result.contentStripTruncate.value)
+          : result.contentStrip
+            ? cutContent(result.contentStrip.value)
+            : result.content
+              ? 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()

--- a/source/js/search/local-search.js
+++ b/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>')
              })
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
--- a/source/js/utils.js
+++ b/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,
-      duration: duration,
+      showAction,
+      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)
-    creatEle.appendChild(selector)
+    selector.parentNode.insertBefore(createEle, 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
  }
 }
Author	SHA1	Message	Date
Jerry	062641c8ab	Merge branch 'dev'	2023-01-18 20:28:07 +08:00
Jerry	08fabdc2d1	update package.json	2023-01-18 20:27:31 +08:00
Jerry	6a50b62869	remove: 移除多余的代码	2023-01-17 15:02:42 +08:00
Jerry	396fb102da	feat: 可配置 typed.js 的參數 closed #1154 fix: 修復 typeJSFn 重複賦值的 bug fix: 修復固定狀態欄後，標題有陰影的 bug fix: 修復 gallery 標籤將圖片鏈接截斷導致404無法加載圖片的 bug closed #1160 fix: 修復開啟導航欄固定後，點擊部分滾動向上的按鈕，滾動的目標部分被導航欄遮擋的 bug closed #1158 fix: 修復固定導航欄後，toc 被遮擋的 closed #1159 fix: 切換簡繁時，會改變 html 的 lang 屬性	2023-01-17 14:46:55 +08:00
Jerry	b019a1fd33	Merge branch 'dev'	2023-01-15 01:40:13 +08:00
Jerry	929a5608d3	fix: 修復 pjax 下， waline js 會重複加載的 bug	2023-01-15 01:39:16 +08:00
Jerry	9a3b41912a	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 優化	2023-01-14 00:36:34 +08:00
Jerry	0f915f47ef	breaking changes: 移除 cnzz 分析 feat: 導航欄可隱藏博客名字 feat: 導航欄可設置 logo closed #1104	2022-12-22 00:16:54 +08:00
Jerry	e2565a9f39	breaking changes: cover 的顯示優化 #1101 feature: default_cover 可配置顏色 fix: 修復使用本地搜索時，輸入特殊符號沒有顯示結果的 bug closed #1110 fix: 修復頂部圖和 footer 配置帶有/的顏色參數時，無法顯示顏色的 bug improvement: 鼠標移動到分頁時，文章分頁按鈕增加説明文字 improvement: 文章頁的頂部圖顯示次序為 top_img > cover > default_top_img improvement: canonical 的鏈接根據配置生成 #1111	2022-12-13 01:23:50 +08:00
Jerry	4cd26d183c	update	2022-11-18 18:35:04 +08:00
Jerry	f218a0a14a	breaking changes: 移除 subtitle 一句網調用（api 已失效) feat: 右下角按鈕增加預覽進度顯示 feat: toc可設置是否顯示預覽進度 fix: 修復 TypeError: require(...) is not a function 的報錯 #1102 improvement: 日期設置相對日期時，文章的日期格式和最新評論的日期格式統一為年月日	2022-11-18 18:30:25 +08:00
Jerry Wong	6c7debfd24	Merge pull request #1102 from GZTimeWalker/patch-1 fix: `TypeError: require(...) is not a function` when setup	2022-11-18 13:32:47 +08:00
Jerry Wong	eb88a5bb4a	Update welcome.js	2022-11-18 13:32:35 +08:00
Jerry Wong	f07823903f	Update init.js	2022-11-18 13:32:03 +08:00
GZTime	4bd5edd955	chore: remove semicolons	2022-11-16 03:45:54 +08:00
GZTime	ecf4d341e6	fix: `TypeError: require(...) is not a function`	2022-11-16 03:36:24 +08:00