diff --git a/README.md b/README.md
index 8b7b6e3..284ff41 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,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
diff --git a/README_CN.md b/README_CN.md
index 1dcfc96..f67c2e3 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -81,7 +81,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）
diff --git a/_config.yml b/_config.yml
index dea86a3..aad06ef 100644
--- 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
 # --------------------------------------
 
@@ -540,6 +651,14 @@ 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 +687,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 +768,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 +785,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 +915,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 +929,8 @@ CDN:
     # translate:
     # local_search:
     # algolia_js:
-    # algolia_search_v4:
-    # instantsearch_v4:
+    # algolia_search:
+    # instantsearch:
     # docsearch_js:
     # docsearch_css:
     # pjax:
@@ -935,6 +943,7 @@ CDN:
     # twikoo:
     # waline_js:
     # waline_css:
+    # giscus:
     # sharejs:
     # sharejs_css:
     # mathjax:
@@ -948,8 +957,8 @@ CDN:
     # instantpage:
     # typed:
     # pangu:
-    # fancybox_css_v4:
-    # fancybox_v4:
+    # fancybox_css:
+    # fancybox:
     # medium_zoom:
     # snackbar_css:
     # snackbar:
@@ -957,7 +966,7 @@ CDN:
     # fireworks:
     # click_heart:
     # ClickShowText:
-    # fontawesomeV6:
+    # fontawesome:
     # flickr_justified_gallery_js:
     # flickr_justified_gallery_css:
     # aplayer_css:
@@ -969,3 +978,4 @@ CDN:
     # artalk_js:
     # artalk_css:
     # busuanzi:
+    # abcjs_basic_js:
diff --git a/languages/default.yml b/languages/default.yml
index a491719..fea921e 100644
--- 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
diff --git a/languages/en.yml b/languages/en.yml
index 49120c2..1cc937c 100644
--- 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
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 9c2919a..94f85cd 100644
--- 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: 上一篇
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index 86623c0..9801d16 100644
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -46,7 +46,8 @@ search:
   local_search:
     input_placeholder: 搜尋文章
     hits_empty: '找不到您查詢的內容：${query}'
-
+    hits_stats: '共找到 ${hits} 篇文章'
+    
 pagination:
   prev: 上一篇
   next: 下一篇
diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug
index 09a7898..f37d860 100644
--- 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})
\ No newline at end of file
diff --git a/layout/includes/head.pug b/layout/includes/head.pug
index 0089ad2..4d30c4a 100644
--- 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})
@@ -66,4 +66,4 @@ include ./head/noscript.pug
 
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 
-!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
\ No newline at end of file
+!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug
index ed81219..19d1007 100644
--- 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")}',
diff --git a/layout/includes/header/social.pug b/layout/includes/header/social.pug
index 80adfe9..b7b586e 100644
--- 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)
\ No newline at end of file
+    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)
\ No newline at end of file
diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index 6055d1e..dde47c5 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -44,5 +44,4 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       include ./404.pug
 
     include ./rightside.pug
-    include ./additional-js.pug
-    !=partial('includes/third-party/search/index', {}, {cache: true})
\ No newline at end of file
+    include ./additional-js.pug
\ No newline at end of file
diff --git a/layout/includes/loading/fullpage-loading.pug b/layout/includes/loading/fullpage-loading.pug
index 75a2041..5ca3d0d 100644
--- a/layout/includes/loading/fullpage-loading.pug
+++ b/layout/includes/loading/fullpage-loading.pug
@@ -11,15 +11,16 @@
 script.
   const preloader = {
     endLoading: () => {
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = '';
       document.getElementById('loading-box').classList.add("loaded")
     },
     initLoading: () => {
-      document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
       document.getElementById('loading-box').classList.remove("loaded")
-
     }
   }
