Merge branch 'dev'

Merge branch 'dev' of https://github.com/jerryc127/hexo-theme-butterfly into dev
update
2026-04-16 20:30:53 +08:00 · 2023-06-06 23:35:08 +08:00 · 2023-06-06 23:32:44 +08:00 · 2023-06-06 23:32:36 +08:00 · 2023-05-22 19:11:28 +08:00 · 2023-05-22 19:10:39 +08:00
89 changed files with 1446 additions and 1086 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,5 @@
 <div align="right">
-  Language:
-  🇺🇸
-  <a title="Chinese" href="/README_CN.md">🇨🇳</a>
+<a title="Chinese" href="/README_CN.md">中文</a>
 </div>

 # hexo-theme-butterfly
@@ -14,7 +12,7 @@

 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)

-Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://crazywong.com/)
+Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://blog.crazywong.com/)

 Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)

@@ -62,17 +60,17 @@ npm i hexo-theme-butterfly

 - [x] Card UI Design
 - [X] Support sub-menu
- [x] Two Column designs
+- [x] Two-column layout
 - [x] Responsive Web Design
 - [x] Dark Mode
 - [x] Pjax
 - [x] Read Mode
 - [x] Conversion between Traditional and Simplified Chinese
 - [X] TOC catalog is available for both computers and mobile phones
- [X] Color themes (darker/pale night/light/ocean/mac/mac light), support custom colors
+- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean/mac/mac light), also support customization
 - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
 - [X] Disable copy/Add a Copyright Notice to the Copied Text
- [X] Search (Algolia SearchZ/Local Search)
+- [X] Search (Algolia Search/Local Search)
 - [x] Mathjax and Katex
 - [x] Built-in 404 page
 - [x] WordCount
@@ -81,7 +79,7 @@ npm i hexo-theme-butterfly
 - [x] Share (AddThis/Sharejs/Addtoany)
 - [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk)
 - [x] Multiple Comment System Support
- [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp/messenger)
+- [x] Online Chats (Chatra/Tidio/Daovoice/Crisp/messenger)
 - [x] Web analytics
 - [x] Google AdSense
 - [x] Webmaster Verification
--- a/README_CN.md
+++ b/README_CN.md
@@ -1,7 +1,5 @@
 <div align="right">
-  語言:
-  中文
-  <a title="English" href="/README.md">英文</a>
+  <a title="English" href="/README.md">English</a>
 </div>

 # hexo-theme-butterfly
@@ -14,7 +12,7 @@

 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)

-預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://crazywong.com/)
+預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://blog.crazywong.com/)

 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)

@@ -72,7 +70,7 @@ theme: butterfly
 - [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色
 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
 - [X] 可關閉文字複製/可開啟內容複製增加版權信息）
- [X] 兩種搜索（Algolia搜索和本地搜索）
+- [X] 兩種搜索（ Algolia 搜索和本地搜索）
 - [x] Mathjax 和 Katex
 - [x] 內置404頁面
 - [x] 顯示字數統計
@@ -81,7 +79,7 @@ theme: butterfly
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
 - [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
 - [x] 支持雙評論部署
- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp/messenger）
+- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Crisp/messenger）
 - [x] 多種分析系統
 - [x] 谷歌廣告/手動廣告位置
 - [x] 各種站長驗證（Google/Bing/Baidu/360/Yandex）
--- a/_config.yml
+++ b/_config.yml
@@ -1,7 +1,13 @@
-# Main menu navigation (導航目錄)
-# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
+# Navigation bar settings (導航欄設置)
+# see https://butterfly.js.org/posts/4aa8abbe/##導航欄設置-Navigation-bar-settings
 # --------------------------------------

+nav:
+  logo: # image
+  display_title: true
+  fixed: false # fixed navigation bar
+
+# Menu 目錄
 menu:
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
@@ -13,11 +19,6 @@ menu:
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

-nav:
-  logo: # image
-  display_title: true
-  fixed: false # fixed navigation bar
-
 # Code Blocks (代碼相關)
 # --------------------------------------

@@ -28,63 +29,12 @@ highlight_shrink: false # true: shrink the code blocks / false: expand the code
 highlight_height_limit: false # unit: px
 code_word_wrap: false

-# copy settings
-# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
-copy:
-  enable: true
-  copyright:
-    enable: false
-    limit_count: 50
-
-# social settings (社交圖標設置)
+# Social Settings (社交圖標設置)
 # formal:
-#   icon: link || the description
+#   icon: link || the description || color
 social:
-  # fab fa-github: https://github.com/xxxxx || Github
-  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email
-
-# search (搜索)
-# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
-# --------------------------------------
-
-# Algolia search
-algolia_search:
-  enable: false
-  hits:
-    per_page: 6
-
-# Local search
-local_search:
-  enable: false
-  preload: false
-  CDN:
-
-# Docsearch
-# https://docsearch.algolia.com/
-docsearch:
-  enable: false
-  appId:
-  apiKey:
-  indexName:
-  option:
-
-# Math (數學)
-# --------------------------------------
-# About the per_page
-# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
-# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
-# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
-
-# MathJax
-mathjax:
-  enable: false
-  per_page: false
-
-# KaTeX
-katex:
-  enable: false
-  per_page: false
-  hide_scrollbar: true
+  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
+  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'

 # Image (圖片設置)
 # --------------------------------------
@@ -164,14 +114,6 @@ post_meta:
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

-# wordcount (字數統計)
-# see https://butterfly.js.org/posts/ceeb73f/#字數統計
-wordcount:
-  enable: false
-  post_wordcount: true
-  min2read: true
-  total_wordcount: true
-
 # Display the article introduction on homepage
 # 1: description
 # 2: both (if the description exists, it will show description, or show the auto_excerpt)
@@ -189,6 +131,17 @@ anchor:
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.

+# figcaption (圖片描述文字)
+photofigcaption: false
+
+# copy settings
+# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
+copy:
+  enable: true
+  copyright:
+    enable: false
+    limit_count: 50
+
 # Post
 # --------------------------------------

@@ -233,9 +186,6 @@ related_post:
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

-# figcaption (圖片描述文字)
-photofigcaption: false
-
 # post_pagination (分頁)
 # value: 1 || 2 || false
 # 1: The 'next post' will link to old post
@@ -252,7 +202,183 @@ noticeOutdate:
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

-# Share System (分享功能)
+# Footer Settings
+# --------------------------------------
+footer:
+  owner:
+    enable: true
+    since: 2020
+  custom_text:
+  copyright: true # Copyright of theme and framework
+
+# aside (側邊欄)
+# --------------------------------------
+
+aside:
+  enable: true
+  hide: false
+  button: true
+  mobile: true # display on mobile
+  position: right # left or right
+  display:
+    archive: true
+    tag: true
+    category: true
+  card_author:
+    enable: true
+    description:
+    button:
+      enable: true
+      icon: fab fa-github
+      text: Follow Me
+      link: https://github.com/xxxxxx
+  card_announcement:
+    enable: true
+    content: This is my Blog
+  card_recent_post:
+    enable: true
+    limit: 5 # if set 0 will show all
+    sort: date # date or updated
+    sort_order: # Don't modify the setting unless you know how it works
+  card_categories:
+    enable: true
+    limit: 8 # if set 0 will show all
+    expand: none # none/true/false
+    sort_order: # Don't modify the setting unless you know how it works
+  card_tags:
+    enable: true
+    limit: 40 # if set 0 will show all
+    color: false
+    orderby: random # Order of tags, random/name/length
+    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    sort_order: # Don't modify the setting unless you know how it works
+  card_archives:
+    enable: true
+    type: monthly # yearly or monthly
+    format: MMMM YYYY # eg: YYYY年MM月
+    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    limit: 8 # if set 0 will show all
+    sort_order: # Don't modify the setting unless you know how it works
+  card_webinfo:
+    enable: true
+    post_count: true
+    last_push_date: true
+    sort_order: # Don't modify the setting unless you know how it works
+
+# busuanzi count for PV / UV in site
+# 訪問人數
+busuanzi:
+  site_uv: true
+  site_pv: true
+  page_pv: true
+
+# Time difference between publish date and now (網頁運行時間)
+# Formal: Month/Day/Year Time or Year/Month/Day Time
+runtimeshow:
+  enable: false
+  publish_date:
+
+# Aside widget - Newest Comments
+newest_comments:
+  enable: false
+  sort_order: # Don't modify the setting unless you know how it works
+  limit: 6
+  storage: 10 # unit: mins, save data to localStorage
+  avatar: true
+
+# Bottom right button (右下角按鈕)
+# --------------------------------------
+
+# Conversion between Traditional and Simplified Chinese (簡繁轉換)
+translate:
+  enable: false
+  # The text of a button
+  default: 繁
+  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
+  defaultEncoding: 2
+  # Time delay
+  translateDelay: 0
+  # The text of the button when the language is Simplified Chinese
+  msgToTraditionalChinese: '繁'
+  # The text of the button when the language is Traditional Chinese
+  msgToSimplifiedChinese: '簡'
+
+# Read Mode (閲讀模式)
+readmode: true
+
+# dark mode
+darkmode:
+  enable: true
+  # Toggle Button to switch dark/light mode
+  button: true
+  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
+  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
+  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
+  # autoChangeMode: false
+  autoChangeMode: false
+  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
+  start: # 8
+  end: # 22
+
+# show scroll percent in scroll-to-top button
+rightside_scroll_percent: false
+
+# Don't modify the following settings unless you know how they work (非必要請不要修改 )
+# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
+# Don't repeat 不要重複
+rightside_item_order:
+  enable: false
+  hide: # readmode,translate,darkmode,hideAside
+  show: # toc,chat,comment
+
+# Math (數學)
+# --------------------------------------
+# About the per_page
+# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
+# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
+# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
+
+# MathJax
+mathjax:
+  enable: false
+  per_page: false
+
+# KaTeX
+katex:
+  enable: false
+  per_page: false
+  hide_scrollbar: true
+
+# search (搜索)
+# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
+# --------------------------------------
+
+# Algolia search
+algolia_search:
+  enable: false
+  hits:
+    per_page: 6
+
+# Local search
+local_search:
+  enable: false
+  # Preload the search data when the page loads.
+  preload: false
+  # Show top n results per article, show all results by setting to -1
+  top_n_per_article: 1
+  # Unescape html strings to the readable one.
+  unescape: false
+  CDN:
+
+# Docsearch
+docsearch:
+  enable: false
+  appId:
+  apiKey:
+  indexName:
+  option:
+
+# Share System (分享)
 # --------------------------------------

 # AddThis
@@ -416,12 +542,6 @@ daovoice:
  enable: false
  app_id:

-# gitter
-# https://gitter.im/
-gitter:
-  enable: false
-  room:
-
 # crisp
 # https://crisp.chat/en/
 crisp:
@@ -435,15 +555,6 @@ messenger:
  pageID:
  lang: zh_TW # Language en_US/zh_CN/zh_TW and so on

-# Footer Settings
-# --------------------------------------
-footer:
-  owner:
-    enable: true
-    since: 2020
-  custom_text:
-  copyright: true # Copyright of theme and framework
-
 # Analysis
 # --------------------------------------

@@ -534,12 +645,25 @@ background:
 # Footer Background
 footer_bg: false

+# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
+mask:
+  header: true
+  footer: true
+
 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
 rightside-bottom:

 # Enter transitions (開啓網頁進入效果)
 enter_transitions: true

+# Typewriter Effect (打字效果)
+# https://github.com/disjukr/activate-power-mode
+activate_power_mode:
+  enable: false
+  colorful: true # open particle animation (冒光特效)
+  shake: true #  open shake (抖動特效)
+  mobile: false
+
 # Background effects (背景特效)
 # --------------------------------------

@@ -568,14 +692,6 @@ canvas_nest:
  count: 99 # the number of lines, default: 99.
  mobile: false

-# Typewriter Effect (打字效果)
-# https://github.com/disjukr/activate-power-mode
-activate_power_mode:
-  enable: false
-  colorful: true # open particle animation (冒光特效)
-  shake: true #  open shake (抖動特效)
-  mobile: false
-
 # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
 fireworks:
  enable: false
@@ -657,122 +773,13 @@ preloader:
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

-# aside (側邊欄)
-# --------------------------------------
-
-aside:
-  enable: true
-  hide: false
-  button: true
-  mobile: true # display on mobile
-  position: right # left or right
-  display:
-    archive: true
-    tag: true
-    category: true
-  card_author:
-    enable: true
-    description:
-    button:
-      enable: true
-      icon: fab fa-github
-      text: Follow Me
-      link: https://github.com/xxxxxx
-  card_announcement:
-    enable: true
-    content: This is my Blog
-  card_recent_post:
-    enable: true
-    limit: 5 # if set 0 will show all
-    sort: date # date or updated
-    sort_order: # Don't modify the setting unless you know how it works
-  card_categories:
-    enable: true
-    limit: 8 # if set 0 will show all
-    expand: none # none/true/false
-    sort_order: # Don't modify the setting unless you know how it works
-  card_tags:
-    enable: true
-    limit: 40 # if set 0 will show all
-    color: false
-    orderby: random # Order of tags, random/name/length
-    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
-    sort_order: # Don't modify the setting unless you know how it works
-  card_archives:
-    enable: true
-    type: monthly # yearly or monthly
-    format: MMMM YYYY # eg: YYYY年MM月
-    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
-    limit: 8 # if set 0 will show all
-    sort_order: # Don't modify the setting unless you know how it works
-  card_webinfo:
-    enable: true
-    post_count: true
-    last_push_date: true
-    sort_order: # Don't modify the setting unless you know how it works
-
-# busuanzi count for PV / UV in site
-# 訪問人數
-busuanzi:
-  site_uv: true
-  site_pv: true
-  page_pv: true
-
-# Time difference between publish date and now (網頁運行時間)
-# Formal: Month/Day/Year Time or Year/Month/Day Time
-runtimeshow:
+# wordcount (字數統計)
+# see https://butterfly.js.org/posts/ceeb73f/#字數統計
+wordcount:
  enable: false
-  publish_date:
-
-# Aside widget - Newest Comments
-newest_comments:
-  enable: false
-  sort_order: # Don't modify the setting unless you know how it works
-  limit: 6
-  storage: 10 # unit: mins, save data to localStorage
-  avatar: true
-
-# Bottom right button (右下角按鈕)
-# --------------------------------------
-
-# Conversion between Traditional and Simplified Chinese (簡繁轉換)
-translate:
-  enable: false
-  # The text of a button
-  default: 繁
-  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
-  defaultEncoding: 2
-  # Time delay
-  translateDelay: 0
-  # The text of the button when the language is Simplified Chinese
-  msgToTraditionalChinese: '繁'
-  # The text of the button when the language is Traditional Chinese
-  msgToSimplifiedChinese: '簡'
-
-# Read Mode (閲讀模式)
-readmode: true
-
-# dark mode
-darkmode:
-  enable: true
-  # Toggle Button to switch dark/light mode
-  button: true
-  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
-  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
-  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
-  # autoChangeMode: false
-  autoChangeMode: false
-
-# show scroll percent in scroll-to-top button
-rightside_scroll_percent: false
-
-# Don't modify the following settings unless you know how they work (非必要請不要修改 )
-# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
-# Don't repeat 不要重複
-rightside_item_order:
-  enable: false
-  hide: # readmode,translate,darkmode,hideAside
-  show: # toc,chat,comment
+  post_wordcount: true
+  min2read: true
+  total_wordcount: true

 # Lightbox (圖片大圖查看模式)
 # --------------------------------------
@@ -783,12 +790,18 @@ rightside_item_order:
 medium_zoom: false

 # fancybox
-# http://fancyapps.com/fancybox/3/
+# https://fancyapps.com/fancybox/
 fancybox: true

 # Tag Plugins settings (標籤外掛)
 # --------------------------------------

+# abcjs (樂譜渲染)
+# See https://github.com/paulrosen/abcjs
+abcjs:
+  enable: false
+  per_page: true
+
 # mermaid
 # see https://github.com/mermaid-js/mermaid
 mermaid:
@@ -907,7 +920,7 @@ CDN:
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: jsdelivr

-  # Add version number to CDN, true or false
+  # Add version number to url, true or false
  version: false

  # Custom format
@@ -921,8 +934,8 @@ CDN:
    # translate:
    # local_search:
    # algolia_js:
-    # algolia_search_v4:
-    # instantsearch_v4:
+    # algolia_search:
+    # instantsearch:
    # docsearch_js:
    # docsearch_css:
    # pjax:
@@ -935,6 +948,7 @@ CDN:
    # twikoo:
    # waline_js:
    # waline_css:
+    # giscus:
    # sharejs:
    # sharejs_css:
    # mathjax:
@@ -948,8 +962,8 @@ CDN:
    # instantpage:
    # typed:
    # pangu:
-    # fancybox_css_v4:
-    # fancybox_v4:
+    # fancybox_css:
+    # fancybox:
    # medium_zoom:
    # snackbar_css:
    # snackbar:
@@ -957,7 +971,7 @@ CDN:
    # fireworks:
    # click_heart:
    # ClickShowText:
-    # fontawesomeV6:
+    # fontawesome:
    # flickr_justified_gallery_js:
    # flickr_justified_gallery_css:
    # aplayer_css:
@@ -969,3 +983,4 @@ CDN:
    # artalk_js:
    # artalk_css:
    # busuanzi:
+    # abcjs_basic_js:
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -45,6 +45,7 @@ search:
  local_search:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
+    hits_stats: '${hits} results found'

 pagination:
  prev: Previous Post
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -45,6 +45,7 @@ search:
  local_search:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
+    hits_stats: '${hits} results found'

 pagination:
  prev: Previous Post
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -46,6 +46,7 @@ search:
  local_search:
    input_placeholder: 搜索文章
    hits_empty: '找不到您查询的内容：${query}'
+    hits_stats: '共找到 ${hits} 篇文章'

 pagination:
  prev: 上一篇
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -46,6 +46,7 @@ search:
  local_search:
    input_placeholder: 搜尋文章
    hits_empty: '找不到您查詢的內容：${query}'
+    hits_stats: '共找到 ${hits} 篇文章'
    
 pagination:
  prev: 上一篇
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -8,7 +8,7 @@ div
  if theme.medium_zoom
    script(src=url_for(theme.asset.medium_zoom))
  else if theme.fancybox
-    script(src=url_for(theme.asset.fancybox_v4))
+    script(src=url_for(theme.asset.fancybox))

  if theme.instantpage
    script(src=url_for(theme.asset.instantpage), type='module')
@@ -31,6 +31,8 @@ div

    include ./third-party/math/index.pug

+    include ./third-party/abcjs/index.pug
+
    if commentsJsLoad
      include ./third-party/comments/js.pug

@@ -59,3 +61,5 @@ div

  if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+
+  !=partial('includes/third-party/search/index', {}, {cache: true})
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -15,7 +15,7 @@

 meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
-meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
+meta(name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover")
 title= tabTitle
 meta(name="author" content=pageAuthor)
 meta(name="copyright" content=pageCopyright)
@@ -40,13 +40,13 @@ if (theme.pwa && theme.pwa.enable)

 //- main css
 link(rel='stylesheet', href=url_for(theme.asset.main_css))
-link(rel='stylesheet', href=url_for(theme.asset.fontawesomeV6) media="print" onload="this.media='all'")
+link(rel='stylesheet', href=url_for(theme.asset.fontawesome) media="print" onload="this.media='all'")

 if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.asset.snackbar_css) media="print" onload="this.media='all'")

 if theme.fancybox
-  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css_v4) media="print" onload="this.media='all'")
+  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css) media="print" onload="this.media='all'")

 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -21,9 +21,12 @@
    localSearch = JSON.stringify({
      path: theme.local_search.CDN ? theme.local_search.CDN : config.root + config.search.path,
      preload: theme.local_search.preload,
+      top_n_per_article: theme.local_search.top_n_per_article,
+      unescape: theme.local_search.unescape,
      languages: {
        // search languages
        hits_empty: _p("search.local_search.hits_empty"),
+        hits_stats: _p("search.local_search.hits_stats"),
      }
    })
  }
