From b146025c6c0d2e2c628515589fb45e2162f32080 Mon Sep 17 00:00:00 2001
From: bisnsh <bishsh2006@outlook.com>
Date: Sat, 4 Oct 2025 16:14:27 +0800
Subject: [PATCH] source

---
 .../source/css/_global/function.styl          |  68 +++
 .../butterfly/source/css/_global/index.styl   |  59 ++
 .../butterfly/source/css/_layout/aside.styl   |  14 +-
 .../butterfly/source/css/_layout/loading.styl | 128 ++--
 .../butterfly/source/css/_layout/reward.styl  |   5 +-
 .../source/css/_layout/rightside.styl         |  49 +-
 .../butterfly/source/css/_layout/sidebar.styl |  53 +-
 .../butterfly/source/css/_mode/darkmode.styl  |  64 +-
 themes/butterfly/source/css/_page/common.styl |   2 +-
 .../butterfly/source/css/_page/shuoshuo.styl  | 107 ++++
 themes/butterfly/source/css/_page/tags.styl   |  76 ++-
 .../butterfly/source/css/_search/algolia.styl |  86 +--
 .../butterfly/source/css/_search/index.styl   | 194 +++++-
 .../source/css/_search/local-search.styl      |  65 +--
 themes/butterfly/source/css/_tags/button.styl |  35 +-
 themes/butterfly/source/css/_tags/hide.styl   |   1 +
 themes/butterfly/source/css/_tags/label.styl  |   6 +-
 themes/butterfly/source/css/_tags/note.styl   |  39 +-
 themes/butterfly/source/css/var.styl          |  51 +-
 themes/butterfly/source/js/main.js            |  24 +-
 themes/butterfly/source/js/search/algolia.js  | 550 +++++++++++++++---
 .../source/js/search/local-search.js          | 251 +++++++-
 themes/butterfly/source/js/tw_cn.js           |   8 +-
 themes/butterfly/source/js/utils.js           |   4 +-
 24 files changed, 1531 insertions(+), 408 deletions(-)

diff --git a/themes/butterfly/source/css/_global/function.styl b/themes/butterfly/source/css/_global/function.styl
index dc741b9..a38e1e8 100644
--- a/themes/butterfly/source/css/_global/function.styl
+++ b/themes/butterfly/source/css/_global/function.styl
@@ -181,6 +181,60 @@ if hexo-config('avatar.effect') == true
 .reward-main
   animation: donate_effcet .3s .1s ease both
 
+.btn-effects
+  position: relative
+  overflow: hidden
+  transition: all .3s cubic-bezier(.4, 0, .2, 1)
+  transform: translateZ(0)
+
+  &:hover
+    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
+    text-decoration: none
+    transform: translateY(-1px) scale(1.02)
+
+  &:active
+    transition-duration: .1s
+    transform: translateY(0) scale(.98)
+
+  i
+    display: inline-block
+    vertical-align: middle
+    transition: all .3s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover i
+    animation: buttonIconBounce .6s ease-in-out
+
+  i + span
+    margin-left: 6px
+    vertical-align: middle
+    transition: margin-left .3s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover i + span
+    margin-left: 8px
+
+  &::before
+    position: absolute
+    top: 0
+    left: -100%
+    z-index: 1
+    width: 100%
+    height: 100%
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent)
+    content: ''
+    transition: left .5s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover::before
+    left: 100%
+
+  & > *
+    position: relative
+    z-index: 2
+
+.btn-effects-large
+  &:hover
+    box-shadow: 0 6px 16px rgba(0, 0, 0, .2)
+    transform: translateY(-2px) scale(1.03)
+
 @keyframes scroll-down-effect
   0%
     opacity: .4
@@ -278,3 +332,17 @@ if hexo-config('avatar.effect') == true
 
   100%
     transform: translateX(0)
+
+@keyframes buttonIconBounce
+  0%,
+  100%
+    transform: translateY(0) scale(1)
+
+  25%
+    transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
+
+  50%
+    transform: translateY(0) scale(1.05) rotateZ(0)
+
+  75%
+    transform: translateY(-1px) scale(1.02) rotateZ(2deg)
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_global/index.styl b/themes/butterfly/source/css/_global/index.styl
index b48c279..c57cbb9 100644
--- a/themes/butterfly/source/css/_global/index.styl
+++ b/themes/butterfly/source/css/_global/index.styl
@@ -39,6 +39,65 @@
   --zoom-bg: #fff
   --mark-bg: alpha($dark-black, .3)
 
+// tags plugin
+:root
+  --btn-color: $btn-color
+  --btn-default-color: $btn-default-color
+  --tags-blue-color: $tagsP-blue-color
+  --tags-blue-color-lighten: lighten($tagsP-blue-color, 85%)
+  --tags-pink-color: $tagsP-pink-color
+  --tags-pink-color-lighten: lighten($tagsP-pink-color, 85%)
+  --tags-red-color: $tagsP-red-color
+  --tags-red-color-lighten: lighten($tagsP-red-color, 85%)
+  --tags-orange-color: $tagsP-orange-color
+  --tags-orange-color-lighten: lighten($tagsP-orange-color, 85%)
+  --tags-purple-color: $tagsP-purple-color
+  --tags-purple-color-lighten: lighten($tagsP-purple-color, 85%)
+  --tags-green-color: $tagsP-green-color
+  --tags-green-color-lighten: lighten($tagsP-green-color, 85%)
+  --note-default-border: $note-default-border
+  --note-default-bg: $note-default-bg
+  --note-default-text: $note-default-text
+  --note-modern-default-border: $note-modern-default-border
+  --note-modern-default-bg: $note-modern-default-bg
+  --note-modern-default-text: $note-modern-default-text
+  --note-modern-default-hover: $note-modern-default-hover
+  --note-primary-border: $note-primary-border
+  --note-primary-bg: $note-primary-bg
+  --note-primary-text: $note-primary-text
+  --note-modern-primary-border: $note-modern-primary-border
+  --note-modern-primary-bg: $note-modern-primary-bg
+  --note-modern-primary-text: $note-modern-primary-text
+  --note-modern-primary-hover: $note-modern-primary-hover
+  --note-info-border: $note-info-border
+  --note-info-bg: $note-info-bg
+  --note-info-text: $note-info-text
+  --note-modern-info-border: $note-modern-info-border
+  --note-modern-info-bg: $note-modern-info-bg
+  --note-modern-info-text: $note-modern-info-text
+  --note-modern-info-hover: $note-modern-info-hover
+  --note-success-border: $note-success-border
+  --note-success-bg: $note-success-bg
+  --note-success-text: $note-success-text
+  --note-modern-success-border: $note-modern-success-border
+  --note-modern-success-bg: $note-modern-success-bg
+  --note-modern-success-text: $note-modern-success-text
+  --note-modern-success-hover: $note-modern-success-hover
+  --note-warning-border: $note-warning-border
+  --note-warning-bg: $note-warning-bg
+  --note-warning-text: $note-warning-text
+  --note-modern-warning-border: $note-modern-warning-border
+  --note-modern-warning-bg: $note-modern-warning-bg
+  --note-modern-warning-text: $note-modern-warning-text
+  --note-modern-warning-hover: $note-modern-warning-hover
+  --note-danger-border: $note-danger-border
+  --note-danger-bg: $note-danger-bg
+  --note-danger-text: $note-danger-text
+  --note-modern-danger-border: $note-modern-danger-border
+  --note-modern-danger-bg: $note-modern-danger-bg
+  --note-modern-danger-text: $note-modern-danger-text
+  --note-modern-danger-hover: $note-modern-danger-hover
+
 body
   position: relative
   overflow-y: scroll
diff --git a/themes/butterfly/source/css/_layout/aside.styl b/themes/butterfly/source/css/_layout/aside.styl
index edcbe9a..82a3b6f 100644
--- a/themes/butterfly/source/css/_layout/aside.styl
+++ b/themes/butterfly/source/css/_layout/aside.styl
@@ -60,6 +60,7 @@
       text-align: center
       line-height: 2.4
       addBorderRadius(7)
+      @extend .btn-effects
 
       &:hover
         background-color: var(--btn-hover-color)
@@ -180,6 +181,11 @@
     .card-category-list
       &.child
         padding: 0 0 0 16px
+        overflow: hidden
+        max-height: 0
+        opacity: 0
+        visibility: hidden
+        transition: max-height .3s ease, opacity .3s ease
 
       > .parent
         > a
@@ -188,7 +194,9 @@
               transform: rotate(-90deg)
 
             & + .child
-              display: block
+              max-height: 1000px
+              opacity: 1
+              visibility: visible
 
           .card-category-list
             &-name
@@ -207,7 +215,9 @@
 
         if hexo-config('aside.card_categories.expand') == false
           > .child
-            display: none
+            max-height: 0
+            opacity: 0
+            visibility: hidden
 
   .card-webinfo
     .webinfo
diff --git a/themes/butterfly/source/css/_layout/loading.styl b/themes/butterfly/source/css/_layout/loading.styl
index 8670133..9f63e15 100644
--- a/themes/butterfly/source/css/_layout/loading.styl
+++ b/themes/butterfly/source/css/_layout/loading.styl
@@ -1,45 +1,95 @@
-if hexo-config('preloader')
+if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
   .loading-bg
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background: #f0f0f2;
-    z-index: 1001;
-    opacity: 1;
-    transition: .3s;
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: var(--preloader-bg)
 
   #loading-box
