From cb82bfb7b68eb9ee8fb22776347b8c0de3eab371 Mon Sep 17 00:00:00 2001
From: Jerry <hwy0127@gmail.com>
Date: Tue, 12 Oct 2021 23:27:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=BF=E6=8F=9B=20Justified=20Galler?=
 =?UTF-8?q?y=20=E7=82=BA=20flickr-justified-gallery=20feat:=20=E5=AE=8C?=
 =?UTF-8?q?=E5=85=A8=E7=A7=BB=E9=99=A4=20jquery=20feat:=20=E6=B8=85?=
 =?UTF-8?q?=E9=99=A4=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E7=9A=84CDN,=20?=
 =?UTF-8?q?=E9=BB=98=E8=AA=8D=20CDN=20=E4=B8=8D=E5=86=8D=E9=A1=AF=E7=A4=BA?=
 =?UTF-8?q?=E5=9C=A8=20config=20feat:=20=E5=88=87=E6=8F=9B=E5=A4=9C?=
 =?UTF-8?q?=E9=96=93=E6=A8=A1=E5=BC=8F=E5=BE=8C,=20mermaid=20=E4=B9=9F?=
 =?UTF-8?q?=E6=9C=83=E5=88=87=E6=8F=9B=E5=A4=9C=E9=96=93=E4=B8=BB=E9=A1=8C?=
 =?UTF-8?q?=20feat:=20=E7=A7=BB=E9=99=A4=E9=A8=B0=E8=A8=8A=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=20feat:=20=E7=A7=BB=E9=99=A4=E5=8F=B3=E4=B8=8B?=
 =?UTF-8?q?=E8=A7=92=E5=AD=97=E9=AB=94=E8=AA=BF=E6=95=B4=E6=8C=89=E9=88=95?=
 =?UTF-8?q?=20feat:=20=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2=E5=8F=AF?=
 =?UTF-8?q?=E8=99=95=E7=90=86=20json=20feat:=20=E5=8F=B3=E4=B8=8B=E8=A7=92?=
 =?UTF-8?q?=E6=8C=89=E9=88=95=E8=87=AA=E5=AE=9A=E7=BE=A9=E9=A0=86=E5=BA=8F?=
 =?UTF-8?q?=20feat:=20=E5=8F=B3=E5=B0=8F=E8=A7=92=E6=8C=89=E9=88=95=20UI?=
 =?UTF-8?q?=20=E5=BE=AE=E8=AA=BF=20improvement:=20=E6=89=8B=E6=A9=9F?=
 =?UTF-8?q?=E7=AB=AF=E6=9B=B4=E6=94=B9=E9=96=B2=E8=AE=80=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E9=80=80=E5=87=BA=E6=8C=89=E9=88=95=E5=88=B0=E5=8F=B3=E4=B8=8B?=
 =?UTF-8?q?=E8=A7=92=20improvement:=20photofigcaption=20=E5=92=8C=20fancyb?=
 =?UTF-8?q?ox=20=E7=9A=84=20figcaption=20=E5=84=AA=E5=85=88=E9=A1=AF?=
 =?UTF-8?q?=E7=A4=BA=20=E5=9C=96=E7=89=87=E7=9A=84title=E5=B1=AC=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E7=84=B6=E5=BE=8C=E6=98=AF=20alt=20=E5=B1=AC=E6=80=A7?=
 =?UTF-8?q?=20improvement:=20=E9=A6=96=E9=A0=81ui=E5=BE=AE=E8=AA=BF=20impr?=
 =?UTF-8?q?ovement:=20=E7=A6=81=E6=AD=A2=E4=B8=80=E4=BA=9B=E7=80=8F?=
 =?UTF-8?q?=E8=A6=BD=E5=99=A8=E6=9C=83=E5=87=BA=E7=8F=BE=E9=BB=9E=E6=93=8A?=
 =?UTF-8?q?=E5=B7=A6=E4=B8=8B=E8=A7=92=E6=8C=89=E9=88=95=E5=87=BA=E7=8F=BE?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=B6=B2=E9=A0=81=E7=9A=84=E8=A1=8C=E7=82=BA?=
 =?UTF-8?q?=20improvement:=20js=20=E5=84=AA=E5=8C=96=20fix:=20=E4=BF=AE?=
 =?UTF-8?q?=E5=BE=A9=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F=E6=94=B9=E8=AE=8A?=
 =?UTF-8?q?=E6=99=82=EF=BC=8C=E5=B0=8E=E8=88=AA=E6=AC=84=E7=9A=84ui=20?=
 =?UTF-8?q?=E5=8F=AF=E8=83=BD=E6=9C=83=E9=8C=AF=E4=BA=82=E7=9A=84=20bug=20?=
 =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=20pjax=20=E4=B8=8B,=20twikoo=20?=
 =?UTF-8?q?=E8=A9=95=E8=AB=96=E7=8D=B2=E5=8F=96=E6=98=AF=E4=B8=8A=E4=B8=80?=
 =?UTF-8?q?=E7=AF=87=E8=A9=95=E8=AB=96=E7=9A=84=20bug=20fix:=20=E5=A3=93?=
 =?UTF-8?q?=E7=B8=AE=20html=20=E4=BB=A3=E7=A2=BC=E5=BE=8C,=20mermaid=20?=
 =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E6=AD=A3=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   2 +-
 README_CN.md                                  |   2 +-
 _config.yml                                   | 124 +++++------
 languages/default.yml                         |   2 -
 languages/en.yml                              |   2 -
 languages/zh-CN.yml                           |   2 -
 languages/zh-TW.yml                           |   2 -
 layout/includes/head.pug                      |   2 +-
 layout/includes/head/analytics.pug            |  12 --
 layout/includes/head/config.pug               |   5 +-
 layout/includes/head/preconnect.pug           |   3 -
 layout/includes/mixins/post-ui.pug            |  10 +-
 layout/includes/rightside.pug                 |  82 +++++---
 .../includes/third-party/comments/twikoo.pug  |  43 ++--
 layout/includes/third-party/math/mermaid.pug  |  34 +--
 layout/includes/third-party/pjax.pug          |   5 -
 package.json                                  |   2 +-
 scripts/events/cdn.js                         | 104 ++++++++++
 scripts/helpers/inject_head_js.js             |  25 +--
 scripts/tag/gallery.js                        |   2 +-
 scripts/tag/mermaid.js                        |   4 +-
 source/css/_global/function.styl              |   2 +-
 source/css/_layout/aside.styl                 |   5 +-
 source/css/_layout/head.styl                  |   8 +-
 source/css/_layout/rightside.styl             |  18 +-
 source/css/_layout/third-party.styl           |   9 +-
 source/css/_mode/darkmode.styl                |   1 -
 source/css/_mode/readmode.styl                |   5 +
 source/css/_page/common.styl                  |   4 +-
 source/css/_page/homepage.styl                |  15 +-
 source/css/_tags/gallery.styl                 | 183 ++++++++--------
 source/js/main.js                             | 186 +++++++----------
 source/js/search/local-search.js              | 195 +++++++++---------
 source/js/utils.js                            |  81 ++++----
 34 files changed, 611 insertions(+), 570 deletions(-)
 create mode 100644 scripts/events/cdn.js