@@ -102,7 +105,7 @@ script.
      post: !{theme.post_meta.post.date_format === 'relative'}
    },
    runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
-    date_suffix: {
+    dateSuffix: {
      just: '!{_p("date_suffix.just")}',
      min: '!{_p("date_suffix.min")}',
      hour: '!{_p("date_suffix.hour")}',
@@ -124,5 +127,6 @@ script.
    percent: {
      toc: !{theme.toc.scroll_percent},
      rightside: !{theme.rightside_scroll_percent},
-    }
+    },
+    autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1}
  }
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -44,7 +44,7 @@ header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
            span#subtitle
        if(theme.social)
          #site_social_icons
-            !=fragment_cache('social', function(){return partial('includes/header/social')})
+            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
--- a/layout/includes/header/social.pug
+++ b/layout/includes/header/social.pug
@@ -1,4 +1,4 @@
 each url, icon in theme.social
  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
  title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-    i(class=icon)
+    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -45,4 +45,3 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside

    include ./rightside.pug
    include ./additional-js.pug
-    !=partial('includes/third-party/search/index', {}, {cache: true})
--- a/layout/includes/loading/fullpage-loading.pug
+++ b/layout/includes/loading/fullpage-loading.pug
@@ -9,20 +9,25 @@
    .loading-word= _p('loading')

 script.
+  (()=>{
+    const $loadingBox = document.getElementById('loading-box')
+    const $body = document.body
    const preloader = {
      endLoading: () => {
-      document.body.style.overflow = 'auto';
-      document.getElementById('loading-box').classList.add("loaded")
+        $body.style.overflow = ''
+        $loadingBox.classList.add('loaded')
      },
      initLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.remove("loaded")
+        $body.style.overflow = 'hidden'
+        $loadingBox.classList.remove('loaded')
+      }
+    }

-    }
-  }
-  window.addEventListener('load',()=> { preloader.endLoading() })
+    preloader.initLoading()
+    window.addEventListener('load',() => { preloader.endLoading() })

    if (!{theme.pjax && theme.pjax.enable}) {
      document.addEventListener('pjax:send', () => { preloader.initLoading() })
      document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }
+  })()
--- a/layout/includes/loading/pace.pug
+++ b/layout/includes/loading/pace.pug
@@ -1,2 +1,11 @@
+script.
+  window.paceOptions = {
+    restartOnPushState: false
+  }
+
+  document.addEventListener('pjax:send', () => {
+    Pace.restart()
+  })
+
 link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
 script(src=url_for(theme.asset.pace_js))
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -70,7 +70,7 @@ mixin postUI(posts)
                block
              span.article-meta-label= ' ' + _p('card_post_count')
          
-          if theme.comments.card_post_count
+          if theme.comments.card_post_count && theme.comments.use
            case theme.comments.use[0]
              when 'Disqus'
                +countBlockInIndex
@@ -89,7 +89,7 @@ mixin postUI(posts)
              when 'Waline'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