-    .loading-img
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      margin: auto;
-      border: 4px solid #f0f0f2;
-      animation-duration: .3s;
-      animation-name: loadingAction;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    .loading-image-dot
-      width: 30px;
-      height: 30px;
-      background: #6bdf8f;
-      position: absolute;
-      border-radius: 50%;
-      border: 6px solid #fff;
-      top: 50%;
-      left: 50%;
-      transform: translate(18px, 24px);
+    .loading-left-bg
+      @extend .loading-bg
+
+    .loading-right-bg
+      @extend .loading-bg
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: var(--preloader-color)
+        font-size: 16px
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: var(--preloader-bg)
+
     &.loaded
-      .loading-bg
-        opacity: 0;
-        z-index: -1000;
+      .loading-left-bg
+        transition: all .5s
+        transform: translate(-100%, 0)
 
-  @keyframes loadingAction
-    0% {
-        opacity: 1;
-    }
+      .loading-right-bg
+        transition: all .5s
+        transform: translate(100%, 0)
 
-    100% {
-        opacity: .4;
-    }
+      .spinner-box
+        display: none
+
+  @keyframes configure-clockwise
+    0%
+      transform: rotate(0)
+
+    25%
+      transform: rotate(90deg)
+
+    50%
+      transform: rotate(180deg)
+
+    75%
+      transform: rotate(270deg)
+
+    100%
+      transform: rotate(360deg)
+
+  @keyframes configure-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)
diff --git a/themes/butterfly/source/css/_layout/reward.styl b/themes/butterfly/source/css/_layout/reward.styl
index 5cf3a62..a09b715 100644
--- a/themes/butterfly/source/css/_layout/reward.styl
+++ b/themes/butterfly/source/css/_layout/reward.styl
@@ -15,9 +15,12 @@
     color: var(--btn-color)
     cursor: pointer
     addBorderRadius()
+    @extend .btn-effects
+    @extend .btn-effects-large
 
     i
       margin-right: 5px
+      vertical-align: baseline
 
   &:hover
     .reward-button
@@ -28,7 +31,7 @@
 
   .reward-main
     position: absolute
-    bottom: 40px
+    bottom: 50px
     left: 0
     z-index: 100
     display: none
diff --git a/themes/butterfly/source/css/_layout/rightside.styl b/themes/butterfly/source/css/_layout/rightside.styl
index 45c9726..881a4f7 100644
--- a/themes/butterfly/source/css/_layout/rightside.styl
+++ b/themes/butterfly/source/css/_layout/rightside.styl
@@ -38,9 +38,13 @@
       font-size: 16px
       line-height: w
       addBorderRadius(5)
+      @extend .btn-effects
 
       &:hover
         background-color: var(--btn-hover-color)
+      
+      i
+        vertical-align: baseline
 
   #mobile-toc-button
     display: none
@@ -54,19 +58,52 @@
 
   if hexo-config('rightside_scroll_percent')
     #go-up
+      position: relative
+
       .scroll-percent
+        position: absolute
+        top: 0
+        left: 0
         display: none
+        width: 100%
+        height: 100%
+        opacity: 0
+        transition: all .4s cubic-bezier(.4, 0, .2, 1)
+        transform: scale(.8)
+
+      i
+        position: relative
+        z-index: 1
+        width: 100%
+        opacity: 1
+        transition: all .4s cubic-bezier(.4, 0, .2, 1)
+        transform: scale(1)
 
       &.show-percent
         .scroll-percent
           display: block
+          opacity: 1
+          transform: scale(1)
+          animation: fadeInScale .4s ease-out
 
-          & + i
-            display: none
+        i
+          opacity: 0
+          transform: scale(.8)
 
-      &:hover
+      &:hover.show-percent
         .scroll-percent
-          display: none
+          opacity: 0
+          transform: scale(.8)
 
-          & + i
-            display: block
+        i
+          opacity: 1 !important
+          transform: scale(1) !important
+
+@keyframes fadeInScale
+  from
+    opacity: 0
+    transform: scale(.8)
+
+  to
+    opacity: 1
+    transform: scale(1)
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/sidebar.styl b/themes/butterfly/source/css/_layout/sidebar.styl
index 54ada40..51c5b2f 100644
--- a/themes/butterfly/source/css/_layout/sidebar.styl
+++ b/themes/butterfly/source/css/_layout/sidebar.styl
@@ -38,8 +38,7 @@
       background: var(--sidebar-menu-bg)
       box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
       addBorderRadius(10)
-      .menus_item
-        margin: 10px 0
+
       .site-page
         @extend .limit-one-line
         position: relative
@@ -50,20 +49,17 @@
         font-size: 1.15em
         cursor: pointer
         addBorderRadius(6)
-        border: var(--icat-style-border-always)
-        background: var(--icat-essay-card-bg)
-        font-size: 14px
-        border-radius: 12px
-
 
         &:hover
           background: var(--text-bg-hover)
+          box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
           color: var(--white)
+          transition: all .2s ease
+          transform: translateX(3px)
 
         i:first-child
           width: 15%
           text-align: left
-          padding-left: 10px
 
         &.group
           & > i:last-child
@@ -77,34 +73,25 @@
               transform: rotate(90deg)
 
             & + .menus_item_child
-              display: none
+              overflow: hidden
+              max-height: 0
+              opacity: 0
+              transform: scaleY(0)
+              transform-origin: top
 
       .menus_item_child
         margin: 0
         padding-left: 25px
+        max-height: 0
         list-style: none
+        opacity: 0
+        transition: transform .3s ease, opacity .3s ease, max-height .3s ease
+        transform: scaleY(0)
+        transform-origin: top
+        will-change: transform, opacity, max-height
 
