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 顯示正常

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]:
 

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 中下載。
 
 在博客根目錄裡安裝穩定版【推薦】
 

_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
+  main_css:
-  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
+  main:
-  main: /js/main.js
+  utils:
-  utils: /js/utils.js
 
   # 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:
-  gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
+  gitalk_css:
-  valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+  valine:
-  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
+  disqusjs:
-  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
+  disqusjs_css:
-  utterances: https://utteranc.es/client.js
+  utterances:
-  twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
+  twikoo:
-  waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
+  waline:
 
   # share
-  addtoany: https://static.addtoany.com/menu/page.js
+  addtoany:
-  sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
+  sharejs:
-  sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
+  sharejs_css:
 
   # search
-  local_search: /js/search/local-search.js
+  local_search:
-  algolia_js: /js/search/algolia.js
+  algolia_js:
-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
+  algolia_search:
-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+  algolia_search_css:
 
   # math
-  mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
+  mathjax:
-  katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
+  katex:
-  katex_copytex: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js
+  katex_copytex:
-  katex_copytex_css: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css
+  katex_copytex_css:
-  mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+  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_ribbon:
-  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
+  canvas_fluttering_ribbon:
-  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
+  canvas_nest:
 
-  lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
+  lazyload:
-  instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
+  instantpage:
-  typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js
+  typed:
-  pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
+  pangu:
 
   # photo
-  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css
+  fancybox_css:
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js
+  fancybox:
-  medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+  medium_zoom:
 
   # snackbar
-  snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
+  snackbar_css:
-  snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
+  snackbar:
 
   # effect
-  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
+  activate_power_mode:
-  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
+  fireworks:
-  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
+  click_heart:
-  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
+  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
+  # flickr-justified-gallery
-  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js
+  flickr_justified_gallery_js:
-  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css
+  flickr_justified_gallery_css:
 
   # aplayer
-  aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
+  aplayer_css:
-  aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
+  aplayer_js:
-  meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
+  meting_js:
 
   # Prism.js
-  prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
+  prismjs_js:
-  prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
+  prismjs_lineNumber_js:
-  prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
+  prismjs_autoloader:

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

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

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: 回到顶部

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: 回到頂部

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)

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

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)}',
+        js: '!{url_for(theme.CDN.flickr_justified_gallery_js)}',
-        css: '!{url_for(theme.CDN.justifiedGallery_css)}'
+        css: '!{url_for(theme.CDN.flickr_justified_gallery_css)}'
       }
     },
     isPhotoFigcaption: !{theme.photofigcaption},

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")
 

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

layout/includes/rightside.pug