+
+  preloader.initLoading()
   window.addEventListener('load',()=> { preloader.endLoading() })
 
   if (!{theme.pjax && theme.pjax.enable}) {
diff --git a/layout/includes/loading/pace.pug b/layout/includes/loading/pace.pug
index e6813ba..7abd617 100644
--- 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))
\ No newline at end of file
diff --git a/layout/includes/third-party/abcjs/abcjs.pug b/layout/includes/third-party/abcjs/abcjs.pug
new file mode 100644
index 0000000..dc02aea
--- /dev/null
+++ 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)
+  })()
\ No newline at end of file
diff --git a/layout/includes/third-party/abcjs/index.pug b/layout/includes/third-party/abcjs/index.pug
new file mode 100644
index 0000000..12d1478
--- /dev/null
+++ b/layout/includes/third-party/abcjs/index.pug
@@ -0,0 +1,6 @@
+if theme.abcjs.enable
+  if theme.abcjs.per_page
+    if is_post() || is_page()
+      include ./abcjs.pug
+  else if page.abcjs
+    include ./abcjs.pug
diff --git a/layout/includes/third-party/card-post-count/fb.pug b/layout/includes/third-party/card-post-count/fb.pug
index eee1974..75d6b4a 100644
--- 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.
diff --git a/layout/includes/third-party/chat/gitter.pug b/layout/includes/third-party/chat/gitter.pug
deleted file mode 100644
index 46f979a..0000000
--- a/layout/includes/third-party/chat/gitter.pug
+++ /dev/null
@@ -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)
diff --git a/layout/includes/third-party/chat/index.pug b/layout/includes/third-party/chat/index.pug
index dc6d0f8..4b6bda6 100644
--- 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
diff --git a/layout/includes/third-party/chat/messenger.pug b/layout/includes/third-party/chat/messenger.pug
index e7798ee..e5c9d88 100644
--- a/layout/includes/third-party/chat/messenger.pug
+++ b/layout/includes/third-party/chat/messenger.pug
@@ -9,7 +9,7 @@ script.
   window.fbAsyncInit = function() {
     FB.init({
       xfbml: true,
-      version: 'v15.0'
+      version: 'v16.0'
     });
   };
 
diff --git a/layout/includes/third-party/comments/facebook_comments.pug b/layout/includes/third-party/comments/facebook_comments.pug
index 5d4d399..7172687 100644
--- 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.
diff --git a/layout/includes/third-party/comments/giscus.pug b/layout/includes/third-party/comments/giscus.pug
index df19568..cad50ae 100644
--- 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 () {
+    return document.documentElement.getAttribute('data-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(),
       'data-reactions-enabled': '1',
       crossorigin: 'anonymous',
       async: true
@@ -24,17 +28,15 @@ script.
   }
 
   function changeGiscusTheme () {
-    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
-
     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()
       }
     });
   }
diff --git a/layout/includes/third-party/search/algolia.pug b/layout/includes/third-party/search/algolia.pug
index bf5d019..b1f3c3d 100644
--- 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))
\ No newline at end of file
diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug
index c3a4777..0c7537b 100644
--- 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))
\ No newline at end of file
diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug
index ed09f39..49296b7 100644
--- 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'})
diff --git a/package.json b/package.json
index f35e719..f1f1763 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
diff --git a/plugins.yml b/plugins.yml
index 70d5687..e1ce2f8 100644
--- 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.0
+instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.51.0
+  version: 4.54.0
 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.14
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.14.7
+  version: 2.14.9
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.14.7
+  version: 2.14.9
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -73,7 +73,7 @@ katex_copytex:
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.4.0
+  version: 9.4.3
 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.15
 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.15
   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.15
   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.4
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.4.4
+  version: 2.5.4
 pace_js:
   name: pace-js
   other_name: pace
@@ -208,3 +208,7 @@ docsearch_css:
   other_name: docsearch-css
   file: dist/style.css
   version: 3.3.3
+abcjs_basic_js:
+  name: abcjs
+  file: dist/abcjs-basic-min.js
+  version: 6.2.0
diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js
index 9c1b2c1..708420c 100644
--- a/scripts/events/cdn.js
+++ b/scripts/events/cdn.js
@@ -41,7 +41,7 @@ hexo.extend.filter.register('before_generate', () => {
     }
   }
 