-#sidebar
-  #sidebar-menus
-    .icat_menus_item
-      display: inline-block
-      width: 50%
-
-      .site-page
-        text-align: center
-        margin: 4px
-        display: flex
-        flex-direction: column
-        align-items: center
-        padding: 8px 0
-        border-radius: 12px
-        font-size: 14px
-
-        i:first-child
-          padding-left: 0
-
-        & > .icat-essay
-          font-weight: 500
-
-        span
-          margin-top: -8px
\ No newline at end of file
+    // 當父元素沒有 .hide 類時，顯示子目錄
+    .site-page.group:not(.hide) + .menus_item_child
+      max-height: 1000px
+      opacity: 1
+      transform: scaleY(1)
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_mode/darkmode.styl b/themes/butterfly/source/css/_mode/darkmode.styl
index b6d1bbd..ca0c10b 100644
--- a/themes/butterfly/source/css/_mode/darkmode.styl
+++ b/themes/butterfly/source/css/_mode/darkmode.styl
@@ -33,6 +33,56 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --timeline-bg: lighten(#121212, 5)
     --zoom-bg: #121212
     --mark-bg: alpha($dark-black, .6)
+    --btn-color: darken($btn-color, 20%)
+    --btn-default-color: lighten($btn-default-color, 20%)
+    --tags-blue-color: desaturate(darken($tagsP-blue-color, 20%), 25%)
+    --tags-blue-color-lighten: rgba(66, 139, 202, .15)
+    --tags-pink-color: desaturate(darken($tagsP-pink-color, 22%), 30%)
+    --tags-pink-color-lighten: rgba(255, 105, 180, .15)
+    --tags-red-color: desaturate(darken($tagsP-red-color, 25%), 28%)
+    --tags-red-color-lighten: rgba(255, 0, 0, .15)
+    --tags-orange-color: desaturate(darken($tagsP-orange-color, 22%), 32%)
+    --tags-orange-color-lighten: rgba(255, 140, 0, .15)
+    --tags-purple-color: desaturate(darken($tagsP-purple-color, 18%), 30%)
+    --tags-purple-color-lighten: rgba(111, 66, 193, .15)
+    --tags-green-color: desaturate(darken($tagsP-green-color, 20%), 28%)
+    --tags-green-color-lighten: rgba(92, 184, 92, .15)
+    --note-default-border: $note-dark-default-border
+    --note-default-bg: $note-dark-default-bg
+    --note-default-text: $note-dark-default-text
+    --note-modern-default-border: $note-dark-modern-default-border
+    --note-modern-default-bg: $note-dark-modern-default-bg
+    --note-modern-default-text: $note-dark-modern-default-text
+    --note-primary-border: $note-dark-primary-border
+    --note-primary-bg: $note-dark-primary-bg
+    --note-primary-text: $note-dark-primary-text
+    --note-modern-primary-border: $note-dark-modern-primary-border
+    --note-modern-primary-bg: $note-dark-modern-primary-bg
+    --note-modern-primary-text: $note-dark-modern-primary-text
+    --note-info-border: $note-dark-info-border
+    --note-info-bg: $note-dark-info-bg
+    --note-info-text: $note-dark-info-text
+    --note-modern-info-border: $note-dark-modern-info-border
+    --note-modern-info-bg: $note-dark-modern-info-bg
+    --note-modern-info-text: $note-dark-modern-info-text
+    --note-success-border: $note-dark-success-border
+    --note-success-bg: $note-dark-success-bg
+    --note-success-text: $note-dark-success-text
+    --note-modern-success-border: $note-dark-modern-success-border
+    --note-modern-success-bg: $note-dark-modern-success-bg
+    --note-modern-success-text: $note-dark-modern-success-text
+    --note-warning-border: $note-dark-warning-border
+    --note-warning-bg: $note-dark-warning-bg
+    --note-warning-text: $note-dark-warning-text
+    --note-modern-warning-border: $note-dark-modern-warning-border
+    --note-modern-warning-bg: $note-dark-modern-warning-bg
+    --note-modern-warning-text: $note-dark-modern-warning-text
+    --note-danger-border: $note-dark-danger-border
+    --note-danger-bg: $note-dark-danger-bg
+    --note-danger-text: $note-dark-danger-text
+    --note-modern-danger-border: $note-dark-modern-danger-border
+    --note-modern-danger-bg: $note-dark-modern-danger-bg
+    --note-modern-danger-text: $note-dark-modern-danger-text
 
     #web_bg:before
       position: absolute
@@ -78,23 +128,17 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         #switch-btn
           filter: brightness(.8)
 
-    // note
-    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
-      .note
-        filter: brightness(.8)
-
     // hide-tags
     .hide-button,
-    .btn-beautify,
-    .hl-label,
     #post-outdate-notice,
     .error-img,
     .container iframe,
     .gist,
-    .ads-wrap
+    .ads-wrap,
+    .tag-cloud-list > a
       filter: brightness(.8)
 
-    img
+    img:not(.cover)
       if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
         filter: blur(0) brightness(.8)
       else
@@ -148,7 +192,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       --at-color-font: alpha(#FFFFFF, .7)
       --at-color-meta: alpha(#FFFFFF, .7)
       --at-color-grey: alpha(#FFFFFF, .7)
-    
+
     .atk-send-btn,
     .atk-badge
       color: alpha(#FFFFFF, .7) !important
diff --git a/themes/butterfly/source/css/_page/common.styl b/themes/butterfly/source/css/_page/common.styl
index 9e25c20..f69f53b 100644
--- a/themes/butterfly/source/css/_page/common.styl
+++ b/themes/butterfly/source/css/_page/common.styl
@@ -18,7 +18,7 @@
     padding: 20px 5px
 
   +minWidth2000()
-    max-width: 70%
+    max-width: 60%
 
   & > div:first-child:not(.nc)
     @extend .cardHover
diff --git a/themes/butterfly/source/css/_page/shuoshuo.styl b/themes/butterfly/source/css/_page/shuoshuo.styl
index 852da03..0ca328d 100644
--- a/themes/butterfly/source/css/_page/shuoshuo.styl
+++ b/themes/butterfly/source/css/_page/shuoshuo.styl
@@ -76,3 +76,110 @@
 
     &.no-comment
       display: none
+
+.shuoshuo-navigation
+  display: flex
+  justify-content: center
+  align-items: center
+  margin-top: 20px
+  padding: 20px 0
+
+  button
+    display: flex
+    justify-content: center
+    align-items: center
+    width: 2.7em
+    height: 2.7em
+    background-color: var(--btn-bg)
+    color: var(--btn-color)
+    font-size: .9em
+    line-height: 2.5em
+    transition: all .2s ease-in-out
+    addBorderRadius(6)
+
+    &:not(:disabled)
+      @extend .btn-effects
+
+    &:hover:not(:disabled)
+      background-color: var(--btn-hover-color)
+
+    &:disabled
+      background: #f5f5f5
+      color: #ccc
+      opacity: .5
+      cursor: not-allowed
+
+  .shuoshuo-page-info
+    margin: 0 15px
+    color: #858585
+    white-space: nowrap
+    font-size: .9em
+
+  .shuoshuo-page-input
+    margin-right: 12px
+    padding: 0 15px
+    height: 2.7em
+    border: 1px solid var(--btn-bg)
+    background: var(--card-bg)
+    color: #858585
+    text-align: center
+    font-size: .9em
+    transition: all .2s ease-in-out
+    addBorderRadius(6)
+
+    &:focus
+      outline: none
+      border-width: 2px
+
+      &::placeholder
+        color: transparent
+
+    /* 隱藏 number 輸入框的上下箭頭 */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button
+      margin: 0
+      -webkit-appearance: none
+
+    /* Firefox */
+    -moz-appearance: textfield
+
+    /* 當作為頁碼按鈕時的樣式 */
+    &.shuoshuo-page-num
+      min-width: 40px
+      width: 40px
+      border: none
+      background: $light-blue
+      color: var(--white)
+      font-weight: 500
+      cursor: text
+
+      &:focus
+        border: 1px solid $light-blue
+        background: var(--white)
+        color: #333
+
+    /* 超出範圍時的紅色樣式 */
+    &.invalid
+      border-color: #ff4757
+      background-color: #ffeaea
+      color: #ff4757
+      animation: shake .5s ease-in-out
+
+  /* 震動動畫 */
+  @keyframes shake
+    0%,
+    100%
+      transform: translateX(0)
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90%
+      transform: translateX(-2px)
+
+    20%,
+    40%,
+    60%,
+    80%
+      transform: translateX(2px)
diff --git a/themes/butterfly/source/css/_page/tags.styl b/themes/butterfly/source/css/_page/tags.styl
index cfd2557..d1d47d6 100644
--- a/themes/butterfly/source/css/_page/tags.styl
+++ b/themes/butterfly/source/css/_page/tags.styl
@@ -1,27 +1,91 @@
 .tag-cloud
   &-list
+    animation: tagsFadeIn .6s cubic-bezier(.4, 0, .2, 1)
+
+    &:hover a:not(:hover)
+      opacity: .7
+      transform: scale(.98)
+
     a
+      position: relative
       display: inline-block
-      margin: 2px
-      padding: 2px 7px
+      margin: 5px
+      padding: 3px 12px
       line-height: 1.7
-      transition: all .3s
-      addBorderRadius(5)
+      transition: all .3s cubic-bezier(.4, 0, .2, 1)
+      addBorderRadius(7)
+      overflow: hidden
+      color: white
+      transform: translateY(0) scale(1)
+      will-change: transform, background-color, box-shadow
+
+      &::before
+        position: absolute
+        top: 0
+        left: -100%
+        z-index: -1
+        width: 100%
+        height: 100%
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
+        content: ''
+        transition: left .6s cubic-bezier(.4, 0, .2, 1)
 
       &:hover
-        background: var(--btn-bg) !important
-        box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
+        background: var(--btn-hover-color) !important
+        box-shadow:
+          0 6px 20px rgba(0, 0, 0, .12),
+          0 4px 8px rgba(0, 0, 0, .08),
+          0 0 0 1px rgba(255, 255, 255, .05)
         color: var(--btn-color) !important
+        transform: translateY(-2px) scale(1.02)
+
+        &::before
+          left: 100%
+
+      &:active
+        box-shadow:
+          0 3px 8px rgba(0, 0, 0, .15),
+          0 1px 3px rgba(0, 0, 0, .1)
+        transition: all .15s cubic-bezier(.4, 0, .2, 1)
+        transform: translateY(-1px) scale(.98)
 
       +maxWidth768()
         zoom: .85
 
+        &:hover
+          transform: translateY(-1px) scale(1.01)
+
+        &:active
+          transform: translateY(0) scale(.99)
+
+        &::before
+          display: none
+
   &-title
     font-size: 2.57em
+    animation: titleSlideIn .8s cubic-bezier(.4, 0, .2, 1)
 
     +maxWidth768()
       font-size: 2em
 
+@keyframes tagsFadeIn
+  from
+    opacity: 0
+    transform: translateY(20px)
+
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titleSlideIn
+  from
+    opacity: 0
+    transform: translateX(-30px)
+
+  to
+    opacity: 1
+    transform: translateX(0)
+
 .page-title
   & + .tag-cloud-list
     text-align: left
diff --git a/themes/butterfly/source/css/_search/algolia.styl b/themes/butterfly/source/css/_search/algolia.styl
index ae7553f..a01b3c8 100644
--- a/themes/butterfly/source/css/_search/algolia.styl
+++ b/themes/butterfly/source/css/_search/algolia.styl
@@ -1,93 +1,13 @@
 #algolia-search
   .search-dialog
-    .ais-SearchBox
-      input
-        padding: 5px 14px
-        width: 100%
-        outline: none
-        border: 2px solid $search-color
-        border-radius: 40px
-        background: var(--search-bg)
-        color: var(--search-input-color)
-
-      .ais-SearchBox-loadingIndicator
-        position: absolute
-        top: 18px
-        left: 67px
-
     .ais-Hits-list
-      margin: 0
-      padding: 0
-      @extend .list-beauty
-
-      a
-        color: var(--search-a-color)
-
-        &:hover
-          color: $search-color
-
-      mark
-        background: transparent
-        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: 15px 0 0
-      padding: 0
-      text-align: center
-
-      .ais-Pagination-list
-        margin: 0
-        padding: 0
-        list-style: none
-
-      .ais-Pagination-item
-        display: inline
-        margin: 0 4px
-        padding: 0
-
-        .ais-Pagination-link
-          display: inline-block
-          min-width: 24px
-          height: 24px
-          text-align: center
-          line-height: 24px
-          addBorderRadius()
-
-      .ais-Pagination-item--selected
-        a
-          background: $theme-paginator-color
-          color: #eee
-          cursor: default
-
-      .ais-Pagination-item--disabled
-        visibility: hidden
-
-    #algolia-hits
-      > div
-        overflow-y: overlay
-        margin: 0 -20px
-        padding: 0 22px
-        max-height: calc(80vh - 220px)
-
-        +maxWidth768()
-          max-height: none
-          height: calc(var(--search-height) - 235px)
+      +maxWidth768()
+        min-height: calc(var(--search-height) - 245px)
 
     #algolia-info
-      div
-        display: inline
-
       .algolia-poweredBy
         float: right
-        vertical-align: text-top
+        padding-top: 2px
 
         svg
           height: 1.1em
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_search/index.styl b/themes/butterfly/source/css/_search/index.styl
index c889eb6..ee179c9 100644
--- a/themes/butterfly/source/css/_search/index.styl
+++ b/themes/butterfly/source/css/_search/index.styl
@@ -20,22 +20,174 @@
     border-radius: 0
 
   .search-nav
-    margin: 0 0 14px
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin-bottom: 14px
     color: $search-color
     font-size: 1.4em
     line-height: 1
 
     .search-dialog-title
-      margin-right: 10px
+      margin-right: 4px
+
+    #loading-status
+      &[hidden]
+        display: none !important
 
     .search-close-button
-      float: right
+      flex: 1
       color: $grey
-      transition: color .2s ease-in-out
+      text-align: right
+      transition: all .2s ease
 
       &:hover
         color: $search-color
-  
+
+  .local-search-input,
+  #algolia-search-input
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input,
+    .ais-SearchBox-input
+      padding: 5px 14px
+      width: 100%
+      outline: none
+      border: 2px solid $search-color
+      border-radius: 40px
+      background: var(--search-bg)
+      color: var(--search-input-color)
+      -webkit-appearance: none
+
+      &::placeholder
+        color: var(--text-color)
+
+  .search-result-list,
+  .ais-Hits-list
+    overflow-y: overlay
+    margin: 0 -20px
+    padding: 0 22px
+    max-height: calc(80vh - 220px)
+
+    .local-search-hit-item,
+    .ais-Hits-item
+      display: flex
+      align-items: flex-start
+      margin: 3px 0
+      line-height: 1.8
+      transition: all .2s ease-in-out
+
+      &:hover
+        transform: translateY(-1px)
+
+      &:not([value])::before
+        display: none
+
+      &[value]::before
+        display: inline-flex
+        flex-shrink: 0
+        justify-content: center
+        align-items: center
+        margin-right: 6px
+        margin-top: 3px
+        min-width: 24px
+        color: $search-color
+        content: attr(value) '.'
+        font-weight: bold
+        font-style: italic
+        font-size: .9em
+
+      &::marker
+        content: none
+
+      a
+        flex: 1
+        color: var(--search-a-color)
+
+        &:hover
+          color: $search-color
+
+      .search-result-title,
+      .algolia-hits-item-title
+        font-weight: 600
+
+      .search-result,
+      .algolia-hit-item-content
+        margin: 0 0 8px
+        word-break: break-all
+        font-size: .9em
+
+  .ais-Pagination
+    margin: 15px 0 0
+    padding: 0
+    text-align: center
+
+    .ais-Pagination-list
+      display: flex
+      flex-wrap: wrap
+      justify-content: center
+      align-items: center
+      margin: 0
+      padding: 0
+      list-style: none
+      gap: 6px
+
+    .ais-Pagination-item
+      display: flex
+      padding: 0
+
+      &:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled)
+        .ais-Pagination-link:hover
+          background: var(--btn-hover-color)
+          transform: translateY(-1px)
+
+      .ais-Pagination-link
+        display: inline-flex
+        justify-content: center
+        align-items: center
+        padding: 4px 8px
+        min-width: 28px
+        height: 28px
+        border-radius: 6px
+        background: var(--btn-bg)
+        color: var(--btn-color)
+        transition: all .2s ease
+
+        &.ais-Pagination-link--disabled
+          opacity: .3
+          cursor: not-allowed
+
+        i
+          font-size: 12px
+
+    .ais-Pagination-item--selected
+      .ais-Pagination-link
+        background: $theme-paginator-color
+        font-weight: 600
+        cursor: default
+
+    .ais-Pagination-item--ellipsis
+      .ais-Pagination-link
+        padding: 4px 2px
+        border: none
+        background: transparent
+        color: var(--text-color)
+        cursor: default
+
+        &:hover
+          background: transparent
+          transform: none
+
+    .ais-Pagination-item--disabled
+      .ais-Pagination-link
+        opacity: .4
+
+    +maxWidth768()
+      .ais-Pagination-list
+        gap: 4px
+
   hr
     margin: 15px auto
     @extend .custom-hr
@@ -50,6 +202,38 @@
   display: none
   background: rgba($dark-black, .6)
 
+.search-result-stats,
+.ais-Stats-text
+  margin: 15px 0 0
+  color: var(--text-color)
+  text-align: center
+  font-size: .9em
+
+.search-keyword
+  background: transparent
+  color: $search-keyword-highlight
+  font-weight: 600
+
+.search-loading
+  display: flex
+  justify-content: center
+  align-items: center
+  padding: 20px
+  color: var(--text-color)
+
+  &::before
+    width: 16px
+    height: 16px
+    border: 2px solid var(--text-color)
+    border-top-color: transparent
+    border-radius: 50%
+    content: ''
+    animation: spin 1s linear infinite
+
+@keyframes spin
+  to
+    transform: rotate(360deg)
+
 if hexo-config('search.use') == 'algolia_search'
   @require 'algolia'
 else if hexo-config('search.use') == 'local_search'
diff --git a/themes/butterfly/source/css/_search/local-search.styl b/themes/butterfly/source/css/_search/local-search.styl
index 98139b3..12c50a8 100644
--- a/themes/butterfly/source/css/_search/local-search.styl
+++ b/themes/butterfly/source/css/_search/local-search.styl
@@ -1,57 +1,18 @@
 #local-search
   .search-dialog
-    .local-search-box
-      margin: 0 auto
-      max-width: 100%
-      width: 100%
-
-      input
-        padding: 5px 14px
-        width: 100%
-        outline: none
-        border: 2px solid $search-color
-        border-radius: 40px
-        background: var(--search-bg)
-        color: var(--search-input-color)
-        -webkit-appearance: none
-
-    .search-wrap
-      display: none
-
-    .local-search-hit-item
-      margin-left: 24px
-      padding-left: 3px
-      line-height: 1.8
-
-      &::marker
-        color: $search-color
-        font-weight: bold
-        font-style: italic
-
-      a
-        color: var(--search-a-color)
-
-        &:hover
-          color: $search-color
-
-      .search-result-title
-        font-weight: 600
-
-      .search-result
-        margin: 0 0 8px
-        word-break: break-all
-        font-size: .9em
-
     .search-result-list
-      overflow-y: overlay
-      margin: 0 -20px
-      padding: 0 22px
-      max-height: calc(80vh - 180px)
-
       +maxWidth768()
-        max-height: calc(var(--search-height) - 190px) !important
+        if hexo-config('search.local_search.pagination.enable')
+          min-height: calc(var(--search-height) - 255px) !important
+        else
+          max-height: calc(var(--search-height) - 200px) !important
 
-.search-keyword
-  background: transparent
-  color: $search-keyword-highlight
-  font-weight: 600
\ No newline at end of file
+  #local-search-stats
+    .search-result-stats
+      text-align: left
+
+  .search-keyword
+    font-weight: 600
+
+  #loading-database ~ *
+    visibility: hidden
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_tags/button.styl b/themes/butterfly/source/css/_tags/button.styl
index ffad827..7b6c34e 100644
--- a/themes/butterfly/source/css/_tags/button.styl
+++ b/themes/butterfly/source/css/_tags/button.styl
@@ -7,21 +7,20 @@
     display: inline-block
     margin: 0 4px 6px
     padding: 0 15px
-    background-color: var(--btn-beautify-color, $btn-default-color)
-    color: $btn-color
+    background-color: var(--btn-beautify-color, var(--btn-default-color))
+    color: var(--btn-color, $btn-color)
+    vertical-align: top
     line-height: 2
     addBorderRadius()
+    @extend .btn-effects
 
     for $type in $color-types
       &.{$type}
-        --btn-beautify-color: lookup('$tagsP-' + $type + '-color')
+        --btn-beautify-color: unquote('var(--tags-' + $type + '-color)')
 
     &:hover
       background-color: var(--btn-hover-color)
 
-    i + span
-      margin-left: 6px
-
     &:not(.block) + .btn-beautify:not(.block)
       margin: 0 4px 20px
 
@@ -39,18 +38,26 @@
 
     &.larger
       padding: 6px 15px
-
-    &:hover
-      text-decoration: none
+      @extend .btn-effects-large
 
     &.outline
       border: 1px solid transparent
-      border-color: var(--btn-beautify-color, $btn-default-color)
+      border-color: var(--btn-beautify-color, var(--btn-default-color))
       background-color: transparent
-      color: var(--btn-beautify-color, $btn-default-color)
+      color: var(--btn-beautify-color, var(--btn-default-color))
+
+      i,
+      span
+        transition: color .3s cubic-bezier(.4, 0, .2, 1)
+
+      &::before
+        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent)
 
       &:hover
-        background-color: var(--btn-beautify-color, $btn-default-color)
+        border-color: var(--btn-beautify-color, var(--btn-default-color))
+        background-color: var(--btn-beautify-color, var(--btn-default-color))
+        color: var(--btn-color) !important
 
-      &:hover
-        color: white !important
+        i,
+        span
+          color: var(--btn-color)
diff --git a/themes/butterfly/source/css/_tags/hide.styl b/themes/butterfly/source/css/_tags/hide.styl
index 35cf3a0..42d320c 100644
--- a/themes/butterfly/source/css/_tags/hide.styl
+++ b/themes/butterfly/source/css/_tags/hide.styl
@@ -7,6 +7,7 @@
     background: $tag-hide-bg
     color: var(--white)
     addBorderRadius()
+    @extend .btn-effects
 
     &:hover
       background-color: var(--btn-hover-color)
diff --git a/themes/butterfly/source/css/_tags/label.styl b/themes/butterfly/source/css/_tags/label.styl
index 5b08c50..9faf3e0 100644
--- a/themes/butterfly/source/css/_tags/label.styl
+++ b/themes/butterfly/source/css/_tags/label.styl
@@ -1,11 +1,11 @@
 .hl-label
   padding: 2px 4px
-  color: $btn-color
+  color: var(--btn-color, $btn-color)
   addBorderRadius(3)
 
   &.default
-    background-color: $btn-default-color
+    background-color: var(--btn-default-color)
 
   for $type in $color-types
     &.{$type}
-      background-color: lookup('$tagsP-' + $type + '-color')
+      background-color: unquote('var(--tags-' + $type + '-color)')
diff --git a/themes/butterfly/source/css/_tags/note.styl b/themes/butterfly/source/css/_tags/note.styl
index 041603f..5ae3018 100644
--- a/themes/butterfly/source/css/_tags/note.styl
+++ b/themes/butterfly/source/css/_tags/note.styl
@@ -19,32 +19,32 @@
   for $type in $color-types
     &.{$type}
       &:not(.disabled)
-        border-left-color: lookup('$tagsP-' + $type + '-color') !important
+        border-left-color: unquote('var(--tags-' + $type + '-color)') !important
 
         &.modern
           border-left-color: transparent !important
-          color: lookup('$tagsP-' + $type + '-color')
+          color: unquote('var(--tags-' + $type + '-color)')
 
         &:not(.simple)
-          background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
+          background: unquote('var(--tags-' + $type + '-color-lighten)')
 
       & > .note-icon
-        color: lookup('$tagsP-' + $type + '-color')
+        color: unquote('var(--tags-' + $type + '-color)')
 
   &.simple
-    border: 1px solid #EEEEEE
+    border: 1px solid var(--note-default-border)
     border-left-width: 5px
 
   &.modern
     border: 1px solid transparent !important
-    background-color: #f5f5f5
-    color: $font-black
+    background-color: var(--note-modern-default-bg)
+    color: var(--note-modern-default-text)
 
   &.flat
     border: initial
-    border-left: 5px solid #EEEEEE
-    background-color: lighten(#EEEEEE, 65%)
-    color: $font-black
+    border-left: 5px solid var(--note-default-border)
+    background-color: var(--note-default-bg)
+    color: var(--note-default-text)
 
   h2,
   h3,
@@ -90,29 +90,30 @@
   for $type in $note-types
     &.{$type}
       &.flat
-        background: lookup('$note-' + $type + '-bg')
+        background: unquote('var(--note-' + $type + '-bg)')
+        color: var(--font-color)
 
       &.modern
-        border-color: lookup('$note-modern-' + $type + '-border')
-        background: lookup('$note-modern-' + $type + '-bg')
-        color: lookup('$note-modern-' + $type + '-text')
+        border-color: unquote('var(--note-modern-' + $type + '-border)') !important
+        background: unquote('var(--note-modern-' + $type + '-bg)')
+        color: unquote('var(--note-modern-' + $type + '-text)')
 
         a
           &:not(.btn)
-            color: lookup('$note-modern-' + $type + '-text')
+            color: unquote('var(--note-modern-' + $type + '-text)')
 
             &:hover
-              color: lookup('$note-modern-' + $type + '-hover')
+              color: unquote('var(--note-modern-' + $type + '-hover)')
 
       &:not(.modern)
-        border-left-color: lookup('$note-' + $type + '-border')
+        border-left-color: unquote('var(--note-' + $type + '-border)')
 
         h2,
         h3,
         h4,
         h5,
         h6
-          color: lookup('$note-' + $type + '-text')
+          color: unquote('var(--note-' + $type + '-text)')
 
       if $note-icons
         &:not(.no-icon)
@@ -121,4 +122,4 @@
 
           &:not(.modern)
             &::before
-              color: lookup('$note-' + $type + '-text')
+              color: unquote('var(--note-' + $type + '-text)')
diff --git a/themes/butterfly/source/css/var.styl b/themes/butterfly/source/css/var.styl
index 7891c37..ee37ba6 100644
--- a/themes/butterfly/source/css/var.styl
+++ b/themes/butterfly/source/css/var.styl
@@ -13,11 +13,9 @@ $code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground
 $code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
 $theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
 // font
-
 $chineseFont = $language == 'zh-CN' ? 'Microsoft YaHei' : 'Microsoft JhengHei'
 $default-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', $chineseFont, sans-serif
 $default-code-font = consolas, Menlo, monospace, 'PingFang SC', $chineseFont, sans-serif
-
 $font-family = hexo-config('font.font_family') ? unquote(hexo-config('font.font_family')) : $default-font-family
 $code-font-family = hexo-config('font.code_font_family') ? unquote(hexo-config('font.code_font_family')) : $default-code-font
 $site-name-font = hexo-config('blog_title_font.font_family') && unquote(hexo-config('blog_title_font.font_family'))
@@ -184,3 +182,52 @@ $tab-to-top-color = #99a9bf
 $tab-to-top-hover-color = $theme-color
 // Tag Plugins - timeline
 $timeline-default-color = $theme-color
+// note - darkmode
+// Default
+$note-dark-default-border = #5a5a5a
+$note-dark-default-bg = #2b2b2b
+$note-dark-default-text = #b3b3b3
+$note-dark-modern-default-border = #9a9a9a
+$note-dark-modern-default-bg = #353535
+$note-dark-modern-default-text = #c4c4c4
+$note-dark-modern-default-hover = #d0d0d0
+// Primary
+$note-dark-primary-border = #5935a1
+$note-dark-primary-bg = #2e1c3e
+$note-dark-primary-text = #a47dd4
+$note-dark-modern-primary-border = #9985cc
+$note-dark-modern-primary-bg = #3c2d4c
+$note-dark-modern-primary-text = #b693e6
+$note-dark-modern-primary-hover = #c9a8f0
+// Info
+$note-dark-info-border = #346fa2
+$note-dark-info-bg = #1f2e3b
+$note-dark-info-text = #7bb3db
+$note-dark-modern-info-border = #7ca8b5
+$note-dark-modern-info-bg = #2b3c44
+$note-dark-modern-info-text = #8fc6e0
+$note-dark-modern-info-hover = #a3d4ea
+// Success
+$note-dark-success-border = #4a944a
+$note-dark-success-bg = #202e20
+$note-dark-success-text = #82c682
+$note-dark-modern-success-border = #8bb087
+$note-dark-modern-success-bg = #2c3d2c
+$note-dark-modern-success-text = #96d196
+$note-dark-modern-success-hover = #a8dca8
+// Warning
+$note-dark-warning-border = #c08a3e
+$note-dark-warning-bg = #3e301f
+$note-dark-warning-text = #e6ba6b
+$note-dark-modern-warning-border = #b8a285
+$note-dark-modern-warning-bg = #4b3c2b
+$note-dark-modern-warning-text = #d4b373
+$note-dark-modern-warning-hover = #e0c080
+// Danger
+$note-dark-danger-border = #b34440
+$note-dark-danger-bg = #3b201f
+$note-dark-danger-text = #e67572
+$note-dark-modern-danger-border = #c7898c
+$note-dark-modern-danger-bg = #4d2b2e
+$note-dark-modern-danger-text = #d98b8e
+$note-dark-modern-danger-hover = #e59fa2
\ No newline at end of file
diff --git a/themes/butterfly/source/js/main.js b/themes/butterfly/source/js/main.js
index 7d61e23..fa41a4c 100644
--- a/themes/butterfly/source/js/main.js
+++ b/themes/butterfly/source/js/main.js
@@ -698,7 +698,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const addCopyright = () => {
     const { limitCount, languages } = GLOBAL_CONFIG.copyright
 
-    const handleCopy = (e) => {
+    const handleCopy = e => {
       e.preventDefault()
       const copyFont = window.getSelection(0).toString()
       let textFont = copyFont
@@ -893,27 +893,6 @@ document.addEventListener('DOMContentLoaded', () => {
     tabsFn()
   }
 
-  /**
-   * 自己写的，实现功能切换类别表
-   */ 
-  const setCategoryBarActive = () => {
-    const categoryBar = document.querySelector("#category-bar");
-    const currentPath = decodeURIComponent(window.location.pathname);
-    const isHomePage = currentPath === GLOBAL_CONFIG.root;
-
-    if (categoryBar) {
-        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
-        categoryItems.forEach(item => item.classList.remove("select"));
-
-        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
-        const activeItem = document.getElementById(activeItemId);
-
-        if (activeItem) {
-            activeItem.classList.add("select");
-        }
-    }
-  };
-  
   const refreshFn = () => {
     initAdjust()
     justifiedIndexPostUI()
@@ -926,7 +905,6 @@ document.addEventListener('DOMContentLoaded', () => {
       GLOBAL_CONFIG.runtime && addRuntime()
       addLastPushDate()
       toggleCardCategory()
-      setCategoryBarActive()
     }
 
     GLOBAL_CONFIG_SITE.pageType === 'home' && scrollDownInIndex()
diff --git a/themes/butterfly/source/js/search/algolia.js b/themes/butterfly/source/js/search/algolia.js
index 8624f52..ed69d2e 100644
--- a/themes/butterfly/source/js/search/algolia.js
+++ b/themes/butterfly/source/js/search/algolia.js
@@ -26,7 +26,12 @@ window.addEventListener('load', () => {
   const openSearch = () => {
     btf.overflowPaddingR.add()
     animateElements(true)
-    setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
+    showLoading(false)
+
+    setTimeout(() => {
+      const searchInput = document.querySelector('#algolia-search-input .ais-SearchBox-input')
+      if (searchInput) searchInput.focus()
+    }, 100)
 
     const handleEscape = event => {
       if (event.code === 'Escape') {
@@ -55,9 +60,38 @@ window.addEventListener('load', () => {
     document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
   }
 
-  const cutContent = (content) => {
+  const cutContent = content => {
     if (!content) return ''
-    const firstOccur = content.indexOf('<mark>')
+
+    let contentStr = ''
+    if (typeof content === 'string') {
+      contentStr = content.trim()
+    } else if (typeof content === 'object') {
+      if (content.value !== undefined) {
+        contentStr = String(content.value).trim()
+        if (!contentStr) return ''
+      } else if (content.matchedWords || content.matchLevel || content.fullyHighlighted !== undefined) {
+        return ''
+      } else {
+        try {
+          contentStr = JSON.stringify(content).trim()
+          if (contentStr === '{}' || contentStr === '[]' || contentStr === '""') {
+            return ''
+          }
+        } catch (e) {
+          return ''
+        }
+      }
+    } else if (content.toString && typeof content.toString === 'function') {
+      contentStr = content.toString().trim()
+      if (contentStr === '[object Object]' || contentStr === '[object Array]') {
+        return ''
+      }
+    } else {
+      return ''
+    }
+
+    const firstOccur = contentStr.indexOf('<mark>')
     let start = firstOccur - 30
     let end = firstOccur + 120
     let pre = ''
@@ -70,94 +104,454 @@ window.addEventListener('load', () => {
       pre = '...'
     }
 
-    if (end > content.length) {
-      end = content.length
+    if (end > contentStr.length) {
+      end = contentStr.length
     } else {
       post = '...'
     }
 
-    return `${pre}${content.substring(start, end)}${post}`
+    // Ensure we don't cut off HTML tags in the middle
+    let substr = contentStr.substring(start, end)
+
+    // Handle tag completeness
+    // Check for incomplete opening tags at the beginning
+    const firstCloseBracket = substr.indexOf('>')
+    const firstOpenBracket = substr.indexOf('<')
+
+    // If there's a closing bracket but no opening bracket before it, we've cut a tag
+    if (firstCloseBracket !== -1 && (firstOpenBracket === -1 || firstCloseBracket < firstOpenBracket)) {
+      substr = substr.substring(firstCloseBracket + 1)
+    }
+
+    // Check for incomplete closing tags at the end
+    const lastOpenBracket = substr.lastIndexOf('<')
+    const lastCloseBracket = substr.lastIndexOf('>')
+
+    // If there's an opening bracket after the last closing bracket, we've cut a tag
+    if (lastOpenBracket !== -1 && lastOpenBracket > lastCloseBracket) {
+      substr = substr.substring(0, lastOpenBracket)
+    }
+
+    // Balance tags in the substring
+    const tagStack = []
+    let balancedStr = ''
+    let i = 0
+
+    while (i < substr.length) {
+      if (substr[i] === '<') {
+        // Check if it's a closing tag
+        if (substr[i + 1] === '/') {
+          const closeTagEnd = substr.indexOf('>', i)
+          if (closeTagEnd !== -1) {
+            const closeTagName = substr.substring(i + 2, closeTagEnd)
+            // Remove matching opening tag from stack
+            for (let j = tagStack.length - 1; j >= 0; j--) {
+              if (tagStack[j] === closeTagName) {
+                tagStack.splice(j, 1)
+                break
+              }
+            }
+            balancedStr += substr.substring(i, closeTagEnd + 1)
+            i = closeTagEnd + 1
+            continue
+          }
+        } else if (substr.substr(i, 2) === '<!' || (substr.indexOf('/>', i) !== -1 && substr.indexOf('/>', i) < substr.indexOf('>', i))) {
+          const tagEnd = substr.indexOf('>', i)
+          if (tagEnd !== -1) {
+            balancedStr += substr.substring(i, tagEnd + 1)
+            i = tagEnd + 1
+            continue
+          }
+        } else {
+          const tagEnd = substr.indexOf('>', i)
+          if (tagEnd !== -1) {
+            const tagName = substr.substring(i + 1, (substr.indexOf(' ', i) > -1 && substr.indexOf(' ', i) < tagEnd)
+              ? substr.indexOf(' ', i)
+              : tagEnd).split(/\s/)[0]
+            tagStack.push(tagName)
+            balancedStr += substr.substring(i, tagEnd + 1)
+            i = tagEnd + 1
+            continue
+          }
+        }
+      }
+      balancedStr += substr[i]
+      i++
+    }
+
+    // Close any unclosed tags
+    while (tagStack.length > 0) {
+      const tagName = tagStack.pop()
+      balancedStr += `</${tagName}>`
+    }
+
+    // If we removed content from the beginning, add prefix
+    if (start > 0 || pre) {
+      const actualFirstOpenBracket = contentStr.indexOf('<', start > 0 ? start - 30 : 0)
+      const actualFirstMark = contentStr.indexOf('<mark>', start > 0 ? start - 30 : 0)
+
+      if (actualFirstOpenBracket !== -1 &&
+          (actualFirstMark === -1 || actualFirstOpenBracket < actualFirstMark)) {
+        pre = '...'
+      }
+    }
+
+    substr = balancedStr
+    return `${pre}${substr}${post}`
   }
 
-  const disableDiv = [
-    document.getElementById('algolia-hits'),
-    document.getElementById('algolia-pagination'),
-    document.querySelector('#algolia-info .algolia-stats')
-  ]
+  // Helper function to handle Algolia highlight results
+  const extractHighlightValue = highlightObj => {
+    if (!highlightObj) return ''
 
-  const searchClient = typeof algoliasearch === 'function' ? algoliasearch : window['algoliasearch/lite'].liteClient
-  const search = instantsearch({
-    indexName,
-    searchClient: searchClient(appId, apiKey),
-    searchFunction (helper) {
-      disableDiv.forEach(item => {
-        item.style.display = helper.state.query ? '' : 'none'
-      })
-      if (helper.state.query) helper.search()
+    if (typeof highlightObj === 'string') {
+      return highlightObj.trim()
     }
-  })
 
-  const widgets = [
-    instantsearch.widgets.configure({ hitsPerPage }),
-    instantsearch.widgets.searchBox({
-      container: '#algolia-search-input',
-      showReset: false,
-      showSubmit: false,
-      placeholder: languages.input_placeholder,
-      showLoadingIndicator: true
-    }),
-    instantsearch.widgets.hits({
-      container: '#algolia-hits',
-      templates: {
-        item (data) {
-          const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
-          const result = data._highlightResult
-          const content = result.contentStripTruncate
-            ? cutContent(result.contentStripTruncate.value)
-            : result.contentStrip
-              ? cutContent(result.contentStrip.value)
-              : result.content
-                ? cutContent(result.content.value)
-                : ''
-          return `
-            <a href="${link}" class="algolia-hit-item-link">
-              <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
-              ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
-            </a>`
-        },
-        empty (data) {
-          return `<div id="algolia-hits-empty">${languages.hits_empty.replace(/\$\{query}/, data.query)}</div>`
+    if (typeof highlightObj === 'object' && highlightObj.value !== undefined) {
+      return String(highlightObj.value).trim()
+    }
+
+    return ''
+  }
+
+  // Initialize Algolia client
+  let searchClient
+
+  if (window['algoliasearch/lite'] && typeof window['algoliasearch/lite'].liteClient === 'function') {
+    searchClient = window['algoliasearch/lite'].liteClient(appId, apiKey)
+  } else if (typeof window.algoliasearch === 'function') {
+    searchClient = window.algoliasearch(appId, apiKey)
+  } else {
+    return console.error('Algolia search client not found!')
+  }
+
+  if (!searchClient) {
+    return console.error('Failed to initialize Algolia search client')
+  }
+
+  // Search state
+  let currentQuery = ''
+
+  // Show loading state
+  const showLoading = show => {
+    const loadingIndicator = document.getElementById('loading-status')
+    if (loadingIndicator) {
+      loadingIndicator.hidden = !show
+    }
+  }
+
+  // Cache frequently used elements
+  const elements = {
+    get searchInput () { return document.querySelector('#algolia-search-input .ais-SearchBox-input') },
+    get hits () { return document.getElementById('algolia-hits') },
+    get hitsEmpty () { return document.getElementById('algolia-hits-empty') },
+    get hitsList () { return document.querySelector('#algolia-hits .ais-Hits-list') },
+    get hitsWrapper () { return document.querySelector('#algolia-hits .ais-Hits') },
+    get pagination () { return document.getElementById('algolia-pagination') },
+    get paginationList () { return document.querySelector('#algolia-pagination .ais-Pagination-list') },
+    get stats () { return document.querySelector('#algolia-info .ais-Stats-text') },
+  }
+
+  // Show/hide search results area
+  const toggleResultsVisibility = hasResults => {
+    elements.pagination.style.display = hasResults ? '' : 'none'
+    elements.stats.style.display = hasResults ? '' : 'none'
+  }
+
+  // Render search results
+  const renderHits = (hits, query, page = 0) => {
+    if (hits.length === 0 && query) {
+      elements.hitsEmpty.textContent = languages.hits_empty.replace(/\$\{query}/, query)
+      elements.hitsEmpty.style.display = ''
+      elements.hitsWrapper.style.display = 'none'
+      elements.stats.style.display = 'none'
+      return
+    }
+
+    elements.hitsEmpty.style.display = 'none'
+
+    const hitsHTML = hits.map((hit, index) => {
+      const itemNumber = page * hitsPerPage + index + 1
+      const link = hit.permalink || (GLOBAL_CONFIG.root + hit.path)
+      const result = hit._highlightResult || hit
+
+      // Content extraction
+      let content = ''
+      try {
+        if (result.contentStripTruncate) {
+          content = cutContent(result.contentStripTruncate)
+        } else if (result.contentStrip) {
+          content = cutContent(result.contentStrip)
+        } else if (result.content) {
+          content = cutContent(result.content)
+        } else if (hit.contentStripTruncate) {
+          content = cutContent(hit.contentStripTruncate)
+        } else if (hit.contentStrip) {
+          content = cutContent(hit.contentStrip)
+        } else if (hit.content) {
+          content = cutContent(hit.content)
         }
+      } catch (error) {
+        content = ''
       }
-    }),
-    instantsearch.widgets.stats({
-      container: '#algolia-info > .algolia-stats',
-      templates: {
-        text (data) {
-          const stats = languages.hits_stats
-            .replace(/\$\{hits}/, data.nbHits)
-            .replace(/\$\{time}/, data.processingTimeMS)
-          return `<hr>${stats}`
+
+      // Title handling
+      let title = 'no-title'
+      try {
+        if (result.title) {
+          title = extractHighlightValue(result.title) || 'no-title'
+        } else if (hit.title) {
+          title = extractHighlightValue(hit.title) || 'no-title'
         }
+
+        if (!title || title === 'no-title') {
+          if (typeof hit.title === 'string' && hit.title.trim()) {
+            title = hit.title.trim()
+          } else if (hit.title && typeof hit.title === 'object' && hit.title.value) {
+            title = String(hit.title.value).trim() || 'no-title'
+          } else {
+            title = 'no-title'
+          }
+        }
+      } catch (error) {
+        title = 'no-title'
       }
-    }),
-    instantsearch.widgets.poweredBy({
-      container: '#algolia-info > .algolia-poweredBy'
-    }),
-    instantsearch.widgets.pagination({
-      container: '#algolia-pagination',
-      totalPages: 5,
-      templates: {
-        first: '<i class="fas fa-angle-double-left"></i>',
-        last: '<i class="fas fa-angle-double-right"></i>',
-        previous: '<i class="fas fa-angle-left"></i>',
-        next: '<i class="fas fa-angle-right"></i>'
+
+      return `
+        <li class="ais-Hits-item" value="${itemNumber}">
+          <a href="${link}" class="algolia-hit-item-link">
+            <span class="algolia-hits-item-title">${title}</span>
+            ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
+          </a>
+        </li>`
+    }).join('')
+
+    elements.hitsList.innerHTML = hitsHTML
+    elements.hitsWrapper.style.display = query ? '' : 'none'
+
+    if (hits.length > 0) {
+      elements.stats.style.display = ''
+    }
+  }
+
+  // Render pagination
+  const renderPagination = (page, nbPages) => {
+    if (nbPages <= 1) {
+      elements.pagination.style.display = 'none'
+      elements.paginationList.innerHTML = ''
+      return
+    }
+
+    elements.pagination.style.display = 'block'
+
+    const isFirstPage = page === 0
+    const isLastPage = page === nbPages - 1
+
+    // Responsive page display
+    const isMobile = window.innerWidth < 768
+    const maxVisiblePages = isMobile ? 3 : 5
+    let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2))
+    const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1)
+
+    // Adjust starting page to maintain max visible pages
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(0, endPage - maxVisiblePages + 1)
+    }
+
+    let pagesHTML = ''
+
+    // Only add ellipsis and first page when there are many pages
+    if (nbPages > maxVisiblePages && startPage > 0) {
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
+        </li>`
+      if (startPage > 1) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+    }
+
+    // Add middle page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      const isSelected = i === page
+      if (isSelected) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
+            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
+          </li>`
+      } else {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page">
+            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
+          </li>`
+      }
+    }
+
+    // Only add ellipsis and last page when there are many pages
+    if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
+      if (endPage < nbPages - 2) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
+        </li>`
+    }
+
+    if (nbPages > 1) {
+      elements.paginationList.innerHTML = `
+            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isFirstPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
+              }
+            </li>
+            ${pagesHTML}
+            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isLastPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
+              }
+            </li>`
+      elements.pagination.style.display = currentQuery ? '' : 'none'
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Render statistics
+  const renderStats = (nbHits, processingTimeMS, query) => {
+    if (query) {
+      const stats = languages.hits_stats
+        .replace(/\$\{hits}/, nbHits)
+        .replace(/\$\{time}/, processingTimeMS)
+      elements.stats.innerHTML = `<hr>${stats}`
+      elements.stats.style.display = ''
+    } else {
+      elements.stats.style.display = 'none'
+    }
+  }
+
+  // Perform search
+  const performSearch = async (query, page = 0) => {
+    if (!query.trim()) {
+      currentQuery = ''
+      renderHits([], '', 0)
+      renderPagination(0, 0)
+      renderStats(0, 0, '')
+      toggleResultsVisibility(false)
+      return
+    }
+
+    showLoading(true)
+    currentQuery = query
+
+    try {
+      let result
+
+      if (searchClient && typeof searchClient.search === 'function') {
+        // v5 multi-index search
+        const searchResult = await searchClient.search([{
+          indexName,
+          query,
+          params: {
+            page,
+            hitsPerPage,
+            highlightPreTag: '<mark>',
+            highlightPostTag: '</mark>',
+            attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
+          }
+        }])
+        result = searchResult.results[0]
+      } else if (searchClient && typeof searchClient.initIndex === 'function') {
+        // v4 single-index search
+        const index = searchClient.initIndex(indexName)
+        result = await index.search(query, {
+          page,
+          hitsPerPage,
+          highlightPreTag: '<mark>',
+          highlightPostTag: '</mark>',
+          attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
+        })
+      } else {
+        throw new Error('Algolia: No compatible search method available')
+      }
+
+      renderHits(result.hits || [], query, page)
+
+      const actualNbPages = result.nbHits <= hitsPerPage ? 1 : (result.nbPages || 0)
+      renderPagination(page, actualNbPages)
+      renderStats(result.nbHits || 0, result.processingTimeMS || 0, query)
+
+      const hasResults = result.hits && result.hits.length > 0
+      toggleResultsVisibility(hasResults)
+
+      // Refresh Pjax links
+      if (window.pjax) {
+        window.pjax.refresh(document.getElementById('algolia-hits'))
+      }
+    } catch (error) {
+      console.error('Algolia search error:', error)
+      renderHits([], query, page)
+      renderPagination(0, 0)
+      renderStats(0, 0, query)
+    } finally {
+      showLoading(false)
+    }
+  }
+
+  // Debounced search
+  let searchTimeout
+  const debouncedSearch = (query, delay = 300) => {
+    clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => performSearch(query), delay)
+  }
+
+  // Initialize search box and events
+  const initializeSearch = () => {
+    showLoading(false)
+
+    if (elements.searchInput) {
+      elements.searchInput.addEventListener('input', e => {
+        const query = e.target.value
+        debouncedSearch(query)
+      })
+    }
+
+    const searchForm = document.querySelector('#algolia-search-input .ais-SearchBox-form')
+    if (searchForm) {
+      searchForm.addEventListener('submit', e => {
+        e.preventDefault()
+        const query = elements.searchInput.value
+        performSearch(query)
+      })
+    }
+
+    // Pagination event delegation
+    elements.pagination.addEventListener('click', e => {
+      e.preventDefault()
+      const link = e.target.closest('a[data-page]')
+      if (link) {
+        const page = parseInt(link.dataset.page, 10)
+        if (!isNaN(page) && currentQuery) {
+          performSearch(currentQuery, page)
+        }
       }
     })
-  ]
 
-  search.addWidgets(widgets)
-  search.start()
+    // Initial state
+    toggleResultsVisibility(false)
+  }
+
+  // Initialize
+  initializeSearch()
   searchClickFn()
   searchFnOnce()
 
@@ -165,10 +559,4 @@ window.addEventListener('load', () => {
     if (!btf.isHidden($searchMask)) closeSearch()
     searchClickFn()
   })
-
-  if (window.pjax) {
-    search.on('render', () => {
-      window.pjax.refresh(document.getElementById('algolia-hits'))
-    })
-  }
 })
diff --git a/themes/butterfly/source/js/search/local-search.js b/themes/butterfly/source/js/search/local-search.js
index 1d3f268..f2ccb06 100644
--- a/themes/butterfly/source/js/search/local-search.js
+++ b/themes/butterfly/source/js/search/local-search.js
@@ -156,10 +156,10 @@ class LocalSearch {
       }
 
       slicesOfContent.forEach(slice => {
-        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
+        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p>`
       })
 
-      resultItem += '</li>'
+      resultItem += '</a></li>'
       resultItems.push({
         item: resultItem,
         id: resultItems.length,
@@ -236,40 +236,229 @@ class LocalSearch {
 
 window.addEventListener('load', () => {
 // Search
-  const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
+  const { path, top_n_per_article, unescape, languages, pagination } = GLOBAL_CONFIG.localSearch
+  const enablePagination = pagination && pagination.enable
   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 input = document.querySelector('.local-search-input input')
+  const statsItem = document.getElementById('local-search-stats')
   const $loadingStatus = document.getElementById('loading-status')
   const isXml = !path.endsWith('json')
 
+  // Pagination variables (only initialize if pagination is enabled)
+  let currentPage = 0
+  const hitsPerPage = pagination.hitsPerPage || 10
+
+  let currentResultItems = []
+
+  if (!enablePagination) {
+    // If pagination is disabled, we don't need these variables
+    currentPage = undefined
+    currentResultItems = undefined
+  }
+
+  // Cache frequently used elements
+  const elements = {
+    get pagination () { return document.getElementById('local-search-pagination') },
+    get paginationList () { return document.querySelector('#local-search-pagination .ais-Pagination-list') }
+  }
+
+  // Show/hide search results area
+  const toggleResultsVisibility = hasResults => {
+    if (enablePagination) {
+      elements.pagination.style.display = hasResults ? '' : 'none'
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Render search results for current page
+  const renderResults = (searchText, resultItems) => {
+    const container = document.getElementById('local-search-results')
+
+    // Determine items to display based on pagination mode
+    const itemsToDisplay = enablePagination
+      ? currentResultItems.slice(currentPage * hitsPerPage, (currentPage + 1) * hitsPerPage)
+      : resultItems
+
+    // Handle empty page in pagination mode
+    if (enablePagination && itemsToDisplay.length === 0 && currentResultItems.length > 0) {
+      currentPage = 0
+      renderResults(searchText, resultItems)
+      return
+    }
+
+    // Add numbering to items
+    const numberedItems = itemsToDisplay.map((result, index) => {
+      const itemNumber = enablePagination
+        ? currentPage * hitsPerPage + index + 1
+        : index + 1
+      return result.item.replace(
+        '<li class="local-search-hit-item">',
+        `<li class="local-search-hit-item" value="${itemNumber}">`
+      )
+    })
+
+    container.innerHTML = `<ol class="search-result-list">${numberedItems.join('')}</ol>`
+
+    // Update stats
+    const displayCount = enablePagination ? currentResultItems.length : resultItems.length
+    const stats = languages.hits_stats.replace(/\$\{hits}/, displayCount)
+    statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
+
+    // Handle pagination
+    if (enablePagination) {
+      const nbPages = Math.ceil(currentResultItems.length / hitsPerPage)
+      renderPagination(currentPage, nbPages, searchText)
+    }
+
+    const hasResults = resultItems.length > 0
+    toggleResultsVisibility(hasResults)
+
+    window.pjax && window.pjax.refresh(container)
+  }
+
+  // Render pagination
+  const renderPagination = (page, nbPages, query) => {
+    if (nbPages <= 1) {
+      elements.pagination.style.display = 'none'
+      elements.paginationList.innerHTML = ''
+      return
+    }
+
+    elements.pagination.style.display = 'block'
+
+    const isFirstPage = page === 0
+    const isLastPage = page === nbPages - 1
+
+    // Responsive page display
+    const isMobile = window.innerWidth < 768
+    const maxVisiblePages = isMobile ? 3 : 5
+    let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2))
+    const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1)
+
+    // Adjust starting page to maintain max visible pages
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(0, endPage - maxVisiblePages + 1)
+    }
+
+    let pagesHTML = ''
+
+    // Only add ellipsis and first page when there are many pages
+    if (nbPages > maxVisiblePages && startPage > 0) {
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
+        </li>`
+      if (startPage > 1) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+    }
+
+    // Add middle page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      const isSelected = i === page
+      if (isSelected) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
+            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
+          </li>`
+      } else {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page">
+            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
+          </li>`
+      }
+    }
+
+    // Only add ellipsis and last page when there are many pages
+    if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
+      if (endPage < nbPages - 2) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
+        </li>`
+    }
+
+    if (nbPages > 1) {
+      elements.paginationList.innerHTML = `
+            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isFirstPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
+              }
+            </li>
+            ${pagesHTML}
+            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isLastPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
+              }
+            </li>`
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Clear search results and stats
+  const clearSearchResults = () => {
+    const container = document.getElementById('local-search-results')
+    container.textContent = ''
+    statsItem.textContent = ''
+    toggleResultsVisibility(false)
+    if (enablePagination) {
+      currentResultItems = []
+      currentPage = 0
+    }
+  }
+
+  // Show no results message
+  const showNoResults = searchText => {
+    const container = document.getElementById('local-search-results')
+    container.textContent = ''
+    const statsDiv = document.createElement('div')
+    statsDiv.className = 'search-result-stats'
+    statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
+    statsItem.innerHTML = statsDiv.outerHTML
+    toggleResultsVisibility(false)
+    if (enablePagination) {
+      currentResultItems = []
+      currentPage = 0
+    }
+  }
+
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return
     let searchText = input.value.trim().toLowerCase()
     isXml && (searchText = searchText.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
-    if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+
+    if (searchText !== '') $loadingStatus.hidden = false
+
     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.textContent = ''
-      statsItem.textContent = ''
+      clearSearchResults()
     } else if (resultItems.length === 0) {
-      container.textContent = ''
-      const statsDiv = document.createElement('div')
-      statsDiv.className = 'search-result-stats'
-      statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
-      statsItem.innerHTML = statsDiv.outerHTML
+      showNoResults(searchText)
     } else {
+      // Sort results by relevance
       resultItems.sort((left, right) => {
         if (left.includedCount !== right.includedCount) {
           return right.includedCount - left.includedCount
@@ -279,14 +468,14 @@ window.addEventListener('load', () => {
         return right.id - left.id
       })
 
-      const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
-
-      container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
-      statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
-      window.pjax && window.pjax.refresh(container)
+      if (enablePagination) {
+        currentResultItems = resultItems
+        currentPage = 0
+      }
+      renderResults(searchText, resultItems)
     }
 
-    $loadingStatus.textContent = ''
+    $loadingStatus.hidden = true
   }
 
   let loadFlag = false
@@ -340,11 +529,29 @@ window.addEventListener('load', () => {
       localSearch.fetchData()
     }
     localSearch.highlightSearchWords(document.getElementById('article-container'))
+
+    // Pagination event delegation - only add if pagination is enabled
+    if (enablePagination) {
+      elements.pagination.addEventListener('click', e => {
+        e.preventDefault()
+        const link = e.target.closest('a[data-page]')
+        if (link) {
+          const page = parseInt(link.dataset.page, 10)
+          if (!isNaN(page) && currentResultItems.length > 0) {
+            currentPage = page
+            renderResults(input.value.trim().toLowerCase(), currentResultItems)
+          }
+        }
+      })
+    }
+
+    // Initial state
+    toggleResultsVisibility(false)
   }
 
   window.addEventListener('search:loaded', () => {
     const $loadDataItem = document.getElementById('loading-database')
-    $loadDataItem.nextElementSibling.style.display = 'block'
+    $loadDataItem.nextElementSibling.style.visibility = 'visible'
     $loadDataItem.remove()
   })
 
diff --git a/themes/butterfly/source/js/tw_cn.js b/themes/butterfly/source/js/tw_cn.js
index c19d69c..43228dd 100644
--- a/themes/butterfly/source/js/tw_cn.js
+++ b/themes/butterfly/source/js/tw_cn.js
@@ -12,14 +12,14 @@ document.addEventListener('DOMContentLoaded', () => {
     document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN'
   }
 
-  const translateText = (txt) => {
+  const translateText = txt => {
     if (!txt) return ''
     if (currentEncoding === 1 && targetEncoding === 2) return Simplized(txt)
     if (currentEncoding === 2 && targetEncoding === 1) return Traditionalized(txt)
     return txt
   }
 
-  const translateBody = (fobj) => {
+  const translateBody = fobj => {
     const nodes = typeof fobj === 'object' ? fobj.childNodes : document.body.childNodes
 
     for (const node of nodes) {
@@ -68,7 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const JTPYStr = () => '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾龙历志制一台皋准复猛钟注范签'
   const FTPYStr = () => '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽龍歷誌製壹臺臯準復勐鐘註範籤'
 
-  const Traditionalized = (cc) => {
+  const Traditionalized = cc => {
     let str = ''
     const ss = JTPYStr()
     const tt = FTPYStr()
@@ -80,7 +80,7 @@ document.addEventListener('DOMContentLoaded', () => {
     return str
   }
 
-  const Simplized = (cc) => {
+  const Simplized = cc => {
     let str = ''
     const ss = JTPYStr()
     const tt = FTPYStr()
diff --git a/themes/butterfly/source/js/utils.js b/themes/butterfly/source/js/utils.js
index 18a2508..4d61949 100644
--- a/themes/butterfly/source/js/utils.js
+++ b/themes/butterfly/source/js/utils.js
@@ -106,7 +106,7 @@
 
     loadComment: (dom, callback) => {
       if ('IntersectionObserver' in window) {
-        const observerItem = new IntersectionObserver((entries) => {
+        const observerItem = new IntersectionObserver(entries => {
           if (entries[0].isIntersecting) {
             callback()
             observerItem.disconnect()
@@ -249,7 +249,7 @@
                       'rotateCW',
                       'flipX',
                       'flipY',
-                      "reset"
+                      'reset'
                     ],
                     right: ['autoplay', 'thumbs', 'close']
                   }