-                    span.waline-comment-count(id=url_for(link))
+                    span.waline-comment-count(data-path=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Twikoo'
                +countBlockInIndex
--- a/layout/includes/page/flink.pug
+++ b/layout/includes/page/flink.pug
@@ -1,7 +1,10 @@
 #article-container
  .flink
-    - let pageContent = page.content
-    if page.flink_url
+    - let { content, random, flink_url } = page
+    - let pageContent = content
+
+    if flink_url || random
+      - const linkData = flink_url ? false : site.data.link || false
      script.
        (()=>{
          const replaceSymbol = (str) => {
@@ -9,9 +12,7 @@
          }

          let result = ""
-          fetch("!{url_for(page.flink_url)}")
-            .then(response => response.json())
-            .then(str => {
+          const add = (str) => {
            for(let i = 0; i < str.length; i++){
              const replaceClassName = replaceSymbol(str[i].class_name)
              const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
@@ -19,6 +20,9 @@

              let listResult = ""
              const lists = str[i].link_list
+              if (!{random === true}) {
+                lists.sort(() => Math.random() - 0.5)
+              }
              for(let j = 0; j < lists.length; j++){
                listResult += `
                  <div class="flink-list-item">
@@ -37,7 +41,16 @@

            document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
            window.lazyLoadInstance && window.lazyLoadInstance.update()
-            })
+          }
+
+          const linkData = !{JSON.stringify(linkData)}
+          if (!{Boolean(flink_url)}) {
+            fetch("!{url_for(flink_url)}")
+              .then(response => response.json())
+              .then(add)
+          } else if (linkData) {
+            add(linkData)
+          }
        })()

    else
@@ -67,4 +80,3 @@

        - pageContent = result + pageContent
    != pageContent
-
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -23,7 +23,7 @@ mixin rightsideItem(array)
            i.fas.fa-list-ul
      when 'chat'
        if chat_btn
-          button#chat_btn(type="button" title=_p("rightside.chat"))
+          button#chat-btn(type="button" title=_p("rightside.chat"))
            i.fas.fa-sms
      when 'comment'
        if commentsJsLoad
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -14,5 +14,5 @@
        .headline= _p('aside.categories') 
        .length-num= site.categories.length

-    hr
+    hr.custom-hr
    !=partial('includes/header/menu_item', {}, {cache: true})
--- a/layout/includes/third-party/abcjs/abcjs.pug
+++ b/layout/includes/third-party/abcjs/abcjs.pug
@@ -0,0 +1,15 @@
+script.
+  (() => {
+    function abcjsInit() {
+      function abcjsFn() {
+        for (let abcContainer of document.getElementsByClassName("abc-music-sheet")) {
+          ABCJS.renderAbc(abcContainer, abcContainer.innerHTML, {responsive: 'resize'})
+        }
+      }
+      
+      typeof ABCJS === 'object' ? abcjsFn()
+        : getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+    }
+
+    window.pjax ? abcjsInit() : document.addEventListener('DOMContentLoaded', abcjsInit)
+  })()
--- a/layout/includes/third-party/abcjs/index.pug
+++ b/layout/includes/third-party/abcjs/index.pug
@@ -0,0 +1,6 @@
+if theme.abcjs && theme.abcjs.enable
+  if theme.abcjs.per_page
+    if is_post() || is_page()
+      include ./abcjs.pug
+  else if page.abcjs
+    include ./abcjs.pug
--- a/layout/includes/third-party/card-post-count/artalk.pug
+++ b/layout/includes/third-party/card-post-count/artalk.pug
@@ -2,19 +2,34 @@

 script.
  (() => {
-    const getArtalkCount = () => {
-      const runWidget = () => {
-        Artalk.LoadCountWidget({
-          server: '!{server}',
-          site: '!{site}',
-          countEl: '.artalk-count'
+    const getArtalkCount = async() => {
+      try {
+        const eleGroup = document.querySelectorAll('#recent-posts .artalk-count')
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
+
+        const headerList = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Origin': window.location.origin
+          },
+          body: new URLSearchParams({
+            'site_name': '!{site}',
+            'type':'page_comment',
+            'page_keys': keyArray
          })
        }

-      if (typeof Artalk === 'function') runWidget()
-      else getScript('!{theme.asset.artalk_js}').then(runWidget)
-    }
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()

+        keyArray.forEach((key, index) => {
+          eleGroup[index].textContent = result.data[key] || 0
+        })
+      } catch (err) {
+        console.error(err)
+      }
+    }

    window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount)
  })()
--- a/layout/includes/third-party/card-post-count/fb.pug
+++ b/layout/includes/third-party/card-post-count/fb.pug
@@ -1,4 +1,4 @@
- const fbSDKVer = 'v15.0'
+- const fbSDKVer = 'v16.0'
 - const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`

 script.
--- a/layout/includes/third-party/card-post-count/twikoo.pug
+++ b/layout/includes/third-party/card-post-count/twikoo.pug
@@ -18,7 +18,7 @@ script.
          includeReply: false
        }).then(function (res) {
          document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
-            item.innerText = res[index].count
+            item.textContent = res[index].count
          })
        }).catch(function (err) {
          console.log(err)
--- a/layout/includes/third-party/card-post-count/waline.pug
+++ b/layout/includes/third-party/card-post-count/waline.pug
@@ -1,17 +1,19 @@
 script.
  (() => {
-    function loadWaline () {
-      function initWaline () {
-        let initData = {
-          el: null,
-          serverURL: '!{theme.waline.serverURL}',
-          comment: true
-        }
-        const waline = Waline.init(initData)
-      }
+    async function loadWaline () {
+      try {
+        const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count')
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path'))

-      if (typeof Waline === 'object') initWaline() 
-      else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
+        const result = await res.json()
+        
+        result.data.forEach((count, index) => {
+          eleGroup[index].textContent = count
+        })
+      } catch (err) {
+        console.error(err)
+      }
    }

    window.pjax ? loadWaline() : window.addEventListener('load', loadWaline)
--- a/layout/includes/third-party/chat/chatra.pug
+++ b/layout/includes/third-party/chat/chatra.pug
@@ -1,33 +1,50 @@
 //- https://chatra.io/help/api/
 script.
-  (function(d, w, c) {
-      w.ChatraID = '#{theme.chatra.id}';
-      var s = d.createElement('script');
-      w[c] = w[c] || function() {
-          (w[c].q = w[c].q || []).push(arguments);
-      };
-      s.async = true;
-      s.src = 'https://call.chatra.io/chatra.js';
-      if (d.head) d.head.appendChild(s);
-  })(document, window, 'Chatra');
+  (() => {
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}

-  if (!{theme.chat_btn}) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        Chatra('openChat')
-      });
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    if (isChatBtn) {
+      const close = () => {
+        Chatra('minimizeWidget')
        Chatra('hide')
      }
-      function chatBtnShow () {
+
+      const open = () => {
+        Chatra('openChat', true)
+        Chatra('show')
+      }
+
+      window.ChatraSetup = {
+        startHidden: true
+      }
+    
+      window.chatBtnFn = () => {
+        const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
+        isShow ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          Chatra('hide')
+        },
+        show: () => {
          Chatra('show')
        }
      }
    }

+    (function(d, w, c) {
+      w.ChatraID = '#{theme.chatra.id}'
+      var s = d.createElement('script')
+      w[c] = w[c] || function() {
+          (w[c].q = w[c].q || []).push(arguments)
+      }
+      s.async = true
+      s.src = 'https://call.chatra.io/chatra.js'
+      if (d.head) d.head.appendChild(s)
+    })(document, window, 'Chatra')
+
+  })()
+

--- a/layout/includes/third-party/chat/crisp.pug
+++ b/layout/includes/third-party/chat/crisp.pug
@@ -1,4 +1,5 @@
 script.
+  (() => {
    window.$crisp = [];
    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
    (function () {
@@ -10,27 +11,35 @@ script.
    })();
    $crisp.push(["safe", true])

-  if (!{theme.chat_btn}) {
-    $crisp.push(["do", "chat:hide"])
-    $crisp.push(["on", "chat:closed", function() {
-      $crisp.push(["do", "chat:hide"])
-    }])
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
+    if (isChatBtn) {
+      const open = () => {
        $crisp.push(["do", "chat:show"])
        $crisp.push(["do", "chat:open"])
-
-      });
      }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+
+      const close = () => {
        $crisp.push(["do", "chat:hide"])
      }
-      function chatBtnShow () {
+
+      close()
+      $crisp.push(["on", "chat:closed", function() {
+        close()
+      }])
+
+      window.chatBtnFn = () => {
+        $crisp.is("chat:visible") ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          $crisp.push(["do", "chat:hide"])
+        },
+        show: () => {
          $crisp.push(["do", "chat:show"])
        }
      }
    }
+  })()
--- a/layout/includes/third-party/chat/daovoice.pug
+++ b/layout/includes/third-party/chat/daovoice.pug
@@ -1,40 +1,40 @@
 //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
 script.
+  (() => {
    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")

-script.
-  var isChatBtn = !{theme.chat_btn}
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
    daovoice('init', {
      app_id: '!{theme.daovoice.app_id}',},{
      launcher: { 
-       disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
+        disableLauncherIcon: isChatBtn
      },
    });
    daovoice('update');

    if (isChatBtn) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        daovoice('show')
-      });
+      window.chatBtnFn = () => {
+        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
+        isShow ? daovoice('hide') : daovoice('show')
      }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
          daovoice('update', {},{
            launcher: {
-          disableLauncherIcon: true // 悬浮 ICON 是否显示
-          },
-        });
+              disableLauncherIcon: true
            }
-      function chatBtnShow () {
-        daovoice('update', {},{
+          })
+        },
+        show: () => {
+          daovoice('update', {}, {
            launcher: {
-          disableLauncherIcon: false // 悬浮 ICON 是否显示
-          },
-        });
+              disableLauncherIcon: false
+            }
+          })
        }
      }
    }
+  })()
--- a/layout/includes/third-party/chat/gitter.pug
+++ b/layout/includes/third-party/chat/gitter.pug
@@ -1,43 +0,0 @@
-if theme.chat_btn
-  script.
-    ((window.gitter = {}).chat = {}).options = {
-      disableDefaultChat: true,
-    };
-    document.addEventListener('gitter-sidecar-ready', (e) => {
-      const GitterChat = e.detail.Chat
-      let chat
-
-      function initGitter () {
-        chat = new GitterChat({
-          room: '#{theme.gitter.room}',
-          activationElement: '#chat_btn'
-        });
-      }
-
-      initGitter()
-
-      if (!{theme.pjax.enable}) {
-        document.addEventListener('pjax:complete', () => {
-          chat.destroy()
-          initGitter()
-        })
-      }
-
-    })
-else
-  script.
-    ((window.gitter = {}).chat = {}).options = {
-      room: '#{theme.gitter.room}',
-    };
-
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
-        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'none'
-      }
-
-      function chatBtnShow () {
-        document.getElementsByClassName('gitter-open-chat-button')[0].style.display= 'block'
-      }
-    }
-
-script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
--- a/layout/includes/third-party/chat/index.pug
+++ b/layout/includes/third-party/chat/index.pug
@@ -4,8 +4,6 @@ else if theme.tidio && theme.tidio.enable
  include ./tidio.pug
 else if theme.daovoice && theme.daovoice.enable
  include ./daovoice.pug
-else if theme.gitter && theme.gitter.enable
-  include ./gitter.pug
 else if theme.crisp && theme.crisp.enable
  include ./crisp.pug
 else if theme.messenger && theme.messenger.enable
--- a/layout/includes/third-party/chat/messenger.pug
+++ b/layout/includes/third-party/chat/messenger.pug
@@ -4,12 +4,13 @@
 #fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox')

 script.
+  (() => {
    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')

    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
-      version: 'v15.0'
+        version: 'v16.0'
      });
    };

@@ -21,22 +22,23 @@ script.
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

-  if (!{theme.chat_btn}) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        FB.CustomerChat.show();
-      });
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
+    if (isChatBtn) {
+      window.chatBtnFn = () => {
+        const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2')
+        isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show()
      }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
          FB.CustomerChat.hide()
-      }
-      function chatBtnShow () {
+        },
+        show: () => {
          FB.CustomerChat.show(false)
        }
      }
    }
+  })()

--- a/layout/includes/third-party/chat/tidio.pug
+++ b/layout/includes/third-party/chat/tidio.pug
@@ -1,41 +1,45 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
+script.
+  (() => {
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}

-if theme.chat_btn
-  script.
-    function onTidioChatApiReady() {
-      window.tidioChatApi.hide();
-      window.tidioChatApi.on("close", function() {
-        window.tidioChatApi.hide();
-      });
+    if (isChatBtn) {
+      let isShow = false
+      const close = () => {
+        window.tidioChatApi.hide()
+        isShow = false
+      }
+      
+      const open = () => {
+        window.tidioChatApi.open()
+        window.tidioChatApi.show()
+        isShow = true
+      }
+
+      const onTidioChatApiReady = () => {
+        window.tidioChatApi.hide()
+        window.tidioChatApi.on("close", close)
      }
      if (window.tidioChatApi) {
-      window.tidioChatApi.on("ready", onTidioChatApiReady);
+        window.tidioChatApi.on("ready", onTidioChatApiReady)
      } else {
-      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
+        document.addEventListener("tidioChat-ready", onTidioChatApiReady)
      }

-    var chatBtnFn = () => {
-      document.getElementById("chat_btn").addEventListener("click", function(){
-        window.tidioChatApi.show();
-        window.tidioChatApi.open();
-      });
+      window.chatBtnFn = () => {
+        if (!window.tidioChatApi) return
+        isShow ? close() : open()
      }
-    chatBtnFn()
-
-else if theme.chat_hide_show
-  script.
-    function chatBtnHide () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.hide();
-        document.getElementById('tidio-chat').style.display= 'none'
-      }
-    }
-
-    function chatBtnShow () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.show();
-        document.getElementById('tidio-chat').style.display= 'block'
-      } 
-    }
-
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          window.tidioChatApi && window.tidioChatApi.hide()
+        },
+        show: () => {
+          window.tidioChatApi && window.tidioChatApi.show()
+        }
+      }
+    }
+  })()

--- a/layout/includes/third-party/comments/artalk.pug
+++ b/layout/includes/third-party/comments/artalk.pug
@@ -11,22 +11,34 @@ script.
        darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
        countEl: '.artalk-count'
      },!{JSON.stringify(option)}))
-    }

-    if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
-    else {
-      getCSS('!{theme.asset.artalk_css}')
-      typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
-                                  : setTimeout(()=>{initArtalk()},200)
-    }
-  }
-
-  document.getElementById('darkmode').addEventListener('click',()=> {
-    if (typeof window.artalkItem !== 'object') return
-    let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
-    window.artalkItem.setDarkMode(!isDark)
+      if (GLOBAL_CONFIG.lightbox === 'null') return
+      window.artalkItem.use(ctx => {
+        ctx.on('list-loaded', () => {
+          ctx.getCommentList().forEach(comment => {
+            const $content = comment.getRender().$content
+            btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
          })
+        })
+      })
+    }

+    if (typeof window.artalkItem === 'object') initArtalk()
+    else {
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
+        getScript('!{theme.asset.artalk_js}').then(initArtalk)
+      })
+    }
+  }
+
+  function artalkChangeMode (theme) {
+    const artalkWrap = document.getElementById('artalk-wrap')
+    if (!(artalkWrap && artalkWrap.children.length)) return
+    const isDark = theme === 'dark'
+    window.artalkItem.setDarkMode(isDark)
+  }
+
+  btf.addModeChange('artalk', artalkChangeMode)
  
  if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
