feat: 替換 Justified Gallery 為 flickr-justified-gallery

feat: 完全移除 jquery feat: 清除配置文件的CDN, 默認 CDN 不再顯示在 config feat: 切換夜間模式後, mermaid 也會切換夜間主題 feat: 移除騰訊分析 feat: 移除右下角字體調整按鈕 feat: 本地搜索可處理 json feat: 右下角按鈕自定義順序 feat: 右小角按鈕 UI 微調 improvement: 手機端更改閲讀模式退出按鈕到右下角 improvement: photofigcaption 和 fancybox 的 figcaption 優先顯示圖片的title屬性，然後是 alt 屬性 improvement: 首頁ui微調 improvement: 禁止一些瀏覽器會出現點擊左下角按鈕出現放大網頁的行為 improvement: js 優化 fix: 修復窗口大小改變時，導航欄的ui 可能會錯亂的 bug fix: 修復 pjax 下, twikoo 評論獲取是上一篇評論的 bug fix: 壓縮 html 代碼後, mermaid 顯示正常
2026-04-10 13:07:06 +08:00 · 2021-10-12 23:27:56 +08:00
parent 7e729cff79
commit cb82bfb7b6
34 changed files with 611 additions and 570 deletions
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t

 ### GIT

-> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)
+> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)

 Stable branch [recommend]:

--- a/README_CN.md
+++ b/README_CN.md
@@ -24,7 +24,7 @@

 ### Git 安裝

-> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
+> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。

 在博客根目錄裡安裝穩定版【推薦】

--- a/_config.yml
+++ b/_config.yml
@@ -401,10 +401,6 @@ baidu_analytics:
 # https://analytics.google.com/analytics/web/
 google_analytics:

-# Tencent Analytics ID
-# https://mta.qq.com
-tencent_analytics:
-
 # CNZZ Analytics
 # https://www.umeng.com/
 cnzz_analytics:
@@ -673,9 +669,6 @@ newest_comments:
 # Bottom right button (右下角按鈕)
 # --------------------------------------

-# Change font size
-change_font_size: false
-
 # Conversion between Traditional and Simplified Chinese (簡繁轉換)
 translate:
  enable: false
@@ -704,6 +697,14 @@ darkmode:
  # autoChangeMode: false
  autoChangeMode: false

+# Don't modify the following settings unless you know how they work (非必要請不要修改 )
+# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
+# Don't repeat 不要重複
+rightside_item_order:
+  enable: false
+  hide: # readmode,translate,darkmode,hideAside
+  show: # toc,chat,comment
+
 # Lightbox (圖片大圖查看模式)
 # --------------------------------------
 # You can only choose one, or neither (只能選擇一個 或者 兩個都不選)
@@ -724,7 +725,9 @@ fancybox: true
 mermaid:
  enable: false
  # built-in themes: default/forest/dark/neutral
-  theme: default
+  theme:
+    light: default
+    dark: dark

 # Note (Bootstrap Callout)
 note:
@@ -817,86 +820,85 @@ inject:
 # 非必要請不要修改
 CDN:
  # main
-  main_css: /css/index.css
-  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
-  main: /js/main.js
-  utils: /js/utils.js
+  main_css:
+  main:
+  utils:

  # pjax
-  pjax: https://cdn.jsdelivr.net/npm/pjax/pjax.min.js
+  pjax:

  # comments
-  gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
-  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
-  valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
-  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
-  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
-  utterances: https://utteranc.es/client.js
-  twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
-  waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
+  gitalk:
+  gitalk_css:
+  valine:
+  disqusjs:
+  disqusjs_css:
+  utterances:
+  twikoo:
+  waline:

  # share
-  addtoany: https://static.addtoany.com/menu/page.js
-  sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
-  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
+  addtoany:
+  sharejs:
+  sharejs_css:

  # search
-  local_search: /js/search/local-search.js
-  algolia_js: /js/search/algolia.js
-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+  local_search:
+  algolia_js:
+  algolia_search:
+  algolia_search_css:

  # math
-  mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
-  katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
-  katex_copytex: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js
-  katex_copytex_css: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css
-  mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+  mathjax:
+  katex:
+  katex_copytex:
+  katex_copytex_css:
+  mermaid:

  # count
-  busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+  busuanzi:

  # background effect
-  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
-  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
-  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
+  canvas_ribbon:
+  canvas_fluttering_ribbon:
+  canvas_nest:

-  lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
-  instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
-  typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js
-  pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
+  lazyload:
+  instantpage:
+  typed:
+  pangu:

  # photo
-  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js
-  medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+  fancybox_css:
+  fancybox:
+  medium_zoom:

  # snackbar
-  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
-  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
+  snackbar_css:
+  snackbar:

  # effect
-  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
-  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
-  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
-  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
+  activate_power_mode:
+  fireworks:
+  click_heart:
+  ClickShowText:

  # fontawesome
-  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
+  fontawesome:

  # Conversion between Traditional and Simplified Chinese
-  translate: /js/tw_cn.js
+  translate:

-  # justifiedGallery
-  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js
-  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css
+  # flickr-justified-gallery
+  flickr_justified_gallery_js:
+  flickr_justified_gallery_css:

  # aplayer
-  aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
-  aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
-  meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
+  aplayer_css:
+  aplayer_js:
+  meting_js:

  # Prism.js
-  prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
-  prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
-  prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
+  prismjs_js:
+  prismjs_lineNumber_js:
+  prismjs_autoloader:
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -94,8 +94,6 @@ share: Share

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase font size
-  font_minus_title: Decrease font size
  translate_title: Toggle Between Traditional Chinese And Simplified Chinese
  night_mode_title: Toggle Between Light And Dark Mode
  back_to_top: Back To Top
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -94,8 +94,6 @@ share: Share

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase font size
-  font_minus_title: Decrease font size
  translate_title: Switch Between Traditional Chinese And Simplified Chinese
  night_mode_title: Switch Between Light And Dark Mode
  back_to_top: Back To Top
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -95,8 +95,6 @@ share: 分享

 rightside:
  readmode_title: 阅读模式
-  font_plus_title: 放大字体
-  font_minus_title: 缩小字体
  translate_title: 简繁转换
  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -95,8 +95,6 @@ share: 分享

 rightside:
  readmode_title: 閱讀模式
-  font_plus_title: 放大字型
-  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
  night_mode_title: 淺色和深色模式轉換
  back_to_top: 回到頂部
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -20,7 +20,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, minimum-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, user-scalable=no")
 title= tabTitle
 if pageKeywords
  meta(name="keywords" content=pageKeywords)
--- a/layout/includes/head/analytics.pug
+++ b/layout/includes/head/analytics.pug
@@ -16,18 +16,6 @@ if theme.google_analytics
    gtag('js', new Date());
    gtag('config', '!{theme.google_analytics}');