-  const minFile = (file) => {
+  const minFile = file => {
     return file.replace(/(?<!\.min)\.(js|css)$/g, ext => '.min' + ext)
   }
 
@@ -54,7 +54,7 @@ hexo.extend.filter.register('before_generate', () => {
       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 verType = CDN.version ? (type === 'local' ? `?v=${version}` : `@${version}`) : ''
 
       const value = {
         version,
@@ -67,7 +67,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 +77,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 +90,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)
+  )
 })
diff --git a/scripts/filters/random_cover.js b/scripts/filters/random_cover.js
index ffb61e4..4ecedce 100644
--- 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
 
diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js
index 25a65c8..e4ad6fb 100644
--- 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()
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index eaccb0f..22622c3 100644
--- 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
   }
diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
index adf46f3..632c514 100644
--- 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}">
diff --git a/scripts/tag/score.js b/scripts/tag/score.js
new file mode 100644
index 0000000..3157245
--- /dev/null
+++ 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});
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 99facc1..981bc12 100644
--- 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
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
index 4915ee6..a6c59cc 100644
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -144,15 +144,26 @@ 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()
     else if hexo-config('beautify.field') == 'post'
       &.post-content
         beautify()
+  else
+    hr
+      margin: 20px 0
+      border: 1px inset
+      width 100%
 
-  > :last-child
-    margin-bottom: 0 !important
+      &:before
+        content: none
 
 #post
   .tag_share
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index bc2bd51..1ea63e9 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -113,4 +113,16 @@ span.mathjax-overflow
             content: none
 
 .snackbar-css
-  border-radius: 5px !important
\ No newline at end of file
+  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
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index 3356d17..0be8e49 100644
--- 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: 1700px
 
   & > div:first-child:not(.recent-posts)
     @extend .cardHover
diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl
index 31ba9df..b2f4067 100644
--- 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)
+        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
\ No newline at end of file
diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl
index bc5c5b1..93d6ad8 100644
--- 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
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index 69e8c0d..f5c5fa9 100644
--- 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
\ No newline at end of file
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index 338c617..9ac9f94 100644
--- 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()
   })
 
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 6a495f4..73dfe6b 100644
--- 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.innerHTML = ''
+  }
+
   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)
-  }
-
-  // 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 (GLOBAL_CONFIG.localSearch.preload) {
+      localSearch.fetchData()
     }
-    if (response.ok) {
-      const $loadDataItem = document.getElementById('loading-database')
-      $loadDataItem.nextElementSibling.style.display = 'block'
-      $loadDataItem.remove()
-    }
-    return data
+    localSearch.highlightSearchWords(document.getElementById('article-container'))
   }
 
-  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)
-      })
-    })
-  }
+  window.addEventListener('search:loaded', () => {
+    const $loadDataItem = document.getElementById('loading-database')
+    $loadDataItem.nextElementSibling.style.display = 'block'
+    $loadDataItem.remove()
+  })
 
   searchClickFn()
-  searchClickFnOnce()
+  searchFnOnce()
 
   // pjax
   window.addEventListener('pjax:complete', () => {
     !btf.isHidden($searchMask) && closeSearch()
+    localSearch.highlightSearchWords(document.getElementById('article-container'))
     searchClickFn()
   })
 })
diff --git a/source/js/utils.js b/source/js/utils.js
index 1267b2d..b5df288 100644
--- 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
 
-    let result
-    if (more) {
-      const monthCount = dateDiff / month
-      const dayCount = dateDiff / day
-      const hourCount = dateDiff / hour
-      const minuteCount = dateDiff / minute
+    if (!more) return parseInt(dateDiff / day)
 
-      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
+    const monthCount = dateDiff / month
+    const dayCount = dateDiff / day
+    const hourCount = dateDiff / hour
+    const minuteCount = dateDiff / minute
+
+    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) => {
@@ -243,7 +233,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