diff --git a/README.md b/README.md
index 9001868..9179f3a 100644
--- 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]:
 
diff --git a/README_CN.md b/README_CN.md
index 8dc6794..e680844 100644
--- 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 中下載。
 
 在博客根目錄裡安裝穩定版【推薦】
 
diff --git a/_config.yml b/_config.yml
index 2e19882..2568732 100644
--- 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
\ No newline at end of file
+  prismjs_js:
+  prismjs_lineNumber_js:
+  prismjs_autoloader:
\ No newline at end of file
diff --git a/languages/default.yml b/languages/default.yml
index 09f14c1..2241abc 100644
--- 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
diff --git a/languages/en.yml b/languages/en.yml
index 2465afa..22a55db 100644
--- 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
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 3270a21..a0539a8 100644
--- 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: 回到顶部
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index 4217284..cf25922 100644
--- 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: 回到頂部
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 6af325a..37078d8 100644
--- 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)
diff --git a/layout/includes/head/analytics.pug b/layout/includes/head/analytics.pug
index 4873ebf..6452528 100644
--- 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}`)
 
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index f669dbe..1f1974c 100644
--- 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},
diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug
index 73231c7..d010b05 100644
--- 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")
 
diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug
index 4a4a123..c28740d 100644
--- 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
diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug
index 0e0bdf5..39a742b 100644
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,38 +1,60 @@
+- 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
+      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
+      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
+      when 'toc'
+        if showToc
+          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
+            i.fas.fa-list-ul
+      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 is_post() && theme.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
-      button#darkmode(type="button" title=_p('rightside.night_mode_title'))
-        i.fas.fa-adjust
-    if theme.aside.enable && theme.aside.button && page.aside !== false
-      button#hide-aside-btn(type="button" title=_p('rightside.aside'))
-        i.fas.fa-arrows-alt-h
+    if hideArray
+      +rightsideItem(hideArray)
   #rightside-config-show
-    if is_post()
-      if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) || theme.change_font_size)
+    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
-    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
-      button#chat_btn(type="button" title=_p("rightside.chat_btn"))
-        i.fas.fa-sms
-    if commentsJsLoad
-      a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
-        i.fas.fa-comments
+    if showArray
+      +rightsideItem(showArray)
+
     button#go-up(type="button" title=_p("rightside.back_to_top"))
       i.fas.fa-arrow-up
\ No newline at end of file
diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug
index c191cec..d7a8831 100644
--- 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') {
-        init()
-        bool && $countDom && setTimeout(getCount,0)
-      } else {
-        getScript('!{theme.CDN.twikoo}').then(()=> {
-          init()
-          bool && $countDom && setTimeout(getCount,0)
-        })
-      }
+    const runFn = () => {
+      init()
+      !{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()
diff --git a/layout/includes/third-party/math/mermaid.pug b/layout/includes/third-party/math/mermaid.pug
index 801ce21..5716b30 100644
--- 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)
     }
-  }
-
-
+  })()
\ No newline at end of file
diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
index f3b5812..a1278b9 100644
--- 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()
 
diff --git a/package.json b/package.json
index 4fb23c4..ee1f528 100644
--- 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": {
diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js
new file mode 100644
index 0000000..0f038c4
--- /dev/null
+++ 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))
+})
diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js
index 78e47c0..8da1179 100644
--- 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>`
 })
diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
index 21ebb55..acccd0b 100644
--- 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>`
 }
 
diff --git a/scripts/tag/mermaid.js b/scripts/tag/mermaid.js
index d8f8b15..237b7ee 100644
--- 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 })
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index 003d9a7..184b0e7 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -240,4 +240,4 @@ if hexo-config('avatar.effect') == true
     transform: translateX(200px)
 
   100%
-    transform: translateX(0)
+    transform: translateX(0)
\ No newline at end of file
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index d59c24f..76b6e25 100644
--- 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
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index e487fe6..0d49b7a 100644
--- 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
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 05678c2..c2f75c4 100644
--- 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
 
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index accc410..5444fc4 100644
--- 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
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 14e3b78..64a638e 100644
--- 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,
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index 8d2b4f7..80dc762 100644
--- 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)
 
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index bf98482..40bb8e9 100644
--- 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)
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
index 8000916..cf88f88 100644
--- 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
\ No newline at end of file
+        -webkit-line-clamp: 2
\ No newline at end of file
diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl
index f09e32b..2be3d5d 100644
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -1,107 +1,102 @@
-figure.gallery-group
-  position: relative
-  float: left
-  overflow: hidden
-  margin: 6px 4px
-  width: calc(50% - 8px)
-  height: 250px
-  border-radius: 8px
-  background: $dark-black
-  -webkit-transform: translate3d(0, 0, 0)
-
-  +maxWidth600()
-    width: calc(100% - 8px)
-
-  &:hover
-    img
-      opacity: .4
-      transform: translate3d(0, 0, 0)
-
-    .gallery-group-name::after
-      transform: translate3d(0, 0, 0)
-
-    p
-      opacity: 1
-      transform: translate3d(0, 0, 0)
-
-  img
+#article-container
+  figure.gallery-group
     position: relative
-    margin: 0 !important
-    max-width: none !important
-    width: calc(100% + 20px)
+    float: left
+    overflow: hidden
+    margin: 6px 4px
+    width: calc(50% - 8px)
     height: 250px
-    backface-visibility: hidden
-    opacity: .8
-    transition: all .3s, filter 375ms ease-in 0.2s !important
-    transform: translate3d(-10px, 0, 0)
-    object-fit: cover
+    border-radius: 8px
+    background: $dark-black
+    -webkit-transform: translate3d(0, 0, 0)
 
-  figcaption
-    position: absolute
-    top: 0
-    left: 0
-    padding: 30px
-    width: 100%
-    height: 100%
-    color: $gallery-color
-    text-transform: uppercase
-    backface-visibility: hidden
+    +maxWidth600()
+      width: calc(100% - 8px)
 
-    & > a
+    &:hover
+      img
+        opacity: .4
+        transform: translate3d(0, 0, 0)
+
+      .gallery-group-name::after
+        transform: translate3d(0, 0, 0)
+
+      p
+        opacity: 1
+        transform: translate3d(0, 0, 0)
+
+    img
+      position: relative
+      margin: 0
+      max-width: none
+      width: calc(100% + 20px)
+      height: 250px
+      backface-visibility: hidden
+      opacity: .8
+      transition: all .3s, filter 375ms ease-in .2s
+      transform: translate3d(-10px, 0, 0)
+      object-fit: cover
+
+    figcaption
       position: absolute
       top: 0
-      right: 0
-      bottom: 0
-      left: 0
-      z-index: 1000
-      opacity: 0
-
-  p
-    @extend .limit-more-line
-    margin: 0
-    padding: 8px 0 0
-    letter-spacing: 1px
-    font-size: 1.1em
-    line-height: 1.5
-    opacity: 0
-    transition: opacity .35s, transform .35s
-    transform: translate3d(100%, 0, 0)
-    -webkit-line-clamp: 4
-
-  .gallery-group-name
-    @extend .limit-more-line
-    position: relative
-    margin: 0
-    padding: 8px 0
-    font-weight: bold
-    font-size: 1.65em
-    line-height: 1.5
-    -webkit-line-clamp: 2
-
-    &:after
-      position: absolute
-      bottom: 0
       left: 0
+      padding: 30px
       width: 100%
-      height: 2px
-      background: $gallery-color
-      content: ''
-      transition: transform .35s
-      transform: translate3d(-100%, 0, 0)
+      height: 100%
+      color: $gallery-color
+      text-transform: uppercase
+      backface-visibility: hidden
 
-.gallery-group-main
-  overflow: auto
-  padding: 0 0 16px
+      & > a
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: 1000
+        opacity: 0
 
-.justified-gallery
-  margin: 0 0 16px
+    p
+      @extend .limit-more-line
+      margin: 0
+      padding: 8px 0 0
+      letter-spacing: 1px
+      font-size: 1.1em
+      line-height: 1.5
+      opacity: 0
+      transition: opacity .35s, transform .35s
+      transform: translate3d(100%, 0, 0)
+      -webkit-line-clamp: 4
 
-  img
+    .gallery-group-name
+      @extend .limit-more-line
+      position: relative
+      margin: 0
+      padding: 8px 0
+      font-weight: bold
+      font-size: 1.65em
+      line-height: 1.5
+      -webkit-line-clamp: 2
+
+      &:after
+        position: absolute
+        bottom: 0
+        left: 0
+        width: 100%
+        height: 2px
+        background: $gallery-color
+        content: ''
+        transition: transform .35s
+        transform: translate3d(-100%, 0, 0)
+
+  .gallery-group-main
+    overflow: auto
+    padding: 0 0 16px
+
+  .fj-gallery
+    margin: 0 0 16px
     opacity: 0
 
-  .img-alt
-    display: none
-
-  .fancybox
-    width: auto
-    text-align: inherit
\ No newline at end of file
+    .img-alt
+      display: none
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index e6e83af..bd3f14f 100644
--- 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
-  const $searchEle = document.querySelector('#search-button')
-  let searchWidth = $searchEle && $searchEle.offsetWidth
+  let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen
 
-  const adjustMenu = (change = false) => {
-    if (change) {
-      blogNameWidth = $blogName && $blogName.offsetWidth
-      menusWidth = $menusEle && $menusEle.offsetWidth
-      searchWidth = $searchEle && $searchEle.offsetWidth
+  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')
+      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()
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 5b13445..8da8a73 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -41,107 +41,112 @@ 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')
-          return {
-            title: item.querySelector('title').textContent,
-            content: content ? 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 () {
-          let str = '<div class="search-result-list">'
-          const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
-          $resultContent.innerHTML = ''
-          if (this.value.trim().length <= 0) return
-          let count = 0
-          // perform local searching
-          datas.forEach(function (data) {
-            let isMatch = true
-            if (!data.title || data.title.trim() === '') {
-              data.title = 'Untitled'
-            }
-            let dataTitle = data.title.trim().toLowerCase()
-            const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
-            const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
-            let indexTitle = -1
-            let indexContent = -1
-            let firstOccur = -1
-            // only match artiles with not empty titles and contents
-            if (dataTitle !== '' || dataContent !== '') {
-              keywords.forEach(function (keyword, i) {
-                indexTitle = dataTitle.indexOf(keyword)
-                indexContent = dataContent.indexOf(keyword)
-                if (indexTitle < 0 && indexContent < 0) {
-                  isMatch = false
-                } else {
-                  if (indexContent < 0) {
-                    indexContent = 0
-                  }
-                  if (i === 0) {
-                    firstOccur = indexContent
-                  }
-                }
-              })
-            } else {
+  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: 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 () {
+      let str = '<div class="search-result-list">'
+      const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+      $resultContent.innerHTML = ''
+      if (this.value.trim().length <= 0) return
+      let count = 0
+      // perform local searching
+      datas.forEach(function (data) {
+        let isMatch = true
+        if (!data.title || data.title.trim() === '') {
+          data.title = 'Untitled'
+        }
+        let dataTitle = data.title.trim().toLowerCase()
+        const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+        const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
+        let indexTitle = -1
+        let indexContent = -1
+        let firstOccur = -1
+        // only match artiles with not empty titles and contents
+        if (dataTitle !== '' || dataContent !== '') {
+          keywords.forEach(function (keyword, i) {
+            indexTitle = dataTitle.indexOf(keyword)
+            indexContent = dataContent.indexOf(keyword)
+            if (indexTitle < 0 && indexContent < 0) {
               isMatch = false
-            }
-
-            // show search results
-            if (isMatch) {
-              const content = data.content.trim().replace(/<[^>]+>/g, '')
-              if (firstOccur >= 0) {
-                // cut out 130 characters
-                let start = firstOccur - 30
-                let end = firstOccur + 100
-
-                if (start < 0) {
-                  start = 0
-                }
-
-                if (start === 0) {
-                  end = 100
-                }
-
-                if (end > content.length) {
-                  end = content.length
-                }
-
-                let matchContent = content.substring(start, end)
-
-                // highlight all keywords
-                keywords.forEach(function (keyword) {
-                  const regS = new RegExp(keyword, 'gi')
-                  matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
-                  dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
-                })
-
-                str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
-                count += 1
-
-                if (dataContent !== '') {
-                  str += '<p class="search-result">' + matchContent + '...</p>'
-                }
+            } else {
+              if (indexContent < 0) {
+                indexContent = 0
+              }
+              if (i === 0) {
+                firstOccur = indexContent
               }
-              str += '</div>'
             }
           })
-          if (count === 0) {
-            str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
-              '</div>'
+        } else {
+          isMatch = false
+        }
+
+        // show search results
+        if (isMatch) {
+          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
+
+            if (start < 0) {
+              start = 0
+            }
+
+            if (start === 0) {
+              end = 100
+            }
+
+            if (end > content.length) {
+              end = content.length
+            }
+
+            let matchContent = content.substring(start, end)
+
+            // highlight all keywords
+            keywords.forEach(function (keyword) {
+              const regS = new RegExp(keyword, 'gi')
+              matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+              dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
+            })
+
+            str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
+            count += 1
+
+            if (dataContent !== '') {
+              str += '<p class="search-result">' + matchContent + '...</p>'
+            }
           }
           str += '</div>'
-          $resultContent.innerHTML = str
-          window.pjax && window.pjax.refresh($resultContent)
-        })
+        }
       })
+      if (count === 0) {
+        str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
+          '</div>'
+      }
+      str += '</div>'
+      $resultContent.innerHTML = str
+      window.pjax && window.pjax.refresh($resultContent)
+    })
   }
 })
diff --git a/source/js/utils.js b/source/js/utils.js
index 3e52f1b..5b38b5f 100644
--- 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,25 +134,19 @@ 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)
-        }
+      }
+      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 })
         }
       })
 
-      Fancybox.bind('[data-fancybox]', {
-        Hash: false
-      })
+      if (!window.fancyboxRun) {
+        Fancybox.bind('[data-fancybox]', {
+          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'
+          }
+        })
+      }
+    })
   }
 }