--- a/layout/includes/third-party/comments/disqus.pug
+++ b/layout/includes/third-party/comments/disqus.pug
@@ -2,19 +2,21 @@

 script.
  function loadDisqus () {
-    var disqus_config = function () {
+    const disqus_config = function () {
      this.page.url = '!{ page.permalink }'
      this.page.identifier = '!{ url_for(page.path) }'
      this.page.title = '!{ disqusPageTitle }'
-    };
+    }

-    window.disqusReset = () => {
+    const disqusReset = () => {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      })
    }

+    btf.addModeChange('disqus', disqusReset)
+
    if (window.DISQUS) disqusReset()
    else {
      (function() { 
@@ -24,10 +26,6 @@ script.
        (d.head || d.body).appendChild(s);
      })();
    }
-
-    document.getElementById('darkmode').addEventListener('click', () => {
-      setTimeout(() => window.disqusReset(), 200)
-    })
  }

  if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -23,7 +23,7 @@ script.
    }


-    document.getElementById('darkmode').addEventListener('click', themeChange)
+    btf.addModeChange('disqusjs', themeChange)

    if (window.disqusJsLoad) initDisqusjs()
    else {
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -1,4 +1,4 @@
- const fbSDKVer = 'v15.0'
+- const fbSDKVer = 'v16.0'
 - const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`

 script.
@@ -25,6 +25,16 @@ script.
    }
  }

+  function fbModeChange (theme) {
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
+    if ($fbComment && typeof FB === 'object') {
+      $fbComment.setAttribute('data-colorscheme',theme)
+      FB.XFBML.parse(document.getElementById('post-comment'))
+    }
+  }
+
+  btf.addModeChange('facebook_comments', fbModeChange)
+
  if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
    else loadFBComment()
--- a/layout/includes/third-party/comments/giscus.pug
+++ b/layout/includes/third-party/comments/giscus.pug
@@ -1,16 +1,20 @@
- const { repo, repo_id, category_id, option } = theme.giscus
- const themes = theme.giscus.theme
-script.
-  function loadGiscus () {
-    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+- const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
+- const giscusUrl = theme.asset.giscus || 'https://giscus.app/client.js'
+- const giscusOriginUrl = new URL(giscusUrl).origin

+script.
+  function getGiscusTheme (theme) {
+    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+  }
+
+  function loadGiscus () {
    const config = Object.assign({
-      src: 'https://giscus.app/client.js',
+      src: '!{giscusUrl}',
      'data-repo': '!{repo}',
      'data-repo-id': '!{repo_id}',
      'data-category-id': '!{category_id}',
      'data-mapping': 'pathname',
-      'data-theme': nowTheme,
+      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
      'data-reactions-enabled': '1',
      crossorigin: 'anonymous',
      async: true
@@ -23,22 +27,22 @@ script.
    document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
  }

-  function changeGiscusTheme () {
-    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
-
+  function changeGiscusTheme (theme) {
    function sendMessage(message) {
-      const iframe = document.querySelector('iframe.giscus-frame');
-      if (!iframe) return;
-      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      const iframe = document.querySelector('iframe.giscus-frame')
+      if (!iframe) return
+      iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
    }

    sendMessage({
      setConfig: {
-        theme: theme
+        theme: getGiscusTheme(theme)
      }
    });
  }

+  btf.addModeChange('giscus', changeGiscusTheme)
+
  if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
    else loadGiscus()
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/layout/includes/third-party/comments/gitalk.pug
@@ -24,7 +24,7 @@ script.
  function commentCount(n){
    let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
    if (isCommentCount) {
-      isCommentCount.innerHTML= n
+      isCommentCount.textContent= n
    }
  }

--- a/layout/includes/third-party/comments/index.pug
+++ b/layout/includes/third-party/comments/index.pug
@@ -1,5 +1,5 @@
 - let defaultComment = theme.comments.use[0]
-hr
+hr.custom-hr
 #post-comment
  .comment-head
    .comment-headline
--- a/layout/includes/third-party/comments/remark42.pug
+++ b/layout/includes/third-party/comments/remark42.pug
@@ -51,11 +51,12 @@ script.
    }
  }

-  document.getElementById('darkmode').addEventListener('click',()=>{
+  function remarkChangeMode (theme) {
    if (!window.REMARK42) return
-    let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
    window.REMARK42.changeTheme(theme)
-  })
+  }
+
+  btf.addModeChange('remark42', remarkChangeMode)

  if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -23,7 +23,7 @@ script.
        urls: [window.location.pathname],
        includeReply: false
      }).then(function (res) {
-        countELement.innerText = res[0].count
+        countELement.textContent = res[0].count
      }).catch(function (err) {
        console.error(err);
      });
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/layout/includes/third-party/comments/utterances.pug
@@ -12,10 +12,10 @@ script.
    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
  }

-  function utterancesTheme () {
+  function utterancesTheme (theme) {
    const iframe = document.querySelector('.utterances-frame')
    if (iframe) {
-      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+      const theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
      const message = {
        type: 'set-theme',
        theme: theme
@@ -24,6 +24,8 @@ script.
    }
  }

+  btf.addModeChange('utterances', utterancesTheme)
+
  if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
    else loadUtterances()
--- a/layout/includes/third-party/comments/waline.pug
+++ b/layout/includes/third-party/comments/waline.pug
@@ -14,13 +14,9 @@ script.
      }, !{JSON.stringify(option)}))
    }

-    const walineCSSLoad = document.getElementById('waline-css')
-
-    if (typeof Waline === 'object') {
-      walineCSSLoad ? initWaline() : getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(initWaline)
-    }
+    if (typeof Waline === 'object') initWaline()
    else {
-      getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(() => {
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
      })
    }
--- a/layout/includes/third-party/math/mathjax.pug
+++ b/layout/includes/third-party/math/mathjax.pug
@@ -3,7 +3,7 @@ script.
  if (!window.MathJax) {
    window.MathJax = {
      tex: {
-        inlineMath: [ ['$','$'], ["\\(","\\)"]],
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
        tags: 'ams'
      },
      chtml: {
@@ -21,16 +21,7 @@ script.
              math.end = {node: text, delim: '', n: 0}
              doc.math.push(math)
            }
-          }, ''],
-          insertScript: [200, () => {
-            document.querySelectorAll('mjx-container').forEach(node => {
-              if (node.hasAttribute('display')) {
-                btf.wrap(node, 'div', { class: 'mathjax-overflow' })
-              } else {
-                btf.wrap(node, 'span', { class: 'mathjax-overflow' })
-              }
-            });
-          }, '', false]
+          }, '']
        }
      }
    }
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -1,19 +1,30 @@
 script.
  (() => {
-    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
-    if ($mermaidWrap.length) {
-      window.runMermaid = () => {
+    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
+    if ($mermaid.length === 0) return
+    const runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'

-        Array.from($mermaidWrap).forEach((item, index) => {
+      Array.from($mermaid).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)
+
+        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
+
+        const renderV10 = () => {
+          renderFn.then(({svg}) => {
+            mermaidSrc.insertAdjacentHTML('afterend', svg)
          })
+        }
+
+        const renderV9 = svg => {
+          mermaidSrc.insertAdjacentHTML('afterend', svg)
+        }
+
+        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
      })
    }

@@ -21,6 +32,7 @@ script.
      window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
    }

+    btf.addModeChange('mermaid', runMermaid)
+
    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
-    }
  })()
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/layout/includes/third-party/newest-comments/artalk.pug
@@ -1,6 +1,6 @@
 - const { server, site, option } = theme.artalk
- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/'
- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp'
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)

 script.
  window.addEventListener('load', () => {
@@ -45,20 +45,40 @@ script.
      window.pjax && window.pjax.refresh($dom)
    }

-    const headerList = {
-      method: 'POST',
-      headers: {
-        'Origin': window.location.origin
+    const getSetting = async () => {
+      try {
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
+        return await res.json()
+      } catch (e) {
+        console.log(e)
      }
    }

-    const getComment = () => {
-      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}&site_name=!{site}', headerList)
-        .then(response => response.json())
-        .then(d => {
-          const artalk = d.data.map(function (e) {
+    const headerList = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Origin': window.location.origin
+      },
+      body: new URLSearchParams({
+        'site_name': '!{site}',
+        'limit': '!{theme.newest_comments.limit}',
+        'type':'latest_comments'
+      })
+    }
+
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
+        const avatarStr = await getSetting()
+        const { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar
+        const avatarCdn = !{avatarCdn} || mirror
+        let avatarDefault = !{avatarDefault} || params || defaults
+        avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
+        const artalk = result.data.map(function (e) {
          return {
-              'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}',
+            'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
            'content': changeContent(e.content_marked),
            'nick': e.nick,
            'url': e.page_url,
@@ -67,10 +87,11 @@ script.
        })
        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
        generateHtml(artalk)
-        }).catch(e => {
+      } catch (e) {
+        console.log(e)
        const $dom = document.querySelector('#card-newest-comments .aside-list')
        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        })
+      }
    }

    const newestCommentInit = () => {
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -32,7 +32,7 @@ script.
          generateHtml(disqusArray)
        }).catch(e => {
          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -58,7 +58,7 @@ script.
          findTrueUrl(githubArray)
        }).catch(e => {
          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -60,7 +60,7 @@ script.
          generateHtml(remark42)
        }).catch(e => {
          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -36,7 +36,7 @@ script.
          generateHtml(twikooArray)
        }).catch(function (err) {
          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
      }

--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -79,7 +79,7 @@ script.
          generateHtml(valineArray)
        }).catch(e => {
          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        }) 
    }

--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -1,6 +1,6 @@
 script.
  window.addEventListener('load', () => {
-    const changeContent = (content) => {
+    const changeContent = content => {
      if (content === '') return content

      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
@@ -41,31 +41,26 @@ script.
      window.pjax && window.pjax.refresh($dom)
    }

-    const getComment = () => {
-      const loadWaline = () => {
-        Waline.RecentComments({
-          serverURL: '!{theme.waline.serverURL}',
-          count: !{theme.newest_comments.limit}
-        }).then(({comments}) => {
-          const walineArray = comments.map(e => {
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
+        const result = await res.json()
+        const walineArray = result.data.map(e => {
          return {
            'content': changeContent(e.comment),
            'avatar': e.avatar,
            'nick': e.nick,
            'url': e.url + '#' + e.objectId,
-              'date': e.insertedAt,
+            'date': e.time || e.insertedAt
          }
        })
        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
        generateHtml(walineArray)
-        }).catch(e => {
+      } catch (err) {
+        console.error(err)
        const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        }) 
+        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
      }
-
-      if (typeof Waline === 'object') loadWaline()
-      else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
    }

    const newestCommentInit = () => {
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -62,7 +62,6 @@ script.

    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

-    typeof chatBtnFn === 'function' && chatBtnFn()
    typeof panguInit === 'function' && panguInit()

    // google analytics
--- a/layout/includes/third-party/search/algolia.pug
+++ b/layout/includes/third-party/search/algolia.pug
@@ -17,6 +17,6 @@
  
  #search-mask

-  script(src=url_for(theme.asset.algolia_search_v4))
-  script(src=url_for(theme.asset.instantsearch_v4))
+  script(src=url_for(theme.asset.algolia_search))
+  script(src=url_for(theme.asset.instantsearch))
  script(src=url_for(theme.asset.algolia_js))
--- a/layout/includes/third-party/search/local-search.pug
+++ b/layout/includes/third-party/search/local-search.pug
@@ -15,8 +15,8 @@
        .local-search-box
          input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input
      hr
-      #local-search-results
-
+      #local-search-results.no-result
+      #local-search-stats-wrap
  #search-mask

  script(src=url_for(theme.asset.local_search))
--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -38,7 +38,7 @@ case source
              sub.unshift(data.hitokoto, from)
              typedJSFn.init(sub)
            } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
+              document.getElementById('subtitle').textContent = data.hitokoto
            }
          })
      }
@@ -55,7 +55,7 @@ case source
            sub.unshift(con, from)
            typedJSFn.init(sub)
          } else {
-            document.getElementById('subtitle').innerHTML = con
+            document.getElementById('subtitle').textContent = con
          }
        })
      }
@@ -72,7 +72,7 @@ case source
              sub.unshift(content)
              typedJSFn.init(sub)
            } else {
-              document.getElementById('subtitle').innerHTML = result.data.content
+              document.getElementById('subtitle').textContent = result.data.content
            }
          })
        })
@@ -86,7 +86,7 @@ case source
        if (!{effect}) {
          typedJSFn.init(!{JSON.stringify(subContent)})
        } else {
-          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+          document.getElementById("subtitle").textContent = !{JSON.stringify(subContent[0])}
        }
      }
      typedJSFn.run(subtitleType)
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -24,4 +24,4 @@ if theme.aside.card_author.enable
  
    if(theme.social)
        .card-info-social-icons.is-center
-          !=fragment_cache('social', function(){return partial('includes/header/social')}) 
+          !=partial('includes/header/social', {}, {cache: true})
--- a/layout/includes/widget/card_newest_comment.pug
+++ b/layout/includes/widget/card_newest_comment.pug
@@ -1,4 +1,4 @@
-if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
+if theme.newest_comments.enable && theme.comments.use && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
  .card-widget#card-newest-comments
    .item-headline
      i.fas.fa-comment-dots
--- a/layout/includes/widget/card_tags.pug
+++ b/layout/includes/widget/card_tags.pug
@@ -9,6 +9,6 @@ if theme.aside.card_tags.enable
      - limit = limit === 0 ? 0 : limit || 40

      if theme.aside.card_tags.color
-        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
+        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: limit, unit: 'em'})
      else
        .card-tag-cloud!= tagcloud({orderby: orderby, order: order, min_font: 1.1, max_font: 1.5, amount: limit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "4.7.0",
+  "version": "4.9.0",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
@@ -23,7 +23,7 @@
    "email": "my@crazywong.com"
  },
  "dependencies": {
-    "hexo-renderer-stylus": "^2.1.0",
+    "hexo-renderer-stylus": "^3.0.0",
    "hexo-renderer-pug": "^3.0.0"
  },
  "homepage": "https://butterfly.js.org/",
--- a/plugins.yml
+++ b/plugins.yml
@@ -1,11 +1,11 @@
-algolia_search_v4:
+algolia_search:
  name: algoliasearch
  file: dist/algoliasearch-lite.umd.js
-  version: 4.14.3
-instantsearch_v4:
+  version: 4.17.1
+instantsearch:
  name: instantsearch.js
  file: dist/instantsearch.production.min.js
-  version: 4.51.0
+  version: 4.56.1
 pjax:
  name: pjax
  file: pjax.min.js
@@ -37,17 +37,17 @@ disqusjs_css:
 twikoo:
  name: twikoo
  file: dist/twikoo.all.min.js
-  version: 1.6.10
+  version: 1.6.16
 waline_js:
  name: '@waline/client'
  file: dist/waline.js
  other_name: waline
-  version: 2.14.7
+  version: 2.15.5
 waline_css:
  name: '@waline/client'
  file: dist/waline.css
  other_name: waline
-  version: 2.14.7
+  version: 2.15.5
 sharejs:
  name: butterfly-extsrc
  file: sharejs/dist/js/social-share.min.js
@@ -64,16 +64,16 @@ katex:
  name: katex
  file: dist/katex.min.css
  other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 katex_copytex:
  name: katex
  file: dist/contrib/copy-tex.min.js
  other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 mermaid:
  name: mermaid
  file: dist/mermaid.min.js
-  version: 9.4.0
+  version: 10.2.2
 canvas_ribbon:
  name: butterfly-extsrc
  file: dist/canvas-ribbon.min.js
@@ -109,24 +109,24 @@ lazyload:
 instantpage:
  name: instant.page
  file: instantpage.js
-  version: 5.1.1
+  version: 5.2.0
 typed:
  name: typed.js
-  file: lib/typed.min.js
-  version: 2.0.12
+  file: dist/typed.umd.js
+  version: 2.0.16
 pangu:
  name: pangu
  file: dist/browser/pangu.min.js
  version: 4.0.7
-fancybox_css_v4:
+fancybox_css:
  name: '@fancyapps/ui'
-  file: dist/fancybox.css
-  version: 4.0.31
+  file: dist/fancybox/fancybox.css
+  version: 5.0.19
  other_name: fancyapps-ui
-fancybox_v4:
+fancybox:
  name: '@fancyapps/ui'
-  file: dist/fancybox.umd.js
-  version: 4.0.31
+  file: dist/fancybox/fancybox.umd.js
+  version: 5.0.19
  other_name: fancyapps-ui
 medium_zoom:
  name: medium-zoom
@@ -140,11 +140,11 @@ snackbar:
  name: node-snackbar
  file: dist/snackbar.min.js
  version: 0.1.16
-fontawesomeV6:
+fontawesome:
  name: '@fortawesome/fontawesome-free'
  file: css/all.min.css
  other_name: font-awesome
-  version: 6.3.0
+  version: 6.4.0
 flickr_justified_gallery_js:
  name: flickr-justified-gallery
  file: dist/fjGallery.min.js
@@ -183,11 +183,11 @@ prismjs_autoloader:
 artalk_js:
  name: artalk
  file: dist/Artalk.js
-  version: 2.4.4
+  version: 2.5.5
 artalk_css:
  name: artalk
  file: dist/Artalk.css
-  version: 2.4.4
+  version: 2.5.5
 pace_js:
  name: pace-js
  other_name: pace
@@ -202,9 +202,13 @@ docsearch_js:
  name: '@docsearch/js'
  other_name: docsearch-js
  file: dist/umd/index.js
-  version: 3.3.3
+  version: 3.4.0
 docsearch_css:
  name: '@docsearch/css'
  other_name: docsearch-css
  file: dist/style.css
-  version: 3.3.3
+  version: 3.4.0
+abcjs_basic_js:
+  name: abcjs
+  file: dist/abcjs-basic-min.js
+  version: 6.2.2
--- a/scripts/events/cdn.js
+++ b/scripts/events/cdn.js
@@ -41,20 +41,19 @@ hexo.extend.filter.register('before_generate', () => {
    }
  }

-  const minFile = (file) => {
+  const minFile = file => {
    return file.replace(/(?<!\.min)\.(js|css)$/g, ext => '.min' + ext)
  }

  const createCDNLink = (data, type, cond = '') => {
    Object.keys(data).forEach(key => {
      let { name, version, file, other_name } = data[key]
-
-      const min_file = minFile(file)
      const cdnjs_name = other_name || name
      const cdnjs_file = file.replace(/^[lib|dist]*\/|browser\//g, '')
      const min_cdnjs_file = minFile(cdnjs_file)
      if (cond === 'internal') file = `source/${file}`
-      const verType = CDN.version ? `@${version}` : ''
+      const min_file = minFile(file)
+      const verType = CDN.version ? (type === 'local' ? `?v=${version}` : `@${version}`) : ''

      const value = {
        version,
@@ -67,7 +66,7 @@ hexo.extend.filter.register('before_generate', () => {
      }

      const cdnSource = {
-        local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
+        local: cond === 'internal' ? `${cdnjs_file + verType}` : `/pluginsSrc/${name}/${file + verType}`,
        jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
        unpkg: `https://unpkg.com/${name}${verType}/${file}`,
        cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
@@ -77,7 +76,7 @@ hexo.extend.filter.register('before_generate', () => {
      data[key] = cdnSource[type]
    })

-    if (cond === 'internal') data.main_css = 'css/index.css'
+    if (cond === 'internal') data.main_css = 'css/index.css' + (CDN.version ? `?v=${version}` : '')
    return data
  }