-if theme.tencent_analytics
-  script.
-    var _mtac = {};
-    (function() {
-        var mta = document.createElement("script");
-        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
-        mta.setAttribute("name", "MTAH5");
-        mta.setAttribute("sid", "!{theme.tencent_analytics}");
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(mta, s);
-    })();
-
 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}`)

--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -112,10 +112,9 @@ script.
    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
    Snackbar: !{Snackbar},
    source: {
-      jQuery: '!{url_for(theme.CDN.jquery)}',
      justifiedGallery: {
-        js: '!{url_for(theme.CDN.justifiedGallery_js)}',
-        css: '!{url_for(theme.CDN.justifiedGallery_css)}'
+        js: '!{url_for(theme.CDN.flickr_justified_gallery_js)}',
+        css: '!{url_for(theme.CDN.flickr_justified_gallery_css)}'
      }
    },
    isPhotoFigcaption: !{theme.photofigcaption},
--- 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.tencent_analytics
-  link(rel="preconnect" href="//pingjs.qq.com")
-
 if theme.cnzz_analytics
  link(rel="preconnect" href="//s4.cnzz.com")

--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -43,25 +43,25 @@ mixin postUI(posts)
                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
          if (theme.post_meta.page.categories && article.categories.data.length > 0)
            span.article-meta
-              span.article-meta__separator |
+              span.article-meta-separator |
              i.fas.fa-inbox
              each item, index in article.categories.data
                a(href=url_for(item.path)).article-meta__categories #[=item.name]
                if (index < article.categories.data.length - 1)
-                  i.fas.fa-angle-right
+                  i.fas.fa-angle-right.article-meta-link
          if (theme.post_meta.page.tags && article.tags.data.length > 0)
            span.article-meta.tags
-              span.article-meta__separator |
+              span.article-meta-separator |
              i.fas.fa-tag
              each item, index in article.tags.data
                a(href=url_for(item.path)).article-meta__tags #[=item.name]
                if (index < article.tags.data.length - 1)
-                  span.article-meta__link #[='•']
+                  span.article-meta-link #[='•']
          
          mixin countBlockInIndex
            - needLoadCountJs = true
            span.article-meta
-              span.article-meta__separator |
+              span.article-meta-separator |
              i.fas.fa-comments
              if block
                block
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,38 +1,60 @@
-#rightside
-  #rightside-config-hide
-    if is_post() && theme.readmode
+- const { readmode, translate, darkmode, aside, chat_btn } = theme
+mixin rightsideItem(array)
+  each item in array
+    case item
+      when 'readmode'
+        if is_post() && readmode
          button#readmode(type="button" title=_p('rightside.readmode_title'))
            i.fas.fa-book-open
-    if theme.change_font_size
-      button#font-plus(type="button" title=_p('rightside.font_plus_title'))
-        i.fas.fa-plus
-      button#font-minus(type="button" title=_p('rightside.font_minus_title'))
-        i.fas.fa-minus
-    if theme.translate.enable
-      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
-    if theme.darkmode.enable && theme.darkmode.button
+      when 'translate'
+        if translate.enable
+          button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
+      when 'darkmode'
+        if darkmode.enable && darkmode.button
          button#darkmode(type="button" title=_p('rightside.night_mode_title'))
            i.fas.fa-adjust
-    if theme.aside.enable && theme.aside.button && page.aside !== false
+      when 'hideAside'
+        if aside.enable && aside.button && page.aside !== false
          button#hide-aside-btn(type="button" title=_p('rightside.aside'))
            i.fas.fa-arrows-alt-h
-  #rightside-config-show
-    if is_post()
-      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size)
-        button#rightside_config(type="button" title=_p("rightside.setting"))
-          i.fas.fa-cog.fa-spin
-    else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size
-      button#rightside_config(type="button" title=_p("rightside.setting"))
-        i.fas.fa-cog.fa-spin
-
+      when 'toc'
        if showToc
          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
            i.fas.fa-list-ul
-    if theme.chat_btn
+      when 'chat'
+        if chat_btn
          button#chat_btn(type="button" title=_p("rightside.chat_btn"))
            i.fas.fa-sms
+      when 'comment'
        if commentsJsLoad
          a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
            i.fas.fa-comments
+
+#rightside
+  - const { enable, hide, show } = theme.rightside_item_order
+  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
+  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
+
+  
+  #rightside-config-hide
+    if hideArray
+      +rightsideItem(hideArray)
+  #rightside-config-show
+    if enable
+      if hide
+        button#rightside_config(type="button" title=_p("rightside.setting"))
+          i.fas.fa-cog.fa-spin
+    else
+      if is_post()
+        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
+          button#rightside_config(type="button" title=_p("rightside.setting"))
+            i.fas.fa-cog.fa-spin
+      else if translate.enable || (darkmode.enable && darkmode.button)
+        button#rightside_config(type="button" title=_p("rightside.setting"))
+          i.fas.fa-cog.fa-spin
+
+    if showArray
+      +rightsideItem(showArray)
+
    button#go-up(type="button" title=_p("rightside.back_to_top"))
      i.fas.fa-arrow-up
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -1,45 +1,48 @@
+- const { envId, region, option } = theme.twikoo
+- const { use, lazyload, count } = theme.comments
+
 script.
  (()=>{
-    const $countDom = document.getElementById('twikoo-count')
    const init = () => {
      twikoo.init(Object.assign({
        el: '#twikoo-wrap',
-        envId: '!{theme.twikoo.envId}',
-        region: '!{theme.twikoo.region}',
+        envId: '!{envId}',
+        region: '!{region}',
        onCommentLoaded: function () {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
        }
-      }, !{JSON.stringify(theme.twikoo.option)}))
+      }, !{JSON.stringify(option)}))
    }

    const getCount = () => {
      twikoo.getCommentsCount({
-        envId: '!{theme.twikoo.envId}',
-        region: '!{theme.twikoo.region}',
+        envId: '!{envId}',
+        region: '!{region}',
        urls: [window.location.pathname],
        includeReply: false
      }).then(function (res) {
-        $countDom.innerText = res[0].count
+        document.getElementById('twikoo-count').innerText = res[0].count
      }).catch(function (err) {
        console.error(err);
      });
    }

-    const loadTwikoo = (bool = false) => {
-      if (typeof twikoo === 'object') {
+    const runFn = () => {
      init()
-        bool && $countDom && setTimeout(getCount,0)
-      } else {
-        getScript('!{theme.CDN.twikoo}').then(()=> {
-          init()
-          bool && $countDom && setTimeout(getCount,0)
-        })
-      }
+      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
    }

-    if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
-      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
-      else loadTwikoo(true)
+    const loadTwikoo = () => {
+      if (typeof twikoo === 'object') {
+        setTimeout(runFn,0)
+        return
+      } 
+      getScript('!{theme.CDN.twikoo}').then(runFn)
+    }
+
+    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+      else loadTwikoo()
    } else {
      window.loadOtherComment = () => {
        loadTwikoo()
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -1,15 +1,25 @@
 script.
-  if (document.getElementsByClassName('mermaid').length) {
-    if (window.mermaidJsLoad) mermaid.init()
-    else {
-      getScript('!{theme.CDN.mermaid}').then(() => {
-        window.mermaidJsLoad = true
-        mermaid.initialize({
-          theme: '!{theme.mermaid.theme}',
+  (() => {
+    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
+    if ($mermaidWrap.length) {
+      window.runMermaid = () => {
+        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
+
+        Array.from($mermaidWrap).forEach((item, index) => {
+          const mermaidSrc = item.firstElementChild
+          const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
+          const mermaidID = 'mermaid-' + index
+          const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
+          mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
+            mermaidSrc.insertAdjacentHTML('afterend', svgCode)
          })
-        !{theme.pjax.enable} && mermaid.init()
        })
      }
+
+      const loadMermaid = () => {
+        window.mermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
      }

-
+      window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
+    }
+  })()
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -74,11 +74,6 @@ script.

    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

-    // Analytics
-    if (!{theme.tencent_analytics ? true : false}) {
-      MtaH5.pgv()
-    }
-
    // prismjs
    typeof Prism === 'object' && Prism.highlightAll()

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "4.0.0-b7",
+  "version": "4.0.0-b8",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
--- a/scripts/events/cdn.js
+++ b/scripts/events/cdn.js
@@ -0,0 +1,104 @@
+/**
+ * Butterfly
+ * CDN
+ */
+
+'use strict'
+
+hexo.extend.filter.register('before_generate', () => {
+  const themeConfig = hexo.theme.config
+  const defaultCDN = {
+    main_css: '/css/index.css',
+    main: '/js/main.js',
+    utils: '/js/utils.js',
+
+    // pjax
+    pjax: 'https://cdn.jsdelivr.net/npm/pjax/pjax.min.js',
+
+    // comments
+    gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js',
+    gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css',
+    valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
+    disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js',
+    disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css',
+    utterances: 'https://utteranc.es/client.js',
+    twikoo: 'https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js',
+    waline: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js',
+
+    // share
+    addtoany: 'https://static.addtoany.com/menu/page.js',
+    sharejs: 'https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js',
+    sharejs_css: 'https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css',
+
+    // search
+    local_search: '/js/search/local-search.js',
+    algolia_js: '/js/search/algolia.js',
+    algolia_search: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js',
+    algolia_search_css: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css',
+
+    // math
+    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
+    katex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css',
+    katex_copytex: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js',
+    katex_copytex_css: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css',
+    mermaid: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js',
+
+    // count
+    busuanzi: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js',
+
+    // background effect
+    canvas_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js',
+    canvas_fluttering_ribbon: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js',
+    canvas_nest: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js',
+
+    lazyload: 'https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js',
+    instantpage: 'https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js',
+    typed: 'https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js',
+    pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js',
+
+    // photo
+    fancybox_css: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css',
+    fancybox: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js',
+    medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js',
+
+    // snackbar
+    snackbar_css: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css',
+    snackbar: 'https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js',
+
+    // effect
+    activate_power_mode: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js',
+    fireworks: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js',
+    click_heart: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js',
+    ClickShowText: 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js',
+
+    // fontawesome
+    fontawesome: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css',
+
+    // Conversion between Traditional and Simplified Chinese
+    translate: '/js/tw_cn.js',
+
+    // flickr-justified-gallery
+    flickr_justified_gallery_js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
+    flickr_justified_gallery_css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css',
+
+    // aplayer
+    aplayer_css: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css',
+    aplayer_js: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js',
+    meting_js: 'https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js',
+
+    // Prism.js
+    prismjs_js: 'https://cdn.jsdelivr.net/npm/prismjs/prism.min.js',
+    prismjs_lineNumber_js: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js',
+    prismjs_autoloader: 'https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js'
+  }
+
+  // delete null value
+  const deleteNullValue = obj => {
+    for (const i in obj) {
+      obj[i] === null && delete obj[i]
+    }
+    return obj
+  }
+
+  themeConfig.CDN = Object.assign(defaultCDN, deleteNullValue(themeConfig.CDN))
+})
--- a/scripts/helpers/inject_head_js.js
+++ b/scripts/helpers/inject_head_js.js
@@ -6,7 +6,7 @@
 'use strict'

 hexo.extend.helper.register('inject_head_js', function () {
-  const { darkmode, aside, change_font_size, index_img, disable_top_img, pjax} = this.theme
+  const { darkmode, aside } = this.theme

  const localStore = `
    win.saveToLocal = {
@@ -131,31 +131,14 @@ hexo.extend.helper.register('inject_head_js', function () {
    `
  }

-  let changFontAside = ''
-  if (change_font_size) {
-    changFontAside = `
-    const fontSizeVal = saveToLocal.get('global-font-size')
-    if (fontSizeVal !== undefined) {
-      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
-    }
-    `
-  }
-
-  let detectApple = ''
-  if (!disable_top_img || index_img !== false) {
-    detectApple = `
+  const detectApple = `
    const detectApple = () => {
-      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
+      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    `

-    if (pjax.enable) {
-      detectApple += 'document.addEventListener(\'pjax:complete\', detectApple)'
-    }
-  }
-
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside + detectApple}})(window)</script>`
+  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
 })
--- a/scripts/tag/gallery.js
+++ b/scripts/tag/gallery.js
@@ -8,7 +8,7 @@
 const urlFor = require('hexo-util').url_for.bind(hexo)

 function gallery (args, content) {
-  return `<div class="justified-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
+  return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
          </div>`
 }

--- a/scripts/tag/mermaid.js
+++ b/scripts/tag/mermaid.js
@@ -9,7 +9,9 @@
 const { escapeHTML } = require('hexo-util')

 function mermaid (args, content) {
-  return `<div class="mermaid">${escapeHTML(content)}</div>`
+  return `<div class="mermaid-wrap"><pre class="mermaid-src" hidden>
+  ${escapeHTML(content)}
+  </pre></div>`
 }

 hexo.extend.tag.register('mermaid', mermaid, { ends: true })
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -246,8 +246,8 @@
      max-height: calc(100% - 60px)
      width: $toc-mobile-width
      opacity: 0
+      transition: initial
      transform-origin: right bottom
-      transition: none

    .toc-percentage
      float: right
@@ -317,8 +317,9 @@
  border-radius: 70px

  img
+    width: 100%
    height: 100%
-    transition: filter 375ms ease-in 0.2s, transform .3s
+    transition: filter 375ms ease-in .2s, transform .3s
    object-fit: cover

    &:hover
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -239,7 +239,6 @@
  top: 0
  z-index: 90
  display: flex
-  flex-wrap: wrap
  align-items: center
  padding: 0 36px
  width: 100%
@@ -335,13 +334,10 @@
        font-size: inherit

    .menus_items
-      position: absolute
-      left: 0
-      visibility: hidden
-      opacity: 0
+      display: none

    #search-button span
-      display: none !important
+      display: none

  #search-button
    display: inline
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -1,6 +1,6 @@
 #rightside
  position: fixed
-  right: -38px
+  right: -48px
  bottom: $rightside-bottom
  z-index: 100
  opacity: 0
@@ -8,7 +8,7 @@

  #rightside-config-hide
    transition: transform .4s
-    transform: translate(35px, 0)
+    transform: translate(48px, 0)

    &.show
      transform: translate(0, 0) !important
@@ -17,17 +17,25 @@
    & > button,
    & > a
      display: block
-      margin-bottom: 2px
-      width: 30px
-      height: 30px
+      margin-bottom: 5px
+      width: w = 38px
+      height: w
+      border-radius: 5px
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      font-size: 16px
+      line-height: w
+      touch-action: manipulation

      &:hover
        background-color: var(--btn-hover-color)

+      +maxWidth768()
+        width: w = 34px
+        height: w
+        line-height: w
+
  #mobile-toc-button
    display: none

--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -61,16 +61,9 @@ if hexo-config('waline.bg')
 .medium-zoom-overlay
  z-index: 99999 !important

-.mermaid
-  overflow: auto
+.mermaid-wrap
  margin: 0 0 20px
-  background: $white
  text-align: center
-  opacity: 0
-  transition: all .3s
-
-  &[data-processed]
-    opacity: 1

 .utterances,
 .fb-comments iframe
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -91,7 +91,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    // hide-tags
    .hide-button,
    .btn-beautify,
-    .mermaid,
    .hl-label,
    .post-outdate-notice,
    .error-img,
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -36,6 +36,7 @@ if hexo-config('readmode')
      position: fixed
      top: 30px
      right: 30px
+      z-index: 100
      width: 40px
      height: 40px
      border-radius: 8px
@@ -44,6 +45,10 @@ if hexo-config('readmode')
      font-size: 16px
      transition: background .3s

+      +maxWidth768()
+        top: initial
+        bottom: 30px
+
      &:hover
        background: var(--exit-btn-hover)

--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -54,5 +54,7 @@
  #page-header.full_page
    background-attachment: scroll !important

-  .recent-post-item
+  .recent-post-item,
+  .avatar-img,
+  .flink-item-icon
    transform: translateZ(0)
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -8,7 +8,7 @@
    flex-direction: row
    align-items: center
    overflow: hidden
-    height: 20em
+    height: 18em

    +maxWidth768()
      flex-direction: column
@@ -24,7 +24,7 @@

    .post_cover
      overflow: hidden
-      width: 45%
+      width: 44%
      height: 100%

      +maxWidth768()
@@ -42,7 +42,7 @@

    & >.recent-post-info
      padding: 0 40px
-      width: 55%
+      width: 57%

      +maxWidth768()
        padding: 20px 20px 30px
@@ -88,13 +88,10 @@
          else
            display: none

-        .article-meta__separator
+        .article-meta-separator
          margin: 0 6px

-        .article-meta__link
-          margin: 0 4px
-
-        .fa-angle-right
+        .article-meta-link
          margin: 0 4px

        if hexo-config('post_meta.page.date_format') == 'relative'
@@ -110,4 +107,4 @@

      & > .content
        @extend .limit-more-line
-        -webkit-line-clamp: 3
+        -webkit-line-clamp: 2
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -1,3 +1,4 @@
+#article-container
  figure.gallery-group
    position: relative
    float: left
@@ -26,13 +27,13 @@ figure.gallery-group

    img
      position: relative
-    margin: 0 !important
-    max-width: none !important
+      margin: 0
+      max-width: none
      width: calc(100% + 20px)
      height: 250px
      backface-visibility: hidden
      opacity: .8
-    transition: all .3s, filter 375ms ease-in 0.2s !important
+      transition: all .3s, filter 375ms ease-in .2s
      transform: translate3d(-10px, 0, 0)
      object-fit: cover

@@ -93,15 +94,9 @@ figure.gallery-group
    overflow: auto
    padding: 0 0 16px

-.justified-gallery
+  .fj-gallery
    margin: 0 0 16px
-
-  img
    opacity: 0

    .img-alt
      display: none
-
-  .fancybox
-    width: auto
-    text-align: inherit
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,23 +1,21 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const $blogName = document.getElementById('site-name')
-  let blogNameWidth = $blogName && $blogName.offsetWidth
-  const $menusEle = document.querySelector('#menus .menus_items')
-  let menusWidth = $menusEle && $menusEle.offsetWidth
+  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen
+
+  const adjustMenu = (init) => {
+    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')
-  let searchWidth = $searchEle && $searchEle.offsetWidth
-
-  const adjustMenu = (change = false) => {
-    if (change) {
-      blogNameWidth = $blogName && $blogName.offsetWidth
-      menusWidth = $menusEle && $menusEle.offsetWidth
-      searchWidth = $searchEle && $searchEle.offsetWidth
+      searchWidth = $searchEle ? $searchEle.offsetWidth : 0
+      $nav = document.getElementById('nav')
    }
-    const $nav = document.getElementById('nav')
-    let t
-    if (window.innerWidth < 768) t = true
-    else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120

-    if (t) {
+    if (window.innerWidth < 768) hideMenuIndex = true
+    else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
+
+    if (hideMenuIndex) {
      $nav.classList.add('hide-menu')
    } else {
      $nav.classList.remove('hide-menu')
@@ -26,44 +24,26 @@ document.addEventListener('DOMContentLoaded', function () {

  // 初始化header
  const initAdjust = () => {
-    adjustMenu()
-    document.getElementById('nav').classList.add('show')
+    adjustMenu(true)
+    $nav.classList.add('show')
  }

  // sidebar menus
-  const sidebarFn = () => {
-    const $toggleMenu = document.getElementById('toggle-menu')
-    const $mobileSidebarMenus = document.getElementById('sidebar-menus')
-    const $menuMask = document.getElementById('menu-mask')
-    const $body = document.body
-
-    function openMobileSidebar () {
+  const sidebarFn = {
+    open: () => {
      btf.sidebarPaddingR()
-      $body.style.overflow = 'hidden'
-      btf.fadeIn($menuMask, 0.5)
-      $mobileSidebarMenus.classList.add('open')
-    }
-
-    function closeMobileSidebar () {
+      document.body.style.overflow = 'hidden'
+      btf.fadeIn(document.getElementById('menu-mask'), 0.5)
+      document.getElementById('sidebar-menus').classList.add('open')
+      mobileSidebarOpen = true
+    },
+    close: () => {
+      const $body = document.body
      $body.style.overflow = ''
      $body.style.paddingRight = ''
-      btf.fadeOut($menuMask, 0.5)
-      $mobileSidebarMenus.classList.remove('open')
+      btf.fadeOut(document.getElementById('menu-mask'), 0.5)
+      document.getElementById('sidebar-menus').classList.remove('open')
    }
-
-    $toggleMenu.addEventListener('click', openMobileSidebar)
-
-    $menuMask.addEventListener('click', e => {
-      if ($mobileSidebarMenus.classList.contains('open')) {
-        closeMobileSidebar()
-      }
-    })
-
-    window.addEventListener('resize', e => {
-      if (btf.isHidden($toggleMenu)) {
-        if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar()
-      }
-    })
  }

  /**
@@ -225,7 +205,7 @@ document.addEventListener('DOMContentLoaded', function () {
  function addPhotoFigcaption () {
    document.querySelectorAll('#article-container img').forEach(function (item) {
      const parentEle = item.parentNode
-      const altValue = item.alt
+      const altValue = item.title || item.alt
      if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
        const ele = document.createElement('div')
        ele.className = 'img-alt is-center'
@@ -237,7 +217,6 @@ document.addEventListener('DOMContentLoaded', function () {

  /**
   * Lightbox
-   * It needs to call it after the Justified Gallery done, or the fancybox maybe not work
   */
  const runLightbox = () => {
    btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
@@ -245,41 +224,28 @@ document.addEventListener('DOMContentLoaded', function () {

  /**
   * justified-gallery 圖庫排版
-   * 需要 jQuery
   */
-  let detectJgJsLoad = false
  const runJustifiedGallery = function (ele) {
-    const $justifiedGallery = $(ele)
-    const $imgList = $justifiedGallery.find('img')
-    $imgList.unwrap() // remove <p> tag
-    if ($imgList.length) {
-      $imgList.each(function (i, o) {
-        if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
-        $(o).wrap('<div></div>')
+    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' })
+      })
    })
-    }

-    runLightbox()
-
-    if (detectJgJsLoad) {
-      btf.initJustifiedGallery($justifiedGallery)
+    if (window.fjGallery) {
+      btf.initJustifiedGallery(ele)
      return
    }

-    $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
-    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) })
-    detectJgJsLoad = true
-  }
-
-  const jqLoadAndRun = () => {
-    const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
-    if ($jgEle.length) {
-      btf.isJqueryLoad(() => {
-        runJustifiedGallery($jgEle)
-      })
-      return
-    }
-    runLightbox()
+    const newEle = document.createElement('link')
+    newEle.rel = 'stylesheet'
+    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
+    document.body.appendChild(newEle)
+    getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
  }

  /**
@@ -328,7 +294,7 @@ document.addEventListener('DOMContentLoaded', function () {
          }
          $header.classList.add('nav-fixed')
          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-            $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+            $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
          }
        } else {
          if (currentTop === 0) {
@@ -338,7 +304,7 @@ document.addEventListener('DOMContentLoaded', function () {
        }

        if (document.body.scrollHeight <= innerHeight) {
-          $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+          $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
        }
      }, 200)()
    }
@@ -390,9 +356,9 @@ document.addEventListener('DOMContentLoaded', function () {
      }
    }

-    const mobileToc = {
+    window.mobileToc = {
      open: () => {
-        $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px'
+        $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
      },

      close: () => {
@@ -403,11 +369,6 @@ document.addEventListener('DOMContentLoaded', function () {
      }
    }

-    document.getElementById('mobile-toc-button').addEventListener('click', () => {
-      if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open()
-      else mobileToc.close()
-    })
-
    // toc元素點擊
    $cardToc.addEventListener('click', (e) => {
      e.preventDefault()
@@ -416,7 +377,7 @@ document.addEventListener('DOMContentLoaded', function () {
        : e.target.parentElement
      btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
      if (window.innerWidth < 900) {
-        mobileToc.close()
+        window.mobileToc.close()
      }
    })

@@ -512,6 +473,7 @@ document.addEventListener('DOMContentLoaded', function () {
      typeof utterancesTheme === 'function' && utterancesTheme()
      typeof FB === 'object' && window.loadFBComment()
      window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
+      typeof runMermaid === 'function' && window.runMermaid()
    },
    showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
      document.getElementById('rightside-config-hide').classList.toggle('show')
@@ -527,22 +489,9 @@ document.addEventListener('DOMContentLoaded', function () {
      $htmlDom.toggle('hide-aside')
    },

-    adjustFontSize: (plus) => {
-      const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
-      let newValue = ''
-      if (plus) {
-        if (fontSizeVal >= 20) return
-        newValue = fontSizeVal + 1
-        document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
-        !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
-      } else {
-        if (fontSizeVal <= 10) return
-        newValue = fontSizeVal - 1
-        document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
-        document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
-      }
-
-      saveToLocal.set('global-font-size', newValue, 2)
+    runMobileToc: () => {
+      if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
+      else window.mobileToc.close()
    }
  }

@@ -555,6 +504,9 @@ document.addEventListener('DOMContentLoaded', function () {
      case 'rightside_config':
        rightSideFn.showOrHideBtn()
        break
+      case 'mobile-toc-button':
+        rightSideFn.runMobileToc()
+        break
      case 'readmode':
        rightSideFn.switchReadMode()
        break
@@ -564,12 +516,6 @@ document.addEventListener('DOMContentLoaded', function () {
      case 'hide-aside-btn':
        rightSideFn.hideAsideBtn()
        break
-      case 'font-plus':
-        rightSideFn.adjustFontSize(true)
-        break
-      case 'font-minus':
-        rightSideFn.adjustFontSize()
-        break
      default:
        break
    }
@@ -659,8 +605,8 @@ document.addEventListener('DOMContentLoaded', function () {
          const $hideContent = $this.nextElementSibling
          $this.classList.toggle('open')
          if ($this.classList.contains('open')) {
-            if ($hideContent.querySelectorAll('.justified-gallery').length > 0) {
-              btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery'))
+            if ($hideContent.querySelectorAll('.fj-gallery').length > 0) {
+              btf.initJustifiedGallery($hideContent.querySelectorAll('.fj-gallery'))
            }
          }
        })
@@ -686,7 +632,7 @@ document.addEventListener('DOMContentLoaded', function () {
              if (item.id === tabId) item.classList.add('active')
              else item.classList.remove('active')
            })
-            const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`)
+            const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
            if ($isTabJustifiedGallery.length > 0) {
              btf.initJustifiedGallery($isTabJustifiedGallery)
            }