@@ -1,38 +1,60 @@
-#rightside
+- const { readmode, translate, darkmode, aside, chat_btn } = theme
-  #rightside-config-hide
+mixin rightsideItem(array)
-    if is_post() && theme.readmode
+  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
+      when 'translate'
-      button#font-plus(type="button" title=_p('rightside.font_plus_title'))
+        if translate.enable
-        i.fas.fa-plus
+          button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
-      button#font-minus(type="button" title=_p('rightside.font_minus_title'))
+      when 'darkmode'
-        i.fas.fa-minus
+        if darkmode.enable && darkmode.button
-    if theme.translate.enable
-      button#translateLink(type="button" title=_p('rightside.translate_title'))= theme.translate.default
-    if theme.darkmode.enable && theme.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
+      when 'toc'
-    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
-
         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

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}',
+        envId: '!{envId}',
-        region: '!{theme.twikoo.region}',
+        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}',
+        envId: '!{envId}',
-        region: '!{theme.twikoo.region}',
+        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) => {
+    const runFn = () => {
-      if (typeof twikoo === 'object') {
       init()
-        bool && $countDom && setTimeout(getCount,0)
+      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
-      } else {
-        getScript('!{theme.CDN.twikoo}').then(()=> {
-          init()
-          bool && $countDom && setTimeout(getCount,0)
-        })
-      }
     }
 
-    if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
+    const loadTwikoo = () => {
-      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+      if (typeof twikoo === 'object') {
-      else loadTwikoo(true)
+        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()

layout/includes/third-party/math/mermaid.pug

@@ -1,15 +1,25 @@
 script.
-  if (document.getElementsByClassName('mermaid').length) {
+  (() => {
-    if (window.mermaidJsLoad) mermaid.init()
+    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
-    else {
+    if ($mermaidWrap.length) {
-      getScript('!{theme.CDN.mermaid}').then(() => {
+      window.runMermaid = () => {
-        window.mermaidJsLoad = true
+        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
-        mermaid.initialize({
+
-          theme: '!{theme.mermaid.theme}',
+        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)
+    }
+  })()

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()
 

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": {

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

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 = ''
+  const detectApple = `
-  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 = () => {
-      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) {
+  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
-      detectApple += 'document.addEventListener(\'pjax:complete\', detectApple)'
-    }
-  }
-
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside + detectApple}})(window)</script>`
 })

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>`
 }
 

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

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

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
+      display: none
-      left: 0
-      visibility: hidden
-      opacity: 0
 
     #search-button span
-      display: none !important
+      display: none
 
   #search-button
     display: inline

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
+      margin-bottom: 5px
-      width: 30px
+      width: w = 38px
-      height: 30px
+      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
 

source/css/_layout/third-party.styl

@@ -61,16 +61,9 @@ if hexo-config('waline.bg')
 .medium-zoom-overlay
   z-index: 99999 !important
 
-.mermaid
+.mermaid-wrap
-  overflow: auto
   margin: 0 0 20px
-  background: $white
   text-align: center
-  opacity: 0
-  transition: all .3s
-
-  &[data-processed]
-    opacity: 1
 
 .utterances,
 .fb-comments iframe

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,

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)
 

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)

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
+        .article-meta-link
-          margin: 0 4px
-
-        .fa-angle-right
           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

source/css/_tags/gallery.styl

@@ -1,4 +1,5 @@
-figure.gallery-group
+#article-container
+  figure.gallery-group
     position: relative
     float: left
     overflow: hidden
@@ -26,13 +27,13 @@ figure.gallery-group
 
     img
       position: relative
-    margin: 0 !important
+      margin: 0
-    max-width: none !important
+      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
 
@@ -89,19 +90,13 @@ figure.gallery-group
         transition: transform .35s
         transform: translate3d(-100%, 0, 0)
 
-.gallery-group-main
+  .gallery-group-main
     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

source/js/main.js

@@ -1,23 +1,21 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const $blogName = document.getElementById('site-name')
+  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen
-  let blogNameWidth = $blogName && $blogName.offsetWidth
+
-  const $menusEle = document.querySelector('#menus .menus_items')
+  const adjustMenu = (init) => {
-  let menusWidth = $menusEle && $menusEle.offsetWidth
+    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
+      searchWidth = $searchEle ? $searchEle.offsetWidth : 0
-
+      $nav = document.getElementById('nav')
-  const adjustMenu = (change = false) => {
-    if (change) {
-      blogNameWidth = $blogName && $blogName.offsetWidth
-      menusWidth = $menusEle && $menusEle.offsetWidth
-      searchWidth = $searchEle && $searchEle.offsetWidth
     }
-    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()
+    adjustMenu(true)
-    document.getElementById('nav').classList.add('show')
+    $nav.classList.add('show')
   }
 
   // sidebar menus
-  const sidebarFn = () => {
+  const sidebarFn = {
-    const $toggleMenu = document.getElementById('toggle-menu')
+    open: () => {
-    const $mobileSidebarMenus = document.getElementById('sidebar-menus')
-    const $menuMask = document.getElementById('menu-mask')
-    const $body = document.body
-
-    function openMobileSidebar () {
       btf.sidebarPaddingR()
-      $body.style.overflow = 'hidden'
+      document.body.style.overflow = 'hidden'
-      btf.fadeIn($menuMask, 0.5)
+      btf.fadeIn(document.getElementById('menu-mask'), 0.5)
-      $mobileSidebarMenus.classList.add('open')
+      document.getElementById('sidebar-menus').classList.add('open')
-    }
+      mobileSidebarOpen = true
-
+    },
-    function closeMobileSidebar () {
+    close: () => {
+      const $body = document.body
       $body.style.overflow = ''
       $body.style.paddingRight = ''
-      btf.fadeOut($menuMask, 0.5)
+      btf.fadeOut(document.getElementById('menu-mask'), 0.5)
-      $mobileSidebarMenus.classList.remove('open')
+      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)
+    ele.forEach(item => {
-    const $imgList = $justifiedGallery.find('img')
+      const $imgList = item.querySelectorAll('img')
-    $imgList.unwrap() // remove <p> tag
+
-    if ($imgList.length) {
+      $imgList.forEach(i => {
-      $imgList.each(function (i, o) {
+        const dataLazySrc = i.getAttribute('data-lazy-src')
-        if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
+        if (dataLazySrc) i.src = dataLazySrc
-        $(o).wrap('<div></div>')
+        btf.wrap(i, 'div', { class: 'fj-gallery-item' })
+      })
     })
-    }
 
-    runLightbox()
+    if (window.fjGallery) {
-
+      btf.initJustifiedGallery(ele)
-    if (detectJgJsLoad) {
-      btf.initJustifiedGallery($justifiedGallery)
       return
     }
 
-    $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
+    const newEle = document.createElement('link')
-    $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) })
+    newEle.rel = 'stylesheet'
-    detectJgJsLoad = true
+    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
-  }
+    document.body.appendChild(newEle)
-
+    getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
-  const jqLoadAndRun = () => {
-    const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
-    if ($jgEle.length) {
-      btf.isJqueryLoad(() => {
-        runJustifiedGallery($jgEle)
-      })
-      return
-    }
-    runLightbox()
   }
 
   /**
@@ -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) => {
+    runMobileToc: () => {
-      const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
+      if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
-      let newValue = ''
+      else window.mobileToc.close()
-      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)
     }
   }
 
@@ -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) {
+            if ($hideContent.querySelectorAll('.fj-gallery').length > 0) {
-              btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery'))
+              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('resize', () => {
-    window.addEventListener('orientationchange', () => { setTimeout(adjustMenu(true), 100) })
+      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()

source/js/search/local-search.js

@@ -41,20 +41,24 @@ window.addEventListener('load', () => {
     searchClickFn()
   })
 
-  function search (path) {
+  async function search (path) {
-    fetch(GLOBAL_CONFIG.root + path)
+    let datas = []
-      .then(response => response.text())
+    const typeF = path.split('.')[1]
-      .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
+    const response = await fetch(GLOBAL_CONFIG.root + path)
-      .then(data => {
+    if (typeF === 'json') {
-        const datas = [...data.querySelectorAll('entry')].map(function (item) {
+      datas = await response.json()
-          const content = item.querySelector('content')
+    } 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)
     })
-      })
   }
 })

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