@@ -90,6 +89,9 @@ hexo.extend.filter.register('before_generate', () => {
    return obj
  }

-  themeConfig.asset = Object.assign(createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
-    createCDNLink(thirdPartySrc, CDN.third_party_provider), deleteNullValue(CDN.option))
+  themeConfig.asset = Object.assign(
+    createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
+    createCDNLink(thirdPartySrc, CDN.third_party_provider),
+    deleteNullValue(CDN.option)
+  )
 })
--- a/scripts/events/init.js
+++ b/scripts/events/init.js
@@ -1,21 +1,19 @@
 hexo.extend.filter.register('before_generate', () => {
  // Get first two digits of the Hexo version number
-  const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
-  const logger = hexo.log
+  const { version, log, locals } = hexo
+  const hexoVer = version.replace(/(^.*\..*)\..*/, '$1')

  if (hexoVer < 5.3) {
-    logger.error('Please update Hexo to V5.3.0 or higher!')
-    logger.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
+    log.error('Please update Hexo to V5.3.0 or higher!')
+    log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
    process.exit(-1)
  }

-  if (hexo.locals.get) {
-    const data = hexo.locals.get('data')
+  if (locals.get) {
+    const data = locals.get('data')
    if (data && data.butterfly) {
-      logger.error(
-        " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' "
-      )
-      logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
+      log.error("'butterfly.yml' is deprecated. Please use '_config.butterfly.yml'")
+      log.error("'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml'")
      process.exit(-1)
    }
  }
--- a/scripts/filters/random_cover.js
+++ b/scripts/filters/random_cover.js
@@ -6,7 +6,7 @@
 'use strict'

 hexo.extend.filter.register('before_post_render', function (data) {
-  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
  let randomCover
  let coverVal = data.cover

--- a/scripts/helpers/inject_head_js.js
+++ b/scripts/helpers/inject_head_js.js
@@ -7,7 +7,8 @@

 hexo.extend.helper.register('inject_head_js', function () {
  const { darkmode, aside } = this.theme
-
+  const start = darkmode.start ? darkmode.start : 6
+  const end = darkmode.end ? darkmode.end : 18
  const { theme_color } = hexo.theme.config
  const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
  const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
@@ -110,7 +111,7 @@ hexo.extend.helper.register('inject_head_js', function () {
            else if (isNotSpecified || hasNoSupport) {
              const now = new Date()
              const hour = now.getHours()
-              const isNight = hour <= 6 || hour >= 18
+              const isNight = hour <= ${start} || hour >= ${end}
              isNight ? activateDarkMode() : activateLightMode()
            }
            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
@@ -125,7 +126,7 @@ hexo.extend.helper.register('inject_head_js', function () {
      darkmodeJs += `
          const now = new Date()
          const hour = now.getHours()
-          const isNight = hour <= 6 || hour >= 18
+          const isNight = hour <= ${start} || hour >= ${end}
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -94,7 +94,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
 })

 hexo.extend.helper.register('isImgOrUrl', function (path) {
-  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
+  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
  if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
    return true
  }
--- a/scripts/tag/gallery.js
+++ b/scripts/tag/gallery.js
@@ -15,18 +15,10 @@ function gallery (args, content) {
  args = args.join(' ').split(',')
  let rowHeight, limit, lazyload, type, dataStr

-  // url,[link],[lazyload],[rowHeight],[limit]
  if (args[0] === 'url') {
-    dataStr = args[1]
-    lazyload = args[2] === 'true'
-    rowHeight = args[3] || 220
-    limit = args[4] || 10
-    type = ' url'
+    [type, dataStr, lazyload, rowHeight = 220, limit = 10] = args // url,[link],[lazyload],[rowHeight],[limit]
  } else {
-    rowHeight = args[1] || 220
-    limit = args[2] || 10
-    lazyload = args[0] === 'true'
-    type = ' data'
+    [lazyload, rowHeight = 220, limit = 10] = args // [lazyload],[rowHeight],[limit]
    const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
    let m
    const arr = []
@@ -44,7 +36,8 @@ function gallery (args, content) {
    dataStr = JSON.stringify(arr)
  }

-  const lazyloadClass = lazyload ? 'lazyload' : ''
+  type = type ? ' url' : ' data'
+  const lazyloadClass = lazyload === 'true' ? 'lazyload' : ''

  return `<div class="gallery">
    <div class="fj-gallery ${lazyloadClass + type}" data-rowHeight="${rowHeight}" data-limit="${limit}">
--- a/scripts/tag/score.js
+++ b/scripts/tag/score.js
@@ -0,0 +1,22 @@
+/**
+ * Music Score
+ * {% score %}
+ */
+
+'use strict';
+
+function score(args, content) {
+    function escapeHtmlTags(s) {
+        let lookup = {
+            '&': "&amp;",
+            '"': "&quot;",
+            '\'': "&apos;",
+            '<': "&lt;",
+            '>': "&gt;"
+        };
+        return s.replace(/[&"'<>]/g, c => lookup[c]);
+    }
+    return `<div class="abc-music-sheet">${escapeHtmlTags(content)}</div>`;
+}
+
+hexo.extend.tag.register('score', score, {ends: true});
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -72,6 +72,30 @@
      cursor: pointer
      transition: all .3s ease-out

+.custom-hr
+  position: relative
+  margin: 40px auto
+  border: 2px dashed var(--hr-border)
+
+  if hexo-config('hr_icon.enable')
+    width: calc(100% - 4px)
+
+    &:hover
+      &:before
+        left: calc(95% - 20px)
+
+    &:before
+      position: absolute
+      top: $hr-icon-top
+      left: 5%
+      z-index: 1
+      color: var(--hr-before-color)
+      content: $hr-icon
+      font-size: 20px
+      line-height: 1
+      transition: all 1s ease-in-out
+      @extend .fontawesomeIcon
+
 maxWidth600()
  @media screen and (max-width: 600px)
    {block}
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -34,6 +34,8 @@
  --headline-presudo: #a0a0a0
  --scrollbar-color: $scrollbar-color
  --default-bg-color: $theme-color
+  --zoom-bg: #fff
+  --mark-bg: alpha($dark-black, .3)

 body
  position: relative
@@ -96,30 +98,6 @@ h6
 *
  box-sizing: border-box

-hr
-  position: relative
-  margin: 40px auto
-  border: 2px dashed var(--hr-border)
-
-  if hexo-config('hr_icon.enable')
-    width: calc(100% - 4px)
-
-    &:hover
-      &:before
-        left: calc(95% - 20px)
-
-    &:before
-      position: absolute
-      top: $hr-icon-top
-      left: 5%
-      z-index: 1
-      color: var(--hr-before-color)
-      content: $hr-icon
-      font-size: 20px
-      line-height: 1
-      transition: all 1s ease-in-out
-      @extend .fontawesomeIcon
-
 .table-wrap
  overflow-x: scroll
  margin: 0 0 20px
@@ -174,9 +152,6 @@ if $site-name-font
 .is-center
  text-align: center

-.copy-true
-  user-select: all
-
 .pull-left
  float: left

--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -75,6 +75,14 @@ $code-block
        &:hover
          border-bottom-color: var(--hl-color)

+    &.copy-true
+      user-select: all
+
+      & > table,
+      & > pre
+        display: block !important
+        opacity: 0
+
  .highlight-tools
    position: relative
    display: flex
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -52,7 +52,7 @@
        transition: all .3s

        &:hover
-          transform: rotate(540deg)
+          transform: rotate(360deg)

    #card-info-btn
      display: block
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@@ -5,12 +5,12 @@
  background-position: bottom
  background-size: cover

-  if hexo-config('footer_bg') != false
+  if hexo-config('footer_bg') != false && hexo-config('mask.footer')
    &:before
      position: absolute
      width: 100%
      height: 100%
-      background-color: alpha($dark-black, .5)
+      background-color: var(--mark-bg)
      content: ''

 #footer-wrap
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -7,11 +7,12 @@
  background-repeat: no-repeat
  transition: all .5s

+  if hexo-config('mask.header')
    &:not(.not-top-img):before
      position: absolute
      width: 100%
      height: 100%
-    background-color: alpha($dark-black, .3)
+      background-color: var(--mark-bg)
      content: ''

  // index
@@ -97,9 +98,6 @@
    +maxWidth768()
      height: 360px

-    &:before
-      background-color: alpha($dark-black, .5)
-
  #post-info
    position: absolute
    bottom: 100px
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -66,6 +66,9 @@ beautify()
  ul > li
    list-style-type: circle
  
+  hr
+    @extend .custom-hr
+
 #article-container
  word-wrap: break-word
  overflow-wrap: break-word
@@ -144,6 +147,12 @@ beautify()
    p
      margin: 0 0 8px

+  > :last-child
+    margin-bottom: 0 !important
+
+  hr
+    margin: 20px 0
+
  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
@@ -151,9 +160,6 @@ beautify()
      &.post-content
        beautify()

-  > :last-child
-    margin-bottom: 0 !important
-
 #post
  .tag_share
    &:after
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -82,15 +82,22 @@ if hexo-config('waline.bg')
      display: none

 // Mathjax
-.mathjax-overflow
+mjx-container
  overflow-x: auto
  overflow-y: hidden
-
-span.mathjax-overflow
-  display: inline-block
-  padding: 0 2px
+  padding-bottom: 4px
  max-width: 100%
-  vertical-align: bottom
+
+  &[display]
+    display: block !important
+    min-width: auto !important
+
+  &:not([display])
+    display: inline-grid !important
+
+mjx-assistive-mml
+  right: 0
+  bottom: 0

 .aplayer
  color: $font-black
@@ -114,3 +121,15 @@ span.mathjax-overflow

 .snackbar-css
  border-radius: 5px !important
+
+.abc-music-sheet
+  margin: 0 0 20px
+  opacity: 0
+  transition: opacity .3s
+
+  &.abcjs-container
+    opacity: 1
+
+maxWidth768()
+  .fancybox__toolbar__column.is-middle
+    display: none
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -38,10 +38,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
    --scrollbar-color: lighten(#121212, 5)
    --timeline-bg: lighten(#121212, 5)
+    --zoom-bg: #121212
+    --mark-bg: alpha($dark-black, .6)

-    #web_bg:before,
-    #footer:before,
-    #page-header:before
+    #web_bg:before
      position: absolute
      width: 100%
      height: 100%
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -54,8 +54,7 @@ if hexo-config('readmode')
      display: none

    #page-header.post-bg
-      background-color: transparent
-      background-image: none !important
+      background: none !important

      &:before
        opacity: 0
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -18,7 +18,7 @@
    padding: 20px 5px

  +minWidth2000()
-    max-width: 1500px
+    max-width: 70%

  & > div:first-child:not(.recent-posts)
    @extend .cardHover
--- 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: 18em
+    height: 16.8em

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

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

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

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

      +maxWidth768()
        padding: 20px 20px 30px
@@ -57,7 +57,7 @@
      & > .article-title
        @extend .limit-more-line
        color: var(--text-highlight-color)
-        font-size: 1.72em
+        font-size: 1.55em
        line-height: 1.4
        transition: all .2s ease-in-out
        -webkit-line-clamp: 2
@@ -71,7 +71,7 @@
      & > .article-meta-wrap
        margin: 6px 0
        color: $theme-meta-color
-        font-size: 90%
+        font-size: .9em

        & > .post-meta-date
          cursor: default
--- a/source/css/_search/algolia.styl
+++ b/source/css/_search/algolia.styl
@@ -26,12 +26,15 @@
        color: $search-keyword-highlight
        font-weight: bold

+    .algolia-hits-item-title
+      font-weight: 600
+
    .algolia-hit-item-content
      margin: 0 0 8px
      word-break: break-word

    .ais-Pagination
-      margin: 20px 0 0
+      margin: 15px 0 0
      padding: 0
      text-align: center

@@ -61,22 +64,16 @@
      .ais-Pagination-item--disabled
        visibility: hidden

-    .algolia-logo
-      padding-top: 2px
-      width: 80px
-      height: 30px
-
    #algolia-hits
      > div
        overflow-y: scroll
        margin: 0 -20px
        padding: 0 22px
-
-        +minWidth768()
        max-height: calc(80vh - 240px)

        +maxWidth768()
-          height: calc(100vh - 260px)
+          max-height: none
+          height: calc(var(--search-height) - 265px)

    #algolia-info
      div
@@ -84,10 +81,7 @@

      .algolia-poweredBy
        float: right
+        vertical-align: text-top

-.apple
-  #algolia-search
-    #algolia-hits
-      > div
-        +maxWidth768()
-          height: calc(90vh - 260px)
+        svg
+          height: 1.1em
--- a/source/css/_search/index.styl
+++ b/source/css/_search/index.styl
@@ -9,6 +9,7 @@
  width: 600px
  border-radius: 8px
  background: var(--search-bg)
+  --search-height: 100vh

  +maxWidth768()
    top: 0
@@ -38,6 +39,10 @@
      &:hover
        color: $search-color
  
+  hr
+    margin: 20px auto
+    @extend .custom-hr
+
 #search-mask
  position: fixed
  top: 0
@@ -47,3 +52,9 @@
  z-index: 1000
  display: none
  background: rgba($dark-black, .6)
+
+if hexo-config('algolia_search.enable')
+  @require 'algolia'
+
+if hexo-config('local_search.enable')
+  @require 'local-search'
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -18,7 +18,7 @@
    .search-wrap
      display: none

-    .local-search__hit-item
+    .local-search-hit-item
      position: relative
      padding-left: 24px
      line-height: 1.7
@@ -55,16 +55,20 @@
        margin: 0 0 8px
        word-break: break-word

-      .search-keyword
-        color: $search-keyword-highlight
-        font-weight: bold
-
    .search-result-list
      overflow-y: overlay
      margin: 0 -20px
      padding: 0 22px
-      max-height: calc(80vh - 130px)
+      max-height: calc(80vh - 200px)

      +maxWidth768()
-        padding-bottom: 40px
-        max-height: 75vh !important
+        max-height: calc(var(--search-height) - 220px) !important
+
+    .no-result
+      & + #local-search-stats-wrap
+        display: none
+
+.search-keyword
+  background: transparent
+  color: $search-keyword-highlight
+  font-weight: bold
--- a/source/css/index.styl
+++ b/source/css/index.styl
@@ -12,10 +12,4 @@ if hexo-config('css_prefix')
@import '_mode/*'

 // search
-if hexo-config('algolia_search.enable')
-  @import '_search/index'
-  @import '_search/algolia'
-
-if hexo-config('local_search') && hexo-config('local_search.enable')
-  @import '_search/index'
-  @import '_search/local-search'
+@import '_search/index'
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -70,28 +70,17 @@ document.addEventListener('DOMContentLoaded', function () {
    const highLight = GLOBAL_CONFIG.highlight
    if (!highLight) return

-    const isHighlightCopy = highLight.highlightCopy
-    const isHighlightLang = highLight.highlightLang
+    const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight
    const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
-    const highlightHeightLimit = highLight.highlightHeightLimit
-    const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
-    const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+    const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined
+    const $figureHighlight = plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')

    if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return

-    const isPrismjs = highLight.plugin === 'prismjs'
-
-    let highlightShrinkEle = ''
-    let highlightCopyEle = ''
+    const isPrismjs = plugin === 'prismjs'
    const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
-
-    if (isHighlightShrink !== undefined) {
-      highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
-    }
-
-    if (isHighlightCopy) {
-      highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
-    }
+    const highlightShrinkEle = isHighlightShrink !== undefined ? `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>` : ''
+    const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''

    const copy = (text, ctx) => {
      if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
@@ -100,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
          btf.snackbarShow(GLOBAL_CONFIG.copy.success)
        } else {
          const prevEle = ctx.previousElementSibling
-          prevEle.innerText = GLOBAL_CONFIG.copy.success
+          prevEle.textContent = GLOBAL_CONFIG.copy.success
          prevEle.style.opacity = 1
          setTimeout(() => { prevEle.style.opacity = 0 }, 700)
        }
@@ -108,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () {
        if (GLOBAL_CONFIG.Snackbar !== undefined) {
          btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
        } else {
-          ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
+          ctx.previousElementSibling.textContent = GLOBAL_CONFIG.copy.noSupport
        }
      }
    }
@@ -119,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
      $buttonParent.classList.add('copy-true')
      const selection = window.getSelection()
      const range = document.createRange()
-      if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
-      else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
+      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+      range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
      selection.removeAllRanges()
      selection.addRange(range)
      const text = selection.toString()
@@ -175,33 +164,29 @@ document.addEventListener('DOMContentLoaded', function () {
      }
    }

-    if (isHighlightLang) {
    if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
+      $figureHighlight.forEach(item => {
+        if (highlightLang) {
+          const langName = item.getAttribute('data-language') || 'Code'
          const highlightLangEle = `<div class="code-lang">${langName}</div>`
          btf.wrap(item, 'figure', { class: 'highlight' })
          createEle(highlightLangEle, item)
+        } else {
+          btf.wrap(item, 'figure', { class: 'highlight' })
+          createEle('', item)
+        }
      })
    } else {
      $figureHighlight.forEach(function (item) {
+        if (highlightLang) {
          let langName = item.getAttribute('class').split(' ')[1]
          if (langName === 'plain' || langName === undefined) langName = 'Code'
          const highlightLangEle = `<div class="code-lang">${langName}</div>`
          createEle(highlightLangEle, item, 'hl')
-        })
-      }
        } else {
-      if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          btf.wrap(item, 'figure', { class: 'highlight' })
-          createEle('', item)
-        })
-      } else {
-        $figureHighlight.forEach(function (item) {
          createEle('', item, 'hl')
-        })
        }
+      })
    }
  }

@@ -313,6 +298,11 @@ document.addEventListener('DOMContentLoaded', function () {
  const scrollFn = function () {
    const $rightside = document.getElementById('rightside')
    const innerHeight = window.innerHeight + 56
+    let initTop = 0
+    let isChatShow = true
+    const $header = document.getElementById('page-header')
+    const isChatBtn = typeof chatBtn !== 'undefined'
+    const isShowPercent = GLOBAL_CONFIG.percent.rightside

    // 當滾動條小于 56 的時候
    if (document.body.scrollHeight <= innerHeight) {
@@ -321,33 +311,26 @@ document.addEventListener('DOMContentLoaded', function () {
    }

    // find the scroll direction
-    function scrollDirection (currentTop) {
+    const scrollDirection = currentTop => {
      const result = currentTop > initTop // true is down & false is up
      initTop = currentTop
      return result
    }

-    let initTop = 0
-    let isChatShow = true
-    const $header = document.getElementById('page-header')
-    const isChatBtnHide = typeof chatBtnHide === 'function'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
-    const isShowPercent = GLOBAL_CONFIG.percent.rightside
-
    const scrollTask = btf.throttle(() => {
      const currentTop = window.scrollY || document.documentElement.scrollTop
      const isDown = scrollDirection(currentTop)
      if (currentTop > 56) {
        if (isDown) {
          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
+          if (isChatBtn && isChatShow === true) {
+            window.chatBtn.hide()
            isChatShow = false
          }
        } else {
          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
+          if (isChatBtn && isChatShow === false) {
+            window.chatBtn.show()
            isChatShow = true
          }
        }
@@ -492,6 +475,22 @@ document.addEventListener('DOMContentLoaded', function () {
    window.addEventListener('scroll', tocScrollFn)
  }

+  const modeChangeFn = mode => {
+    if (!window.themeChange) {
+      return
+    }
+
+    const turnMode = item => window.themeChange[item](mode)
+
+    Object.keys(window.themeChange).forEach(item => {
+      if (['disqus', 'disqusjs'].includes(item)) {
+        setTimeout(() => turnMode(item), 300)
+      } else {
+        turnMode(item)
+      }
+    })
+  }
+
  /**
   * Rightside
   */
@@ -504,7 +503,7 @@ document.addEventListener('DOMContentLoaded', function () {
      newEle.className = 'fas fa-sign-out-alt exit-readmode'
      $body.appendChild(newEle)

-      function clickFn () {
+      const clickFn = () => {
        $body.classList.remove('read-mode')
        newEle.remove()
        newEle.removeEventListener('click', clickFn)
@@ -513,8 +512,8 @@ document.addEventListener('DOMContentLoaded', function () {
      newEle.addEventListener('click', clickFn)
    },
    switchDarkMode: () => { // Switch Between Light And Dark Mode
-      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-      if (nowMode === 'light') {
+      const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+      if (willChangeMode === 'dark') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
@@ -523,11 +522,7 @@ document.addEventListener('DOMContentLoaded', function () {
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
      }
-      // handle some cases
-      typeof utterancesTheme === 'function' && utterancesTheme()
-      typeof changeGiscusTheme === 'function' && changeGiscusTheme()
-      typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
-      typeof runMermaid === 'function' && window.runMermaid()
+      modeChangeFn(willChangeMode)
    },
    showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
      const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
@@ -545,15 +540,16 @@ document.addEventListener('DOMContentLoaded', function () {
    },
    hideAsideBtn: () => { // Hide aside
      const $htmlDom = document.documentElement.classList
-      $htmlDom.contains('hide-aside')
-        ? saveToLocal.set('aside-status', 'show', 2)
-        : saveToLocal.set('aside-status', 'hide', 2)
+      const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
+      saveToLocal.set('aside-status', saveStatus, 2)
      $htmlDom.toggle('hide-aside')
    },
-
    runMobileToc: () => {
      if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
      else window.mobileToc.close()
+    },
+    toggleChatDisplay: () => {
+      window.chatBtnFn()
    }
  }

@@ -578,6 +574,9 @@ document.addEventListener('DOMContentLoaded', function () {
      case 'hide-aside-btn':
        rightSideFn.hideAsideBtn()
        break
+      case 'chat-btn':
+        rightSideFn.toggleChatDisplay()
+        break
      default:
        break
    }
@@ -602,15 +601,10 @@ document.addEventListener('DOMContentLoaded', function () {
    const copyright = GLOBAL_CONFIG.copyright
    document.body.oncopy = (e) => {
      e.preventDefault()
-      let textFont; const copyFont = window.getSelection(0).toString()
+      const copyFont = window.getSelection(0).toString()
+      let textFont = copyFont
      if (copyFont.length > copyright.limitCount) {
-        textFont = copyFont + '\n' + '\n' + '\n' +
-        copyright.languages.author + '\n' +
-        copyright.languages.link + window.location.href + '\n' +
-        copyright.languages.source + '\n' +
-        copyright.languages.info
-      } else {
-        textFont = copyFont
+        textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
      }
      if (e.clipboardData) {
        return e.clipboardData.setData('text', textFont)
@@ -627,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
    const $runtimeCount = document.getElementById('runtimeshow')
    if ($runtimeCount) {
      const publishDate = $runtimeCount.getAttribute('data-publishDate')
-      $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
+      $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`
    }
  }

@@ -638,7 +632,7 @@ document.addEventListener('DOMContentLoaded', function () {
    const $lastPushDateItem = document.getElementById('last-push-date')
    if ($lastPushDateItem) {
      const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
-      $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
+      $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true)
    }
  }

@@ -771,10 +765,9 @@ document.addEventListener('DOMContentLoaded', function () {

  const relativeDate = function (selector) {
    selector.forEach(item => {
-      const $this = item
-      const timeVal = $this.getAttribute('datetime')
-      $this.innerText = btf.diffDate(timeVal, true)
-      $this.style.display = 'inline'
+      const timeVal = item.getAttribute('datetime')
+      item.textContent = btf.diffDate(timeVal, true)
+      item.style.display = 'inline'
    })
  }

@@ -789,6 +782,13 @@ document.addEventListener('DOMContentLoaded', function () {
    clickFnOfSubMenu()
    GLOBAL_CONFIG.islazyload && lazyloadImg()
    GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+
+    if (GLOBAL_CONFIG.autoDarkmode) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        if (saveToLocal.get('theme') !== undefined) return
+        e.matches ? modeChangeFn('dark') : modeChangeFn('light')
+      })
+    }
  }

  window.refreshFn = function () {
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -1,10 +1,13 @@
 window.addEventListener('load', () => {
+  const $searchMask = document.getElementById('search-mask')
+  const $searchDialog = document.querySelector('#algolia-search .search-dialog')
+
  const openSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = '100%'
    bodyStyle.overflow = 'hidden'
-    btf.animateIn(document.getElementById('search-mask'), 'to_show 0.5s')
-    btf.animateIn(document.querySelector('#algolia-search .search-dialog'), 'titleScale 0.5s')
+    btf.animateIn($searchMask, 'to_show 0.5s')
+    btf.animateIn($searchDialog, 'titleScale 0.5s')
    setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)

    // shortcut: ESC
@@ -14,22 +17,33 @@ window.addEventListener('load', () => {
        document.removeEventListener('keydown', f)
      }
    })
+
+    fixSafariHeight()
+    window.addEventListener('resize', fixSafariHeight)
  }

  const closeSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = ''
    bodyStyle.overflow = ''
-    btf.animateOut(document.querySelector('#algolia-search .search-dialog'), 'search_close .5s')
-    btf.animateOut(document.getElementById('search-mask'), 'to_hide 0.5s')
+    btf.animateOut($searchDialog, 'search_close .5s')
+    btf.animateOut($searchMask, 'to_hide 0.5s')
+    window.removeEventListener('resize', fixSafariHeight)
+  }
+
+  // fix safari
+  const fixSafariHeight = () => {
+    if (window.innerWidth < 768) {
+      $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
+    }
  }

  const searchClickFn = () => {
    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
  }

-  const searchClickFnOnce = () => {
-    document.getElementById('search-mask').addEventListener('click', closeSearch)
+  const searchFnOnce = () => {
+    $searchMask.addEventListener('click', closeSearch)
    document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
  }

@@ -102,9 +116,9 @@ window.addEventListener('load', () => {
              : ''
        return `
          <a href="${link}" class="algolia-hit-item-link">
-          ${result.title.value || 'no-title'}
-          </a>
-          <p class="algolia-hit-item-content">${content}</p>`
+          <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
+          <p class="algolia-hit-item-content">${content}</p>
+          </a>`
      },
      empty: function (data) {
        return (
@@ -150,10 +164,10 @@ window.addEventListener('load', () => {
  search.start()

  searchClickFn()
-  searchClickFnOnce()
+  searchFnOnce()

  window.addEventListener('pjax:complete', () => {
-    getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
+    !btf.isHidden($searchMask) && closeSearch()
    searchClickFn()
  })

--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -1,17 +1,311 @@
+/**
+ * Refer to hexo-generator-searchdb
+ * https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js
+ * Modified by hexo-theme-butterfly
+ */
+
+class LocalSearch {
+  constructor ({
+    path = '',
+    unescape = false,
+    top_n_per_article = 1
+  }) {
+    this.path = path
+    this.unescape = unescape
+    this.top_n_per_article = top_n_per_article
+    this.isfetched = false
+    this.datas = null
+  }
+
+  getIndexByWord (words, text, caseSensitive = false) {
+    const index = []
+    const included = new Set()
+
+    if (!caseSensitive) {
+      text = text.toLowerCase()
+    }
+    words.forEach(word => {
+      if (this.unescape) {
+        const div = document.createElement('div')
+        div.innerText = word
+        word = div.innerHTML
+      }
+      const wordLen = word.length
+      if (wordLen === 0) return
+      let startPosition = 0
+      let position = -1
+      if (!caseSensitive) {
+        word = word.toLowerCase()
+      }
+      while ((position = text.indexOf(word, startPosition)) > -1) {
+        index.push({ position, word })
+        included.add(word)
+        startPosition = position + wordLen
+      }
+    })
+    // Sort index by position of keyword
+    index.sort((left, right) => {
+      if (left.position !== right.position) {
+        return left.position - right.position
+      }
+      return right.word.length - left.word.length
+    })
+    return [index, included]
+  }
+
+  // Merge hits into slices
+  mergeIntoSlice (start, end, index) {
+    let item = index[0]
+    let { position, word } = item
+    const hits = []
+    const count = new Set()
+    while (position + word.length <= end && index.length !== 0) {
+      count.add(word)
+      hits.push({
+        position,
+        length: word.length
+      })
+      const wordEnd = position + word.length
+
+      // Move to next position of hit
+      index.shift()
+      while (index.length !== 0) {
+        item = index[0]
+        position = item.position
+        word = item.word
+        if (wordEnd > position) {
+          index.shift()
+        } else {
+          break
+        }
+      }
+    }
+    return {
+      hits,
+      start,
+      end,
+      count: count.size
+    }
+  }
+
+  // Highlight title and content
+  highlightKeyword (val, slice) {
+    let result = ''
+    let index = slice.start
+    for (const { position, length } of slice.hits) {
+      result += val.substring(index, position)
+      index = position + length
+      result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`
+    }
+    result += val.substring(index, slice.end)
+    return result
+  }
+
+  getResultItems (keywords) {
+    const resultItems = []
+    this.datas.forEach(({ title, content, url }) => {
+      // The number of different keywords included in the article.
+      const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
+      const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content)
+      const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size
+
+      // Show search results
+      const hitCount = indexOfTitle.length + indexOfContent.length
+      if (hitCount === 0) return
+
+      const slicesOfTitle = []
+      if (indexOfTitle.length !== 0) {
+        slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle))
+      }
+
+      let slicesOfContent = []
+      while (indexOfContent.length !== 0) {
+        const item = indexOfContent[0]
+        const { position } = item
+        // Cut out 120 characters. The maxlength of .search-input is 80.
+        const start = Math.max(0, position - 20)
+        const end = Math.min(content.length, position + 100)
+        slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent))
+      }
+
+      // Sort slices in content by included keywords' count and hits' count
+      slicesOfContent.sort((left, right) => {
+        if (left.count !== right.count) {
+          return right.count - left.count
+        } else if (left.hits.length !== right.hits.length) {
+          return right.hits.length - left.hits.length
+        }
+        return left.start - right.start
+      })
+
+      // Select top N slices in content
+      const upperBound = parseInt(this.top_n_per_article, 10)
+      if (upperBound >= 0) {
+        slicesOfContent = slicesOfContent.slice(0, upperBound)
+      }
+
+      let resultItem = ''
+
+      url = new URL(url, location.origin)
+      url.searchParams.append('highlight', keywords.join(' '))
+
+      if (slicesOfTitle.length !== 0) {
+        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
+      } else {
+        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
+      }
+
+      slicesOfContent.forEach(slice => {
+        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
+      })
+
+      resultItem += '</div>'
+      resultItems.push({
+        item: resultItem,
+        id: resultItems.length,
+        hitCount,
+        includedCount
+      })
+    })
+    return resultItems
+  }
+
+  fetchData () {
+    const isXml = !this.path.endsWith('json')
+    fetch(this.path)
+      .then(response => response.text())
+      .then(res => {
+        // Get the contents from search data
+        this.isfetched = true
+        this.datas = isXml
+          ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => ({
+              title: element.querySelector('title').textContent,
+              content: element.querySelector('content').textContent,
+              url: element.querySelector('url').textContent
+            }))
+          : JSON.parse(res)
+        // Only match articles with non-empty titles
+        this.datas = this.datas.filter(data => data.title).map(data => {
+          data.title = data.title.trim()
+          data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
+          data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
+          return data
+        })
+        // Remove loading animation
+        window.dispatchEvent(new Event('search:loaded'))
+      })
+  }
+
+  // Highlight by wrapping node in mark elements with the given class name
+  highlightText (node, slice, className) {
+    const val = node.nodeValue
+    let index = slice.start
+    const children = []
+    for (const { position, length } of slice.hits) {
+      const text = document.createTextNode(val.substring(index, position))
+      index = position + length
+      const mark = document.createElement('mark')
+      mark.className = className
+      mark.appendChild(document.createTextNode(val.substr(position, length)))
+      children.push(text, mark)
+    }
+    node.nodeValue = val.substring(index, slice.end)
+    children.forEach(element => {
+      node.parentNode.insertBefore(element, node)
+    })
+  }
+
+  // Highlight the search words provided in the url in the text
+  highlightSearchWords (body) {
+    const params = new URL(location.href).searchParams.get('highlight')
+    const keywords = params ? params.split(' ') : []
+    if (!keywords.length || !body) return
+    const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null)
+    const allNodes = []
+    while (walk.nextNode()) {
+      if (!walk.currentNode.parentNode.matches('button, select, textarea, .mermaid')) allNodes.push(walk.currentNode)
+    }
+    allNodes.forEach(node => {
+      const [indexOfNode] = this.getIndexByWord(keywords, node.nodeValue)
+      if (!indexOfNode.length) return
+      const slice = this.mergeIntoSlice(0, node.nodeValue.length, indexOfNode)
+      this.highlightText(node, slice, 'search-keyword')
+    })
+  }
+}
+
 window.addEventListener('load', () => {
+// Search
+  const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
+  const localSearch = new LocalSearch({
+    path,
+    top_n_per_article,
+    unescape
+  })
+
+  const input = document.querySelector('#local-search-input input')
+  const statsItem = document.getElementById('local-search-stats-wrap')
+  const $loadingStatus = document.getElementById('loading-status')
+
+  const inputEventFunction = () => {
+    if (!localSearch.isfetched) return
+    const searchText = input.value.trim().toLowerCase()
+    if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+    const keywords = searchText.split(/[-\s]+/)
+    const container = document.getElementById('local-search-results')
+    let resultItems = []
+    if (searchText.length > 0) {
+    // Perform local searching
+      resultItems = localSearch.getResultItems(keywords)
+    }
+    if (keywords.length === 1 && keywords[0] === '') {
+      container.classList.add('no-result')
+      container.textContent = ''
+    } else if (resultItems.length === 0) {
+      container.textContent = ''
+      statsItem.innerHTML = `<div class="search-result-stats">${languages.hits_empty.replace(/\$\{query}/, searchText)}</div>`
+    } else {
+      resultItems.sort((left, right) => {
+        if (left.includedCount !== right.includedCount) {
+          return right.includedCount - left.includedCount
+        } else if (left.hitCount !== right.hitCount) {
+          return right.hitCount - left.hitCount
+        }
+        return right.id - left.id
+      })
+
+      const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
+
+      container.classList.remove('no-result')
+      container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
+      statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
+      window.pjax && window.pjax.refresh(container)
+    }
+
+    $loadingStatus.textContent = ''
+  }
+
  let loadFlag = false
-  let dataObj = []
  const $searchMask = document.getElementById('search-mask')
+  const $searchDialog = document.querySelector('#local-search .search-dialog')
+
+  // fix safari
+  const fixSafariHeight = () => {
+    if (window.innerWidth < 768) {
+      $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
+    }
+  }

  const openSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = '100%'
    bodyStyle.overflow = 'hidden'
    btf.animateIn($searchMask, 'to_show 0.5s')
-    btf.animateIn(document.querySelector('#local-search .search-dialog'), 'titleScale 0.5s')
-    setTimeout(() => { document.querySelector('#local-search-input input').focus() }, 100)
+    btf.animateIn($searchDialog, 'titleScale 0.5s')
+    setTimeout(() => { input.focus() }, 300)
    if (!loadFlag) {
-      search()
+      !localSearch.isfetched && localSearch.fetchData()
+      input.addEventListener('input', inputEventFunction)
      loadFlag = true
    }
    // shortcut: ESC
@@ -21,170 +315,46 @@ window.addEventListener('load', () => {
        document.removeEventListener('keydown', f)
      }
    })
+
+    fixSafariHeight()
+    window.addEventListener('resize', fixSafariHeight)
  }

  const closeSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = ''
    bodyStyle.overflow = ''
-    btf.animateOut(document.querySelector('#local-search .search-dialog'), 'search_close .5s')
+    btf.animateOut($searchDialog, 'search_close .5s')
    btf.animateOut($searchMask, 'to_hide 0.5s')
+    window.removeEventListener('resize', fixSafariHeight)
  }

  const searchClickFn = () => {
    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
  }

-  const searchClickFnOnce = () => {
+  const searchFnOnce = () => {
    document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
    $searchMask.addEventListener('click', closeSearch)
-    if (GLOBAL_CONFIG.localSearch.preload) dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
+    if (GLOBAL_CONFIG.localSearch.preload) {
+      localSearch.fetchData()
+    }
+    localSearch.highlightSearchWords(document.getElementById('article-container'))
  }

-  // check url is json or not
-  const isJson = url => {
-    const reg = /\.json$/
-    return reg.test(url)
-  }
-
-  const fetchData = async (path) => {
-    let data = []
-    const response = await fetch(path)
-    if (isJson(path)) {
-      data = await response.json()
-    } else {
-      const res = await response.text()
-      const t = await new window.DOMParser().parseFromString(res, 'text/xml')
-      const a = await t
-      data = [...a.querySelectorAll('entry')].map(item => {
-        return {
-          title: item.querySelector('title').textContent,
-          content: item.querySelector('content') && item.querySelector('content').textContent,
-          url: item.querySelector('url').textContent
-        }
-      })
-    }
-    if (response.ok) {
+  window.addEventListener('search:loaded', () => {
    const $loadDataItem = document.getElementById('loading-database')
    $loadDataItem.nextElementSibling.style.display = 'block'
    $loadDataItem.remove()
-    }
-    return data
-  }
-
-  const search = () => {
-    if (!GLOBAL_CONFIG.localSearch.preload) {
-      dataObj = fetchData(GLOBAL_CONFIG.localSearch.path)
-    }
-
-    const $input = document.querySelector('#local-search-input input')
-    const $resultContent = document.getElementById('local-search-results')
-    const $loadingStatus = document.getElementById('loading-status')
-
-    $input.addEventListener('input', function () {
-      const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
-      if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
-      else {
-        $resultContent.innerHTML = ''
-        return
-      }
-
-      let str = '<div class="search-result-list">'
-      if (keywords.length <= 0) return
-      let count = 0
-      // perform local searching
-      dataObj.then(data => {
-        data.forEach(data => {
-          let isMatch = true
-          let dataTitle = data.title ? data.title.trim().toLowerCase() : ''
-          const dataContent = data.content ? 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 articles with not empty titles and contents
-          if (dataTitle !== '' || dataContent !== '') {
-            keywords.forEach((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 {
-            isMatch = false
-          }
-
-          // show search results
-          if (isMatch) {
-            if (firstOccur >= 0) {
-              // cut out 130 characters
-              // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30
-              // let end = firstOccur + 50 > dataContent.length ? dataContent.length : firstOccur + 50
-              let start = firstOccur - 30
-              let end = firstOccur + 100
-              let pre = ''
-              let post = ''
-
-              if (start < 0) {
-                start = 0
-              }
-
-              if (start === 0) {
-                end = 100
-              } else {
-                pre = '...'
-              }
-
-              if (end > dataContent.length) {
-                end = dataContent.length
-              } else {
-                post = '...'
-              }
-
-              let matchContent = dataContent.substring(start, end)
-
-              // highlight all keywords
-              keywords.forEach(keyword => {
-                matchContent = matchContent.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
-                dataTitle = dataTitle.replaceAll(keyword, '<span class="search-keyword">' + keyword + '</span>')
-              })
-
-              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '"><span class="search-result-title">' + dataTitle + '</span>'
-              count += 1
-
-              if (dataContent !== '') {
-                str += '<p class="search-result">' + pre + matchContent + post + '</p>'
-              }
-            }
-            str += '</a></div>'
-          }
-        })
-        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
-        if (keywords[0] !== '') $loadingStatus.innerHTML = ''
-        window.pjax && window.pjax.refresh($resultContent)
-      })
-    })
-  }

  searchClickFn()
-  searchClickFnOnce()
+  searchFnOnce()

  // pjax
  window.addEventListener('pjax:complete', () => {
    !btf.isHidden($searchMask) && closeSearch()
+    localSearch.highlightSearchWords(document.getElementById('article-container'))
    searchClickFn()
  })
 })
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -1,10 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const translate = GLOBAL_CONFIG.translate
+  const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate
  const snackbarData = GLOBAL_CONFIG.Snackbar
-  const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
-  const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
-  const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
-  const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
  let currentEncoding = defaultEncoding
  const targetEncodingCookie = 'translate-chn-cht'
  let targetEncoding =
@@ -12,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function () {
      ? defaultEncoding
      : Number(saveToLocal.get('translate-chn-cht'))
  let translateButtonObject
-  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+  const isSnackbar = snackbarData !== undefined

  function setLang () {
    document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN'
@@ -58,12 +54,12 @@ document.addEventListener('DOMContentLoaded', function () {
    if (targetEncoding === 1) {
      currentEncoding = 1
      targetEncoding = 2
-      translateButtonObject.innerHTML = msgToTraditionalChinese
+      translateButtonObject.textContent = msgToTraditionalChinese
      isSnackbar && btf.snackbarShow(snackbarData.cht_to_chs)
    } else if (targetEncoding === 2) {
      currentEncoding = 2
      targetEncoding = 1
-      translateButtonObject.innerHTML = msgToSimplifiedChinese
+      translateButtonObject.textContent = msgToSimplifiedChinese
      isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht)
    }
    saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
@@ -104,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function () {
    translateButtonObject = document.getElementById('translateLink')
    if (translateButtonObject) {
      if (currentEncoding !== targetEncoding) {
-        translateButtonObject.innerHTML =
+        translateButtonObject.textContent =
          targetEncoding === 1
            ? msgToSimplifiedChinese
            : msgToTraditionalChinese
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -79,31 +79,21 @@ const btf = {
    const hour = minute * 60
    const day = hour * 24
    const month = day * 30
+    const { dateSuffix } = GLOBAL_CONFIG
+
+    if (!more) return parseInt(dateDiff / day)

-    let result
-    if (more) {
    const monthCount = dateDiff / month
    const dayCount = dateDiff / day
    const hourCount = dateDiff / hour
    const minuteCount = dateDiff / minute

-      if (monthCount > 12) {
-        result = datePost.toISOString().slice(0, 10)
-      } else if (monthCount >= 1) {
-        result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
-      } else if (dayCount >= 1) {
-        result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
-      } else if (hourCount >= 1) {
-        result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
-      } else if (minuteCount >= 1) {
-        result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
-      } else {
-        result = GLOBAL_CONFIG.date_suffix.just
-      }
-    } else {
-      result = parseInt(dateDiff / day)
-    }
-    return result
+    if (monthCount > 12) return datePost.toISOString().slice(0, 10)
+    if (monthCount >= 1) return `${parseInt(monthCount)} ${dateSuffix.month}`
+    if (dayCount >= 1) return `${parseInt(dayCount)} ${dateSuffix.day}`
+    if (hourCount >= 1) return `${parseInt(hourCount)} ${dateSuffix.hour}`
+    if (minuteCount >= 1) return `${parseInt(minuteCount)} ${dateSuffix.min}`
+    return dateSuffix.just
  },

  loadComment: (dom, callback) => {
@@ -196,10 +186,9 @@ const btf = {
  },

  unwrap: el => {
-    const elParentNode = el.parentNode
-    if (elParentNode !== document.body) {
-      elParentNode.parentNode.insertBefore(el, elParentNode)
-      elParentNode.parentNode.removeChild(elParentNode)
+    const parent = el.parentNode
+    if (parent && parent !== document.body) {
+      parent.replaceChild(el, parent)
    }
  },

@@ -221,13 +210,7 @@ const btf = {
    const service = GLOBAL_CONFIG.lightbox

    if (service === 'mediumZoom') {
-      const zoom = mediumZoom(ele)
-      zoom.on('open', e => {
-        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
-        zoom.update({
-          background: photoBg
-        })
-      })
+      mediumZoom(ele, { background: 'var(--zoom-bg)' })
    }

    if (service === 'fancybox') {
@@ -243,7 +226,30 @@ const btf = {
        Fancybox.bind('[data-fancybox]', {
          Hash: false,
          Thumbs: {
-            autoStart: false
+            showOnStart: false
+          },
+          Images: {
+            Panzoom: {
+              maxScale: 4
+            }
+          },
+          Carousel: {
+            transition: 'slide'
+          },
+          Toolbar: {
+            display: {
+              left: ['infobar'],
+              middle: [
+                'zoomIn',
+                'zoomOut',
+                'toggle1to1',
+                'rotateCCW',
+                'rotateCW',
+                'flipX',
+                'flipY'
+              ],
+              right: ['slideshow', 'thumbs', 'close']
+            }
          }
        })
        window.fancyboxRun = true
@@ -289,5 +295,13 @@ const btf = {
    const scrollPercentRounded = Math.round(scrollPercent * 100)
    const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
    return percentage
+  },
+
+  addModeChange: (name, fn) => {
+    if (window.themeChange && window.themeChange[name]) return
+    window.themeChange = {
+      ...window.themeChange,
+      [name]: fn
+    }
  }
 }