@@ -776,8 +722,12 @@ document.addEventListener('DOMContentLoaded', function () {
  }

  const unRefreshFn = function () {
-    window.addEventListener('resize', adjustMenu)
-    window.addEventListener('orientationchange', () => { setTimeout(adjustMenu(true), 100) })
+    window.addEventListener('resize', () => {
+      adjustMenu(false)
+      hideMenuIndex && mobileSidebarOpen && sidebarFn.close()
+    })
+
+    document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })

    clickFnOfSubMenu()
    GLOBAL_CONFIG.islazyload && lazyloadImg()
@@ -798,17 +748,21 @@ document.addEventListener('DOMContentLoaded', function () {
    }

    GLOBAL_CONFIG_SITE.isToc && tocFn()
-    sidebarFn()
    GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
    addHighlightTool()
    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
-    jqLoadAndRun()
    scrollFn()
+
+    const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
+    $jgEle.length && runJustifiedGallery($jgEle)
+
+    runLightbox()
    addTableWrap()
    clickFnOfTagHide()
    tabsFn.clickFnOfTabs()
    tabsFn.backToTop()
    switchComments()
+    document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
  }

  refreshFn()
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -41,20 +41,24 @@ window.addEventListener('load', () => {
    searchClickFn()
  })

-  function search (path) {
-    fetch(GLOBAL_CONFIG.root + path)
-      .then(response => response.text())
-      .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
-      .then(data => {
-        const datas = [...data.querySelectorAll('entry')].map(function (item) {
-          const content = item.querySelector('content')
+  async function search (path) {
+    let datas = []
+    const typeF = path.split('.')[1]
+    const response = await fetch(GLOBAL_CONFIG.root + path)
+    if (typeF === 'json') {
+      datas = await response.json()
+    } else if (typeF === 'xml') {
+      const res = await response.text()
+      const t = await new window.DOMParser().parseFromString(res, 'text/xml')
+      const a = await t
+      datas = [...a.querySelectorAll('entry')].map(function (item) {
        return {
          title: item.querySelector('title').textContent,
-            content: content ? content.textContent : '',
+          content: item.querySelector('content').textContent,
          url: item.querySelector('url').textContent
        }
      })
-
+    }
    const $input = document.querySelector('#local-search-input input')
    const $resultContent = document.getElementById('local-search-results')
    $input.addEventListener('input', function () {
@@ -100,6 +104,8 @@ window.addEventListener('load', () => {
          const content = data.content.trim().replace(/<[^>]+>/g, '')
          if (firstOccur >= 0) {
            // cut out 130 characters
+            // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30
+            // let end = firstOccur + 50 > content.length ? content.length : firstOccur + 50
            let start = firstOccur - 30
            let end = firstOccur + 100

@@ -142,6 +148,5 @@ window.addEventListener('load', () => {
      $resultContent.innerHTML = str
      window.pjax && window.pjax.refresh($resultContent)
    })
-      })
  }
 })
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -72,20 +72,6 @@ const btf = {
    })
  },

-  initJustifiedGallery: function (selector) {
-    if (!(selector instanceof jQuery)) {
-      selector = $(selector)
-    }
-    selector.each(function (i, o) {
-      if ($(this).is(':visible')) {
-        $(this).justifiedGallery({
-          rowHeight: 220,
-          margins: 4
-        })
-      }
-    })
-  },
-
  diffDate: (d, more = false) => {
    const dateNow = new Date()
    const datePost = new Date(d)
@@ -135,15 +121,11 @@ const btf = {
    }
  },

-  scrollToDest: (pos, time) => {
-    if (pos < 0 || time < 0) {
-      return
-    }
-
-    const currentPos = window.scrollY || window.screenTop
+  scrollToDest: (pos, time = 500) => {
+    const currentPos = window.pageYOffset
    if (currentPos > pos) pos = pos - 70

-    if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) {
+    if ('scrollBehavior' in document.documentElement.style) {
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
@@ -152,26 +134,20 @@ const btf = {
    }

    let start = null
-    time = time || 500
+    pos = +pos
    window.requestAnimationFrame(function step (currentTime) {
      start = !start ? currentTime : start
+      const progress = currentTime - start
      if (currentPos < pos) {
-        const progress = currentTime - start
        window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
-        if (progress < time) {
-          window.requestAnimationFrame(step)
      } else {
-          window.scrollTo(0, pos)
-        }
-      } else {
-        const progress = currentTime - start
        window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
+      }
      if (progress < time) {
        window.requestAnimationFrame(step)
      } else {
        window.scrollTo(0, pos)
      }
-      }
    })
  },

@@ -226,14 +202,6 @@ const btf = {
    }
  },

-  isJqueryLoad: fn => {
-    if (typeof jQuery === 'undefined') {
-      getScript(GLOBAL_CONFIG.source.jQuery).then(fn)
-    } else {
-      fn()
-    }
-  },
-
  isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,

  getEleTop: ele => {
@@ -265,14 +233,35 @@ const btf = {
      ele.forEach(i => {
        if (i.parentNode.tagName !== 'A') {
          const dataSrc = i.dataset.lazySrc || i.src
-          const dataCaption = i.alt || ''
+          const dataCaption = i.title || i.alt || ''
          btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc })
        }
      })

+      if (!window.fancyboxRun) {
        Fancybox.bind('[data-fancybox]', {
-        Hash: false
+          Hash: false,
+          Thumbs: {
+            autoStart: false
+          }
+        })
+        window.fancyboxRun = true
+      }
+    }
+  },
+
+  initJustifiedGallery: function (selector) {
+    selector.forEach(function (i) {
+      if (!btf.isHidden(i)) {
+        fjGallery(i, {
+          itemSelector: '.fj-gallery-item',
+          rowHeight: 220,
+          gutter: 4,
+          onJustify: function () {
+            this.$container.style.opacity = '1'
+          }
+        })
+      }
    })
  }
 }
-}