Merge branch 'dev'

.github/FUNDING.yml

@@ -10,4 +10,4 @@ liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: ['https://buy.stripe.com/3cs6rP6YA91sbbG5kk','https://jsd.012700.xyz/gh/jerryc127/CDN/Photo/wechat.jpg'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ['https://buy.stripe.com/3cs6rP6YA91sbbG5kk'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -1,117 +1,193 @@
 <div align="right">
-<a title="Chinese" href="/README_CN.md">中文</a>
+  <a title="中文" href="/README_CN.md">中文</a>
 </div>
 
 <div align="center">
 
-<img src="./source/img/butterfly-icon.png" width="150" height="150" />
+<img src="./source/img/butterfly-icon.png" width="150" height="150" alt="Butterfly Logo" />
 
 # hexo-theme-butterfly
 
+A modern, elegant and feature-rich theme for Hexo
+
 ![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master)
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
+![dev version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
-![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
+![npm version](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83cd)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)
+![GitHub stars](https://img.shields.io/github/stars/jerryc127/hexo-theme-butterfly?style=social)
 
-📢 Demo: [Butterfly](https://butterfly.js.org/) / [CrazyWong](https://blog.crazywong.com/)
+📢 **Demo**: [Butterfly Official](https://butterfly.js.org/) | [CrazyWong's Blog](https://blog.crazywong.com/)
 
-📖 Docs: [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) / [Chinese](https://butterfly.js.org/posts/21cfbf15/)
+📖 **Documentation**: [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) | [中文文档](https://butterfly.js.org/posts/21cfbf15/)
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
+![Butterfly Theme Preview](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
 </div>
 
 ---
 
-## 💻 Installation
+## 🚀 Quick Start
 
-### GIT
+### 💾 Installation
 
-> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)
+#### Method 1: Git Installation (Recommended)
 
-Stable branch [recommend]:
+> 💡 **Tip**: If GitHub access is slow in mainland China, you can use the [Gitee Mirror](https://gitee.com/immyw/hexo-theme-butterfly.git)
 
-```
+Execute in your Hexo blog root directory:
+
+```bash
+# Install stable version (recommended)
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 
-Dev branch:
+```bash
-
+# Install development version (early access to new features)
-```
 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 
-### NPM
+#### Method 2: NPM Installation
 
-> It supports Hexo 5.0.0 or later
+> ⚠️ **Note**: NPM installation only supports Hexo 5.0.0 and above
 
-In Hexo site root directory 
+```bash
-
+npm install hexo-theme-butterfly
-```powershell
-npm i hexo-theme-butterfly
 ```
 
-## ⚙ Configuration
+### ⚙️ Theme Configuration
 
- Set theme in the hexo work folder's root config file `_config.yml`: 
+1. **Enable Theme**: Modify your Hexo configuration file `_config.yml`:
 
-> theme: butterfly
+```yaml
+theme: butterfly
+```
 
- If you don't have pug & stylus renderer, try this: 
+2. **Install Dependencies**: If you haven't installed pug and stylus renderers, please run:
 
-> npm install hexo-renderer-pug hexo-renderer-stylus
+```bash
+npm install hexo-renderer-pug hexo-renderer-stylus --save
+```
 
-## 🎉 Features
+## ✨ Theme Features
 
-- [x] Card UI Design
+### 🎨 Design Style
-- [x] Rounded Design/Squared Design
+- [x] **Card-based Design** - Modern card-style layout
-- [X] Support sub-menu
+- [x] **Rounded/Square Design** - Customizable border styles
-- [x] Two-column layout
+- [x] **Responsive Design** - Perfect adaptation to all screen sizes
-- [x] Responsive Web Design
+- [x] **Two-column Layout** - Optimized reading experience
-- [x] Dark Mode
+- [x] **Dark Mode** - Eye-friendly night mode
-- [x] Pjax
-- [x] Read Mode
-- [x] Conversion between Traditional and Simplified Chinese
-- [X] TOC catalog is available for both computers and mobile phones
-- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean), also support customization
-- [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
-- [X] Disable copy/Add a Copyright Notice to the Copied Text
-- [X] Search (Algolia Search/Local Search)
-- [x] Mathjax and Katex
-- [x] Built-in 404 page
-- [x] WordCount
-- [x] Related articles
-- [x] Displays outdated notice for a post
-- [x] Share (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/Crisp)
-- [x] Web analytics
-- [x] Google AdSense
-- [x] Webmaster Verification
-- [x] Change website colour scheme
-- [x] Typewriter Effect: activate_power_mode
-- [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest)
-- [x] Mouse click effects (Fireworks/Heart/Text)
-- [x] Preloader/Loading Animation/pace.js
-- [x] Busuanzi visitor counter
-- [x] Medium Zoom/Fancybox
-- [x] Mermaid
-- [x] Chart.js
-- [x] Justified Gallery
-- [x] Lazyload images
-- [x] Instantpage/Snackbar notification toast/PWA......
 
-## ✨ Contributors
+### 📝 Content Features
+- [x] **Multi-level Menu** - Support for secondary navigation menus
+- [x] **Reading Mode** - Focused article reading experience
+- [x] **TOC Navigation** - Desktop and mobile TOC support
+- [x] **Word Count** - Display article word count and reading time
+- [x] **Related Articles** - Smart recommendation of related content
+- [x] **Outdated Reminder** - Automatic article update status alerts
+- [x] **Traditional/Simplified Chinese** - Support for Traditional and Simplified Chinese switching
+- [x] **Tag Plugins** - Rich tag plugin support
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
+### 🔍 Search & Navigation
-  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
+- [x] **Multiple Search Options** - Algolia Search / Local Search / Docsearch
-</a>
+- [x] **Built-in 404** - Beautiful 404 error page
+- [x] **Pjax Support** - Smooth page transition experience
 
-## 📷 Screenshots
+### 🎨 Code Display
+- [x] **Syntax Highlighting** - Built-in multiple themes (darker/pale night/light/ocean)
+- [x] **Code Features** - Language display/fold expand/copy button/auto-wrap
+- [x] **Math Formulas** - Support for Mathjax and Katex
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
+### 💬 Social Interaction
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
+- [x] **Multiple Comment Systems** - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk etc.
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
+- [x] **Dual Comments Support** - Enable two comment systems simultaneously
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
+- [x] **Share Features** - Sharejs/Addtoany sharing components
+- [x] **Live Chat** - Chatra/Tidio/Crisp instant messaging
+
+### 📊 Analytics & Statistics
+- [x] **Visit Statistics** - Busuanzi counter
+- [x] **Site Analytics** - Google Analytics/Baidu Analytics/Cloudflare Analytics/Microsoft Clarity/Umami
+- [x] **Webmaster Verification** - Major search engine verification
+- [x] **Ad Support** - Google AdSense/custom ad slots
+
+### 🎪 Visual Effects
+- [x] **Typing Effects** - activate_power_mode animations
+- [x] **Background Effects** - Static ribbons/dynamic ribbons/floating ribbons/Canvas Nest
+- [x] **Mouse Effects** - Fireworks/hearts/text click effects
+- [x] **Loading Animations** - Preloader and pace.js progress bars
+- [x] **Image Effects** - Medium Zoom/Fancybox image lightbox
+- [x] **Lazy Loading** - Image lazy loading optimization
+
+### 🛠️ Advanced Features
+- [x] **PWA Support** - Progressive Web App
+- [x] **Copy Protection** - Disable text copying/copyright info append
+- [x] **Theme Customization** - Custom site color schemes
+- [x] **Chart Support** - Mermaid flowcharts/Chart.js data charts
+- [x] **Music Notation** - ABCJS music notation support
+- [x] **Music Player** - APlayer/Meting music playback
+- [x] **Article Series** - Series article organization
+- [x] **Instantpage** - Page preloading acceleration
+- [x] **Snackbar** - Elegant notification messages
+
+## 🤝 Contributors
+
+Thanks to all the developers who have contributed to the Butterfly theme!
+
+[![Contributors](https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly)](https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors)
+
+## 📸 Screenshots
+
+<div align="center">
+
+![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
+
+![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
+
+![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
+
+![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
+
+</div>
+
+
+## ⭐ Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=jerryc127/hexo-theme-butterfly&type=Date)](https://star-history.com/#jerryc127/hexo-theme-butterfly&Date)
+
+## 🤝 Building a Better Theme Together
+
+We believe **the power of open source comes from everyone's participation**! Whether you're a developer, designer, or user, you can contribute to the development of the Butterfly theme.
+
+### 💬 Get Help & Support
+
+- 🐛 **Found a bug?** → [GitHub Issues](https://github.com/jerryc127/hexo-theme-butterfly/issues) - Let's solve it together!
+- 💡 **Have ideas?** → [GitHub Discussions](https://github.com/jerryc127/hexo-theme-butterfly/discussions) - Share your creative ideas!
+- 📚 **Learning to use?** → [Official Documentation](https://butterfly.js.org/) - Detailed usage guide
+- 💬 **Real-time discussion?** → [Telegram Group](https://t.me/bu2fly) - Chat with community members
+
+### 🎯 Contributing
+
+Want to make Butterfly better? We welcome any form of contribution:
+
+- **🔧 Code Contributions** - Fix bugs, add new features, optimize performance
+- **📝 Documentation** - Improve docs, translate content, write tutorials
+- **🎨 Design Suggestions** - UI/UX improvements, theme colors, icon design
+- **🧪 Testing & Feedback** - Test new features, report issues, provide user experience
+- **💰 Financial Support** - [Sponsor the Project](https://buy.stripe.com/3cs6rP6YA91sbbG5kk) - Support long-term development
+
+## 📄 License
+
+This project is licensed under the [Apache 2.0](LICENSE) License.
+
+## 🙏 Acknowledgments
+
+This theme is developed based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody). Thanks to the original author for their excellent work that provided inspiration and foundation!
+
+Thanks to all friends who have contributed to the development of the Butterfly theme. Your support has made this theme continuously improve and progress.
+
+---
+
+<div align="center">
+
+**✨ If this theme helps you, please give us a ⭐ Star! ✨**
+</div>

README_CN.md

@@ -4,114 +4,190 @@
 
 <div align="center">
 
-<img src="./source/img/butterfly-icon.png" width="150" height="150" />
+<img src="./source/img/butterfly-icon.png" width="150" height="150" alt="Butterfly Logo" />
 
 # hexo-theme-butterfly
 
+一個適用於 Hexo 的現代化、美觀且功能豐富的主題
+
 ![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master)
-![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
+![dev version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
-![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
+![npm version](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83cd)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)
+![GitHub stars](https://img.shields.io/github/stars/jerryc127/hexo-theme-butterfly?style=social)
 
-📢 預覽: [Butterfly](https://butterfly.js.org/) / [CrazyWong](https://blog.crazywong.com/)
+📢 **在線預覽**: [Butterfly 官方](https://butterfly.js.org/) | [CrazyWong 博客](https://blog.crazywong.com/)
 
-📖 文檔: [中文](https://butterfly.js.org/posts/21cfbf15/) / [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
+📖 **完整文檔**: [中文文檔](https://butterfly.js.org/posts/21cfbf15/) | [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
+![Butterfly 主題預覽](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
 </div>
 
 ---
 
-## 💻 安裝
+## 🚀 快速開始
 
-### Git 安裝
+### 💾 安裝方式
 
-> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
+#### 方式一：Git 安裝（推薦）
 
-在博客根目錄裡安裝穩定版【推薦】
+> 💡 **提示**: 如果您在中國大陸訪問 GitHub 速度較慢，可以使用 [Gitee 鏡像](https://gitee.com/immyw/hexo-theme-butterfly.git)
 
-```powershell
+在您的 Hexo 博客根目錄下執行：
+
+```bash
+# 安裝穩定版本（推薦）
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 
-如果想要安裝比較新的dev分支，可以
+```bash
-
+# 安裝開發版本（搶先體驗新功能）
-```powershell
 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
 
-### npm 安裝
+#### 方式二：NPM 安裝
 
-> 此方法只支持Hexo 5.0.0以上版本
+> ⚠️ **注意**: NPM 安裝方式僅支援 Hexo 5.0.0 及以上版本
 
-在博客根目錄裡
+```bash
-
+npm install hexo-theme-butterfly
-```powershell
-npm i hexo-theme-butterfly
 ```
 
-## ⚙ 應用主題
+### ⚙️ 主題配置
 
-修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
+1. **啟用主題**: 修改您的 Hexo 配置檔案 `_config.yml`：
 
-```
+```yaml
 theme: butterfly
 ```
 
->如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save
+2. **安裝依賴**: 如果您尚未安裝 pug 和 stylus 渲染器，請執行：
 
-## 🎉 特色
+```bash
+npm install hexo-renderer-pug hexo-renderer-stylus --save
+```
 
-- [x] 卡片化設計
+## ✨ 主題特色
-- [x] 圓角化設計/直角化設計
-- [X] 支持二級目錄
-- [x] 雙欄設計
-- [x] 響應式主題
-- [x] 夜間模式
-- [x] Pjax
-- [x] 文章閲讀模式
-- [x] 簡體和繁體轉換
-- [X] 電腦和手機都可查看TOC目錄
-- [X] 內置多種代碼配色（darker/pale night/light/ocean），可自定義代碼配色
-- [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
-- [X] 可關閉文字複製/可開啟內容複製增加版權信息）
-- [X] 兩種搜索（ Algolia 搜索和本地搜索）
-- [x] Mathjax 和 Katex
-- [x] 內置404頁面
-- [x] 顯示字數統計
-- [x] 顯示相關文章
-- [x] 過期文章提醒
-- [x] 多種分享系統（Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
-- [x] 支持雙評論部署
-- [x] 多種在線聊天（Chatra/Tidio/Crisp）
-- [x] 多種分析系統
-- [x] 谷歌廣告/手動廣告位置
-- [x] 各種站長驗證
-- [x] 修改網站配色
-- [x] 打字特效 activate_power_mode
-- [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
-- [x] 多種鼠標點擊特效（煙花/文字/愛心）
-- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
-- [x] 不蒜子訪問統計
-- [x] 兩種大圖模式（Medium Zoom/Fancybox）
-- [x] Mermaid 圖表顯示
-- [x] Chart.js 圖表顯示
-- [x] 照片牆
-- [x] 圖片懶加載
-- [x] Instantpage/Snackbar彈窗/PWA......
 
-## ✨ 貢獻者
+### 🎨 設計風格
+- [x] **卡片化設計** - 現代化的卡片式佈局
+- [x] **圓角/直角設計** - 支援自訂邊框樣式
+- [x] **響應式設計** - 完美適配各種螢幕尺寸
+- [x] **雙欄佈局** - 優化的閱讀體驗
+- [x] **深色模式** - 護眼的夜間模式
 
-<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
+### 📝 內容功能
-  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
+- [x] **多級選單** - 支援二級導航選單
-</a>
+- [x] **閱讀模式** - 專注的文章閱讀體驗
+- [x] **目錄導航** - 電腦和手機雙端支援 TOC
+- [x] **字數統計** - 顯示文章字數和閱讀時間
+- [x] **相關文章** - 智能推薦相關內容
+- [x] **過期提醒** - 自動提示文章更新狀態
+- [x] **簡繁轉換** - 支援繁體中文和簡體中文切換
+- [x] **標籤外掛** - 豐富的標籤外掛支持
 
-## 📷 截圖
+### 🔍 搜尋與導航
+- [x] **多種搜尋** - Algolia 搜尋 / 本地搜尋 / Docsearch
+- [x] **內建 404** - 美觀的 404 錯誤頁面
+- [x] **Pjax 支援** - 流暢的頁面切換體驗
 
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
+### 🎨 程式碼展示
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
+- [x] **語法高亮** - 內建多種主題（darker/pale night/light/ocean）
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
+- [x] **程式碼功能** - 語言顯示/摺疊展開/複製按鈕/自動換行
-![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
+- [x] **數學公式** - 支援 Mathjax 和 Katex
+
+### 💬 社交互動
+- [x] **多元評論系統** - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk 等
+- [x] **雙評論支援** - 可同時啟用兩套評論系統
+- [x] **分享功能** - Sharejs/Addtoany 分享套件
+- [x] **線上客服** - Chatra/Tidio/Crisp 即時聊天
+
+### 📊 數據分析
+- [x] **訪問統計** - 不蒜子計數器
+- [x] **網站分析** - Google Analytics/百度統計/Cloudflare Analytics/Microsoft Clarity/Umami
+- [x] **站長驗證** - 各大搜尋引擎驗證
+- [x] **廣告支援** - Google AdSense/自訂廣告位
+
+### 🎪 視覺效果
+- [x] **打字特效** - activate_power_mode 動畫
+- [x] **背景特效** - 靜態彩帶/動態彩帶/飄帶效果/Canvas Nest
+- [x] **滑鼠特效** - 煙花/愛心/文字點擊效果
+- [x] **載入動畫** - Preloader 和 pace.js 進度條
+- [x] **圖片效果** - Medium Zoom/Fancybox 圖片燈箱
+- [x] **懶載入** - 圖片延遲載入優化
+
+### 🛠️ 進階功能
+- [x] **PWA 支援** - 漸進式網頁應用
+- [x] **複製保護** - 可關閉文字複製/版權資訊追加
+- [x] **主題定製** - 自訂網站配色方案
+- [x] **圖表支援** - Mermaid 流程圖/Chart.js 數據圖表
+- [x] **音樂符號** - ABCJS 音樂記譜法支援
+- [x] **音樂播放器** - APlayer/Meting 音樂播放功能
+- [x] **系列文章** - 系列文章組織功能
+- [x] **Instantpage** - 頁面預載入加速
+- [x] **Snackbar** - 優雅的提示訊息
+
+## 🤝 貢獻者
+
+感謝所有為 Butterfly 主題做出貢獻的開發者們！
+
+[![Contributors](https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly)](https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors)
+
+## 📸 主題截圖
+
+<div align="center">
+
+![主題展示](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
+
+![主題展示](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
+
+![主題展示](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
+
+![主題展示](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
+
+</div>
+
+
+## ⭐ Star 趨勢
+
+[![Star History Chart](https://api.star-history.com/svg?repos=jerryc127/hexo-theme-butterfly&type=Date)](https://star-history.com/#jerryc127/hexo-theme-butterfly&Date)
+
+## 🤝 一起構建更美好的主題
+
+我們相信，**開源的力量來自於每一個人的參與**！無論您是開發者、設計師還是用戶，都可以為 Butterfly 主題的發展貢獻力量。
+
+### 💬 獲取幫助與支援
+
+- 🐛 **發現問題？** → [GitHub Issues](https://github.com/jerryc127/hexo-theme-butterfly/issues) - 讓我們一起解決！
+- 💡 **有好想法？** → [GitHub Discussions](https://github.com/jerryc127/hexo-theme-butterfly/discussions) - 分享您的創意想法！
+- 📚 **學習使用？** → [官方文檔](https://butterfly.js.org/) - 詳細的使用指南
+- 💬 **即時討論？** → [Telegram 群組](https://t.me/bu2fly) - 與社群成員實時交流
+
+### 🎯 參與貢獻
+
+想要讓 Butterfly 變得更好嗎？我們歡迎您的任何形式的貢獻：
+
+- **🔧 代碼貢獻** - 修復 Bug、添加新功能、優化性能
+- **📝 文檔完善** - 改進文檔、翻譯內容、撰寫教程
+- **🎨 設計建議** - UI/UX 改進、主題配色、圖示設計
+- **🧪 測試反饋** - 測試新功能、回報問題、提供使用體驗
+- **💰 資金支援** - [贊助項目](https://buy.stripe.com/3cs6rP6YA91sbbG5kk) - 支持長期發展
+
+## 📄 授權條款
+
+本專案採用 [Apache 2.0](LICENSE) 授權條款。
+
+## 🙏 致敬與感謝
+
+本主題基於 [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) 進行開發，感謝原作者的精彩創作為我們提供了靈感與基礎！
+
+感謝所有為 Butterfly 主題發展做出貢獻的朋友們，是你們的支持讓這個主題能夠不斷完善與進步。
+
+---
+
+<div align="center">
+
+**✨ 如果這個主題對您有幫助，請給我們一個 ⭐ Star！✨**
+</div>

_config.yml

@@ -488,6 +488,11 @@ search:
     top_n_per_article: 1
     # Unescape html strings to the readable one.
     unescape: false
+    # Enable pagination for search results
+    pagination:
+      enable: false
+      # Number of search results per page
+      hitsPerPage: 8
     CDN:
 
   # Docsearch
@@ -694,6 +699,7 @@ umami_analytics:
   enable: false
   # For self-hosted setups, configure the hostname of the Umami instance
   serverURL:
+  script_name: script.js
   website_id:
   option:
   UV_PV:
@@ -1033,7 +1039,11 @@ Open_Graph_meta:
 
 # Structured Data
 # https://developers.google.com/search/docs/guides/intro-structured-data
-structured_data: true
+structured_data:
+  enable: false
+  # Alternate name for the site, used in structured data
+  # Format: ['name1', 'name2']
+  alternate_name:
 
 # Add the vendor prefixes to ensure compatibility
 css_prefix: true
@@ -1093,7 +1103,6 @@ CDN:
     # gitalk_css:
     # giscus:
     # instantpage:
-    # instantsearch:
     # katex:
     # katex_copytex:
     # lazyload:

languages/default.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: Previous
   next: Next
+  page_info: 'Page ${current} of ${total}' 
 
 comment: Comments
 

languages/en.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: Previous
   next: Next
+  page_info: 'Page ${current} of ${total}'
 
 comment: Comments
 

languages/ja.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: 前へ
   next: 次へ
+  page_info: '${current} ページ / 合計 ${total} ページ'
 
 comment: コメント
 

languages/ko.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: 이전
   next: 다음
+  page_info: '${current} 페이지 / 총 ${total} 페이지'
 
 comment: 댓글
 

languages/zh-CN.yml

@@ -49,6 +49,7 @@ search:
 pagination:
   prev: 上一篇
   next: 下一篇
+  page_info: '第 ${current} 頁 / 共 ${total} 頁'
 
 comment: 评论
 

languages/zh-HK.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: 上一頁
   next: 下一頁
+  page_info: '第 ${current} 頁 / 共 ${total} 頁'
 
 comment: 評論
 

languages/zh-TW.yml

@@ -48,6 +48,7 @@ search:
 pagination:
   prev: 上一篇
   next: 下一篇
+  page_info: '第 ${current} 頁 / 共 ${total} 頁'
 
 comment: 評論
 

layout/includes/head/config.pug

@@ -10,7 +10,6 @@
       hitsPerPage: theme.search.algolia_search.hitsPerPage,
       // search languages
       languages: {
-        input_placeholder: theme.search.placeholder || _p("search.input_placeholder"),
         hits_empty: _p("search.algolia_search.hits_empty"),
         hits_stats: _p("search.algolia_search.hits_stats"),
       }
@@ -19,12 +18,16 @@
 
   let localSearch = 'undefined'
   if (theme.search.use === 'local_search') {
-    const { CDN, preload, top_n_per_article, unescape } = theme.search.local_search
+    const { CDN, preload, top_n_per_article, pagination, unescape } = theme.search.local_search
     localSearch = JSON.stringify({
       path: CDN || config.root + config.search.path,
       preload,
       top_n_per_article,
       unescape,
+      pagination: {
+        enable: pagination.enable,
+        hitsPerPage: pagination.hitsPerPage
+      },
       languages: {
         // search languages
         hits_empty: _p("search.local_search.hits_empty"),

layout/includes/head/structured_data.pug

@@ -40,10 +40,22 @@ if theme.structured_data
       const isRootOrSubdomain = currentPath.split('/').filter(Boolean).length === 0;
 
       if (isRootOrSubdomain) {
+        const domain = new URL(config.url).hostname;
+        const alternateNames = theme.structured_data.alternate_name || [];
+
+        if (config.subtitle) {
+          alternateNames.push(config.subtitle);
+        }
+
+        if (domain) {
+          alternateNames.push(domain);
+        }
+
         const jsonLd = {
           "@context": "https://schema.org",
           "@type": "WebSite",
           "name": config.title,
+          "alternateName": alternateNames,
           "url": full_url_for('/'),
         }
 

layout/includes/page/shuoshuo.pug

@@ -9,40 +9,43 @@
 - page.toc = false
 
 #article-container
-  if page.comments !== false && theme.comments.use
+  if page.shuoshuo_url || (site.data.shuoshuo && site.data.shuoshuo.length)
-    - commentsJsLoad = true
+    if page.comments !== false && theme.comments.use
+      - commentsJsLoad = true
 
-    script.
+      script.
-      (() => {
+        (() => {
-        const commentDiv = `!{partial('includes/third-party/comments/index', {}, {cache: true})}`
+          const commentDiv = `!{partial('includes/third-party/comments/index', {}, {cache: true})}`
 
-        const runDestroy = (shuoshuoComment) => {
+          const runDestroy = (shuoshuoComment) => {
-          if (!shuoshuoComment) return
+            if (!shuoshuoComment) return
 
-          for (const [key, fn] of Object.entries(shuoshuoComment)) {
+            for (const [key, fn] of Object.entries(shuoshuoComment)) {
-            if (key.startsWith('destroy')) fn()
+              if (key.startsWith('destroy')) fn()
+            }
           }
-        }
 
-        window.addCommentToShuoshuo = e => {
+          window.addCommentToShuoshuo = e => {
-          const btn = e.target.closest('.shuoshuo-comment-btn')
+            const btn = e.target.closest('.shuoshuo-comment-btn')
-          if (!btn) return
+            if (!btn) return
 
-          const ele = btn.closest('.container').nextElementSibling
+            const ele = btn.closest('.container').nextElementSibling
-          const { shuoshuoComment } = window
+            const { shuoshuoComment } = window
-          const isInclude = ele.classList.contains('no-comment')
+            const isInclude = ele.classList.contains('no-comment')
-          runDestroy(shuoshuoComment)
+            runDestroy(shuoshuoComment)
-          if (isInclude) {
+            if (isInclude) {
-            ele.classList.remove('no-comment')
+              ele.classList.remove('no-comment')
-            ele.innerHTML = commentDiv
+              ele.innerHTML = commentDiv
-            const key = `${location.pathname.replace(/\/$/, '')}?key=${ele.getAttribute('data-key')}`
+              const key = `${location.pathname.replace(/\/$/, '')}?key=${ele.getAttribute('data-key')}`
-            btf.switchComments(ele, key)
+              btf.switchComments(ele, key)
-            shuoshuoComment.loadComment && shuoshuoComment.loadComment(ele, key)
+              shuoshuoComment.loadComment && shuoshuoComment.loadComment(ele, key)
+            }
           }
-        }
+        })()
-      })()
+
+
+    - const localDate = page.shuoshuo_url ? [] : shuoshuoFN(site.data.shuoshuo, page)
 
-  if page.shuoshuo_url
     script.
       (() => {
         const limitConfig = !{ JSON.stringify(page.limit || {}) }
@@ -78,84 +81,213 @@
           return `${year}-${month}-${day} ${hour}:${minute}:${second}`
         }
 
+        let currentPage = 1
+        const itemsPerPage = 8
+        let totalPages = 0
+        let data = []
+        let inputEventsAttached = false // Flag to mark if input event listeners have been added
+
+        const renderData = (dataSlice) => {
+          const content = dataSlice.map(item => {
+            const formattedDate = formatToTimeZone(item.date)
+            const tags = item.tags && item.tags.map(tag => `<span class="shuoshuo-tag">${tag}</span>`).join('') || ''
+            const commentButton = item.key && !{commentsJsLoad}
+              ? `<div class="shuoshuo-comment-btn" onclick="addCommentToShuoshuo(event)">
+                  <i class="fa-solid fa-comments"></i>
+                </div>`
+              : ''
+            const commentContainer = item.key
+              ? `<div class="shuoshuo-comment no-comment" data-key="${item.key}"></div>`
+              : ''
+
+            return `
+              <div class="shuoshuo-item">
+                <div class="container">
+                  <div class="shuoshuo-item-header">
+                    <div class="shuoshuo-avatar">
+                      <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
+                    </div>
+                    <div class="shuoshuo-info">
+                      <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
+                      <time class="shuoshuo-date" title="${formattedDate}">
+                        ${btf.diffDate(formattedDate, true)}
+                      </time>
+                    </div>
+                  </div>
+                  <div class="shuoshuo-content">${item.content}</div>
+                  <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
+                    ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
+                    ${commentButton}
+                  </div>
+                </div>
+                ${commentContainer}
+              </div>`
+          }).join('')
+
+          const container = document.getElementById('article-container')
+          container.innerHTML = content
+
+          window.lazyLoadInstance && window.lazyLoadInstance.update()
+          btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
+        }
+
+        const renderNavigation = () => {
+          const container = document.getElementById('article-container')
+          const existingNav = container.nextElementSibling
+          if (existingNav && existingNav.classList.contains('shuoshuo-navigation')) {
+            existingNav.remove()
+          }
+
+          const pageInfoTemplate = '#{__('pagination.page_info')}'
+          const pageInfoText = pageInfoTemplate
+            .replace(/\$\{current}/g, currentPage)
+            .replace(/\$\{total}/g, totalPages)
+
+          const navHtml = `
+            <div class="shuoshuo-navigation">
+              <button onclick="window.shuoshuoPrevPage()" ${currentPage === 1 ? 'disabled' : ''}><i class="fa-solid fa-chevron-left"></i></button>
+              <span class="shuoshuo-page-info">${pageInfoText}</span>
+              <input type="number" class="shuoshuo-page-input" min="1" max="${totalPages}" placeholder="${currentPage}" onkeydown="window.shuoshuoHandleKeyDown(event)">
+              <button onclick="window.shuoshuoNextPage()" ${currentPage === totalPages ? 'disabled' : ''}><i class="fa-solid fa-chevron-right"></i></button>
+            </div>
+          `
+          container.insertAdjacentHTML('afterend', navHtml)
+
+          // Add input validation event listeners (only once)
+          if (!inputEventsAttached) {
+            setTimeout(() => {
+              const input = document.querySelector('.shuoshuo-page-input')
+              if (input) {
+                // Clear placeholder when clicking the input box
+                input.addEventListener('focus', (event) => {
+                  event.target.placeholder = ''
+                })
+
+                // Restore placeholder if no content when losing focus
+                input.addEventListener('blur', (event) => {
+                  if (!event.target.value.trim()) {
+                    event.target.placeholder = currentPage
+                  }
+                })
+
+                input.addEventListener('input', (event) => {
+                  const value = parseInt(event.target.value) || 0
+                  let wasInvalid = false
+
+                  if (value > totalPages) {
+                    event.target.value = totalPages
+                    wasInvalid = true
+                  } else if (value < 1 && event.target.value !== '') {
+                    event.target.value = 1
+                    wasInvalid = true
+                  }
+
+                  // If value is corrected, show red and shake effect
+                  if (wasInvalid) {
+                    event.target.classList.add('invalid')
+                    setTimeout(() => {
+                      event.target.classList.remove('invalid')
+                    }, 500)
+                  }
+                })
+
+                inputEventsAttached = true // Mark that event listeners have been added
+              }
+            }, 0)
+          }
+        }
+
+        const renderPage = (page) => {
+          const start = (page - 1) * itemsPerPage
+          const end = start + itemsPerPage
+          const pageData = data.slice(start, end)
+          renderData(pageData)
+          renderNavigation()
+        }
+
+        window.shuoshuoPrevPage = () => {
+          if (currentPage > 1) {
+            currentPage--
+            renderPage(currentPage)
+          }
+        }
+
+        window.shuoshuoNextPage = () => {
+          if (currentPage < totalPages) {
+            currentPage++
+            renderPage(currentPage)
+          }
+        }
+
+        window.shuoshuoGoToPage = (page) => {
+          if (typeof page === 'number') {
+            // Directly jump to the specified page
+            if (page >= 1 && page <= totalPages && page !== currentPage) {
+              currentPage = page
+              renderPage(currentPage)
+            }
+          } else {
+            // Get page from input box
+            const input = document.querySelector('.shuoshuo-page-input')
+            const inputValue = input.value.trim()
+            const inputPage = inputValue === '' ? currentPage : parseInt(inputValue)
+            if (inputPage >= 1 && inputPage <= totalPages && inputPage !== currentPage) {
+              currentPage = inputPage
+              renderPage(currentPage)
+            } else if (inputValue === '') {
+              // If input box is empty, re-render current page (update placeholder)
+              renderPage(currentPage)
+            }
+          }
+        }
+
+        window.shuoshuoHandleKeyDown = (event) => {
+          const input = event.target
+          const value = input.value + event.key
+
+          // Allow delete, arrow keys, backspace, etc.
+          if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete' ||
+              event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
+              event.key === 'Tab' || event.ctrlKey || event.metaKey) {
+            if (event.key === 'Enter') {
+              window.shuoshuoGoToPage()
+            }
+            return
+          }
+
+          // Only allow numbers
+          if (!/^\d$/.test(event.key)) {
+            event.preventDefault()
+            return
+          }
+
+          // Check if the value after input exceeds the range
+          const newValue = parseInt(value) || 0
+          if (newValue > totalPages || (value.length > 1 && newValue === 0)) {
+            event.preventDefault()
+            // Add red and shake effect
+            input.classList.add('invalid')
+            setTimeout(() => {
+              input.classList.remove('invalid')
+            }, 500)
+          }
+        }
+
         const loadShuoshuo = async () => {
           try {
-            const response = await fetch('!{url_for(page.shuoshuo_url)}')
+            let originData = []
-            let data = await response.json()
+            if (!{Boolean(page.shuoshuo_url)}) {
-
+              const response = await fetch('!{url_for(page.shuoshuo_url)}')
-            data = filterDataByLimit(sortDataByDate(data), limitConfig)
+              originData = await response.json()
-
+            } else {
-            const container = document.getElementById('article-container')
+              originData = !{JSON.stringify(localDate)}
-            let start = 0
-
-            const renderData = (dataSlice) => {
-              const content = dataSlice.map(item => {
-                const formattedDate = formatToTimeZone(item.date)
-                const tags = item.tags && item.tags.map(tag => `<span class="shuoshuo-tag">${tag}</span>`).join('') || ''
-                const commentButton = item.key && !{commentsJsLoad}
-                  ? `<div class="shuoshuo-comment-btn" onclick="addCommentToShuoshuo(event)">
-                      <i class="fa-solid fa-comments"></i>
-                    </div>`
-                  : ''
-                const commentContainer = item.key
-                  ? `<div class="shuoshuo-comment no-comment" data-key="${item.key}"></div>`
-                  : ''
-
-                return `
-                  <div class="shuoshuo-item">
-                    <div class="container">
-                      <div class="shuoshuo-item-header">
-                        <div class="shuoshuo-avatar">
-                          <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
-                        </div>
-                        <div class="shuoshuo-info">
-                          <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
-                          <time class="shuoshuo-date" title="${formattedDate}">
-                            ${btf.diffDate(formattedDate, true)}
-                          </time>
-                        </div>
-                      </div>
-                      <div class="shuoshuo-content">${item.content}</div>
-                      <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
-                        ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
-                        ${commentButton}
-                      </div>
-                    </div>
-                    ${commentContainer}
-                  </div>`
-              }).join('')
-
-              container.insertAdjacentHTML('beforeend', content)
-
-              window.lazyLoadInstance.update()
-              btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
             }
 
-            const handleIntersection = (entries) => {
+            data = filterDataByLimit(sortDataByDate(originData), limitConfig)
-              if (!entries[0].isIntersecting) return
-              observer.unobserve(entries[0].target)
 
-              const slice = data.slice(start, start + 10)
+            totalPages = Math.ceil(data.length / itemsPerPage)
-              renderData(slice)
-              start += 10
 
-              if (start < data.length) {
+            renderPage(currentPage)
-                setTimeout(() => observer.observe(container.lastElementChild), 100)
-              } else {
-                observer.disconnect()
-              }
-            };
-
-            const observer = new IntersectionObserver(handleIntersection, {
-              root: null,
-              rootMargin: '0px',
-              threshold: 1.0
-            })
-
-            renderData(data.slice(start, 10))
-            start += 10
-
-            if (container.lastElementChild) observer.observe(container.lastElementChild)
           } catch (error) {
             console.error(error)
           }
@@ -163,26 +295,3 @@
 
         window.pjax ? loadShuoshuo() : window.addEventListener('load', loadShuoshuo)
       })()
-  else
-    if site.data.shuoshuo
-      each i in shuoshuoFN(site.data.shuoshuo, page)
-        .shuoshuo-item
-          .container
-            .shuoshuo-item-header
-              .shuoshuo-avatar
-                img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
-              .shuoshuo-info
-                .shuoshuo-author=i.author || config.author
-                time.shuoshuo-date(title=i.date)=i.date
-            .shuoshuo-content
-              !=markdown(i.content)
-            .shuoshuo-footer(class=i.tags && i.tags.length ? 'flex-between' : 'flex-end')
-              if i.tags
-                .shuoshuo-tags
-                  each tag in i.tags
-                    span.shuoshuo-tag=tag
-              if i.key && commentsJsLoad
-                .shuoshuo-comment-btn(onclick='addCommentToShuoshuo(event)')
-                  i.fa-solid.fa-comments
-          if i.key && commentsJsLoad
-            .shuoshuo-comment.no-comment(data-key=i.key)

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

@@ -1,19 +1,50 @@
-//- Mathjax 3
+//- Mathjax 4/5
 - const { tags, enableMenu } = theme.math.mathjax
 script.
   (() => {
     const loadMathjax = () => {
       if (!window.MathJax) {
         window.MathJax = {
+          loader: {
+            load: [
+              // Four font extension packages (optional)
+              //- '[tex]/bbm',
+              //- '[tex]/bboldx',
+              //- '[tex]/dsfont',
+              '[tex]/mhchem'
+            ],
+            paths: {
+              'mathjax-newcm': '[mathjax]/../@mathjax/mathjax-newcm-font',
+
+              //- // Four font extension packages (optional)
+              //- 'mathjax-bbm-extension': '[mathjax]/../@mathjax/mathjax-bbm-font-extension',
+              //- 'mathjax-bboldx-extension': '[mathjax]/../@mathjax/mathjax-bboldx-font-extension',
+              //- 'mathjax-dsfont-extension': '[mathjax]/../@mathjax/mathjax-dsfont-font-extension',
+              'mathjax-mhchem-extension': '[mathjax]/../@mathjax/mathjax-mhchem-font-extension'
+            }
+          },
+          output: {
+            font: 'mathjax-newcm',
+          },
           tex: {
             inlineMath: [['$', '$'], ['\\(', '\\)']],
             tags: '!{tags}',
+            packages: {
+              '[+]': [
+                'mhchem'
+              ]
+            }
           },
           chtml: {
             scale: 1.1
           },
           options: {
             enableMenu: !{enableMenu},
+            menuOptions: {
+              settings: {
+                enrich: false  // Turn off Braille and voice narration text automatic generation
+              }
+            },
             renderActions: {
               findScript: [10, doc => {
                 for (const node of document.querySelectorAll('script[type^="math/tex"]')) {

layout/includes/third-party/pjax.pug

@@ -29,7 +29,13 @@ script.
 
     const triggerPjaxFn = (val) => {
       if (!val) return
-      Object.values(val).forEach(fn => fn())
+      Object.values(val).forEach(fn => {
+        try {
+          fn()
+        } catch (err) {
+          console.debug('Pjax callback failed:', err)
+        }
+      })
     }
 
     document.addEventListener('pjax:send', () => {

layout/includes/third-party/search/algolia.pug

@@ -2,21 +2,33 @@
   .search-dialog
     nav.search-nav
       span.search-dialog-title= _p('search.title')
+      i.fas.fa-spinner.fa-pulse#loading-status(hidden)
       button.search-close-button
         i.fas.fa-times
 
-    .search-wrap
+    #algolia-search-input
-      #algolia-search-input
+      .ais-SearchBox
+        form.ais-SearchBox-form(action="" role="search" novalidate="")
+          input.ais-SearchBox-input(type="search" placeholder=theme.search.placeholder || _p("search.input_placeholder") autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" maxlength="512" aria-label="Search")
+          button.ais-SearchBox-submit(type="submit" title="Submit the search query" style="display:none;")
+            svg.ais-SearchBox-submitIcon(width="10" height="10" viewBox="0 0 40 40" aria-hidden="true")
+              path(d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z")
       hr
       #algolia-search-results
         #algolia-hits
-        #algolia-pagination
+          #algolia-hits-empty(style="display:none;")
+          .ais-Hits(style="display:none;")
+            ol.ais-Hits-list
+        #algolia-pagination.ais-Pagination(style="display:none;")
+          ul.ais-Pagination-list
         #algolia-info
-          .algolia-stats
+          span.ais-Stats-text
-          .algolia-poweredBy
+          a.algolia-poweredBy(href="https://www.algolia.com/?utm_source=algoliasearch.js&utm_medium=website&utm_content=localhost&utm_campaign=poweredby" target="_blank" aria-label="Search by Algolia" rel="noopener noreferrer")
+            svg.ais-PoweredBy-logo(height="1.2em" viewBox="0 0 572 64" style="width: auto;")
+              path(fill="#36395A" d="M16 48.3c-3.4 0-6.3-.6-8.7-1.7A12.4 12.4 0 0 1 1.9 42C.6 40 0 38 0 35.4h6.5a6.7 6.7 0 0 0 3.9 6c1.4.7 3.3 1.1 5.6 1.1 2.2 0 4-.3 5.4-1a7 7 0 0 0 3-2.4 6 6 0 0 0 1-3.4c0-1.5-.6-2.8-1.9-3.7-1.3-1-3.3-1.6-5.9-1.8l-4-.4c-3.7-.3-6.6-1.4-8.8-3.4a10 10 0 0 1-3.3-7.9c0-2.4.6-4.6 1.8-6.4a12 12 0 0 1 5-4.3c2.2-1 4.7-1.6 7.5-1.6s5.5.5 7.6 1.6a12 12 0 0 1 5 4.4c1.2 1.8 1.8 4 1.8 6.7h-6.5a6.4 6.4 0 0 0-3.5-5.9c-1-.6-2.6-1-4.4-1s-3.2.3-4.4 1c-1.1.6-2 1.4-2.6 2.4-.5 1-.8 2-.8 3.1a5 5 0 0 0 1.5 3.6c1 1 2.6 1.7 4.7 1.9l4 .3c2.8.2 5.2.8 7.2 1.8 2.1 1 3.7 2.2 4.9 3.8a9.7 9.7 0 0 1 1.7 5.8c0 2.5-.7 4.7-2 6.6a13 13 0 0 1-5.6 4.4c-2.4 1-5.2 1.6-8.4 1.6Zm35.6 0c-2.6 0-4.8-.4-6.7-1.3a13 13 0 0 1-4.7-3.5 17.1 17.1 0 0 1-3.6-10.4v-1c0-2 .3-3.8 1-5.6a13 13 0 0 1 7.3-8.3 15 15 0 0 1 6.3-1.4A13.2 13.2 0 0 1 64 24.3c1 2.2 1.6 4.6 1.6 7.2V34H39.4v-4.3h21.8l-1.8 2.2c0-2-.3-3.7-.9-5.1a7.3 7.3 0 0 0-2.7-3.4c-1.2-.7-2.7-1.1-4.6-1.1s-3.4.4-4.7 1.3a8 8 0 0 0-2.9 3.6c-.6 1.5-.9 3.3-.9 5.4 0 2 .3 3.7 1 5.3a7.9 7.9 0 0 0 2.8 3.7c1.3.8 3 1.3 5 1.3s3.8-.5 5.1-1.3c1.3-1 2.1-2 2.4-3.2h6a11.8 11.8 0 0 1-7 8.7 16 16 0 0 1-6.4 1.2ZM80 48c-2.2 0-4-.3-5.7-1a8.4 8.4 0 0 1-3.7-3.3 9.7 9.7 0 0 1-1.3-5.2c0-2 .5-3.8 1.5-5.2a9 9 0 0 1 4.3-3.1c1.8-.7 4-1 6.7-1H89v4.1h-7.5c-2 0-3.4.5-4.4 1.4-1 1-1.6 2.1-1.6 3.6s.5 2.7 1.6 3.6c1 1 2.5 1.4 4.4 1.4 1.1 0 2.2-.2 3.2-.7 1-.4 1.9-1 2.6-2 .6-1 1-2.4 1-4.2l1.7 2.1c-.2 2-.7 3.8-1.5 5.2a9 9 0 0 1-3.4 3.3 12 12 0 0 1-5.3 1Zm9.5-.7v-8.8h-1v-10c0-1.8-.5-3.2-1.4-4.1-1-1-2.4-1.4-4.2-1.4a142.9 142.9 0 0 0-10.2.4v-5.6a74.8 74.8 0 0 1 8.6-.4c3 0 5.5.4 7.5 1.2s3.4 2 4.4 3.6c1 1.7 1.4 4 1.4 6.7v18.4h-5Zm12.9 0V17.8h5v12.3h-.2c0-4.2 1-7.4 2.8-9.5a11 11 0 0 1 8.3-3.1h1v5.6h-2a9 9 0 0 0-6.3 2.2c-1.5 1.5-2.2 3.6-2.2 6.4v15.6h-6.4Zm34.4 1a15 15 0 0 1-6.6-1.3c-1.9-.9-3.4-2-4.7-3.5a15.5 15.5 0 0 1-2.7-5c-.6-1.7-1-3.6-1-5.4v-1c0-2 .4-3.8 1-5.6a15 15 0 0 1 2.8-4.9c1.3-1.5 2.8-2.6 4.6-3.5a16.4 16.4 0 0 1 13.3.2c2 1 3.5 2.3 4.8 4a12 12 0 0 1 2 6H144c-.2-1.6-1-3-2.2-4.1a7.5 7.5 0 0 0-5.2-1.7 8 8 0 0 0-4.7 1.3 8 8 0 0 0-2.8 3.6 13.8 13.8 0 0 0 0 10.3c.6 1.5 1.5 2.7 2.8 3.6s2.8 1.3 4.8 1.3c1.5 0 2.7-.2 3.8-.8a7 7 0 0 0 2.6-2c.7-1 1-2 1.2-3.2h6.2a11 11 0 0 1-2 6.2 15.1 15.1 0 0 1-11.8 5.5Zm19.7-1v-40h6.4V31h-1.3c0-3 .4-5.5 1.1-7.6a9.7 9.7 0 0 1 3.5-4.8A9.9 9.9 0 0 1 172 17h.3c3.5 0 6 1.1 7.9 3.5 1.7 2.3 2.6 5.7 2.6 10v16.8h-6.4V29.6c0-2.1-.6-3.8-1.8-5a6.4 6.4 0 0 0-4.8-1.8c-2 0-3.7.7-5 2a7.8 7.8 0 0 0-1.9 5.5v17h-6.4Zm63.8 1a12.2 12.2 0 0 1-10.9-6.2 19 19 0 0 1-1.8-7.3h1.4v12.5h-5.1v-40h6.4v19.8l-2 3.5c.2-3.1.8-5.7 1.9-7.7a11 11 0 0 1 4.4-4.5c1.8-1 3.9-1.5 6.1-1.5a13.4 13.4 0 0 1 12.8 9.1c.7 1.9 1 3.8 1 6v1c0 2.2-.3 4.1-1 6a13.6 13.6 0 0 1-13.2 9.4Zm-1.2-5.5a8.4 8.4 0 0 0 7.9-5c.7-1.5 1.1-3.3 1.1-5.3s-.4-3.8-1.1-5.3a8.7 8.7 0 0 0-3.2-3.6 9.6 9.6 0 0 0-9.2-.2 8.5 8.5 0 0 0-3.3 3.2c-.8 1.4-1.3 3-1.3 5v2.3a9 9 0 0 0 1.3 4.8 9 9 0 0 0 3.4 3c1.4.7 2.8 1 4.4 1Zm27.3 3.9-10-28.9h6.5l9.5 28.9h-6Zm-7.5 12.2v-5.7h4.9c1 0 2-.1 2.9-.4a4 4 0 0 0 2-1.4c.4-.7.9-1.6 1.2-2.7l8.6-30.9h6.2l-9.3 32.4a14 14 0 0 1-2.5 5 8.9 8.9 0 0 1-4 2.8c-1.5.6-3.4.9-5.6.9h-4.4Zm9-12.2v-5.2h6.4v5.2H248Z")
+              path(fill="#003DFF" d="M534.4 9.1H528a.8.8 0 0 1-.7-.7V1.8c0-.4.2-.7.6-.8l6.5-1c.4 0 .8.2.9.6v7.8c0 .4-.4.7-.8.7zM428 35.2V.8c0-.5-.3-.8-.7-.8h-.2l-6.4 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.5 0 .8-.4.8-.8V43c0-.4-.3-.7-.6-.8-4.5-.5-4.5-6-4.5-7zm106.5-21.8H528c-.4 0-.7.4-.7.8v34c0 .4.3.8.7.8h6.5c.4 0 .8-.4.8-.8v-34c0-.5-.4-.8-.8-.8zm-17.7 21.8V.8c0-.5-.3-.8-.8-.8l-6.5 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.4 0 .8-.4.8-.8V43c0-.4-.3-.7-.7-.8-4.4-.5-4.4-6-4.4-7zm-22.2-20.6a16.5 16.5 0 0 1 8.6 9.3c.8 2.2 1.3 4.8 1.3 7.5a19.4 19.4 0 0 1-4.6 12.6 14.8 14.8 0 0 1-5.2 3.6c-2 .9-5.2 1.4-6.8 1.4a21 21 0 0 1-6.7-1.4 15.4 15.4 0 0 1-8.6-9.3 21.3 21.3 0 0 1 0-14.4 15.2 15.2 0 0 1 8.6-9.3c2-.8 4.3-1.2 6.7-1.2s4.6.4 6.7 1.2zm-6.7 27.6c2.7 0 4.7-1 6.2-3s2.2-4.3 2.2-7.8-.7-6.3-2.2-8.3-3.5-3-6.2-3-4.7 1-6.1 3c-1.5 2-2.2 4.8-2.2 8.3s.7 5.8 2.2 7.8 3.5 3 6.2 3zm-88.8-28.8c-6.2 0-11.7 3.3-14.8 8.2a18.6 18.6 0 0 0 4.8 25.2c1.8 1.2 4 1.8 6.2 1.7s.1 0 .1 0h.9c4.2-.7 8-4 9.1-8.1v7.4c0 .4.3.7.8.7h6.4a.7.7 0 0 0 .7-.7V14.2c0-.5-.3-.8-.7-.8h-13.5zm6.3 26.5a9.8 9.8 0 0 1-5.7 2h-.5a10 10 0 0 1-9.2-14c1.4-3.7 5-6.3 9-6.3h6.4v18.3zm152.3-26.5h13.5c.5 0 .8.3.8.7v33.7c0 .4-.3.7-.8.7h-6.4a.7.7 0 0 1-.8-.7v-7.4c-1.2 4-4.8 7.4-9 8h-.1a4.2 4.2 0 0 1-.5.1h-.9a10.3 10.3 0 0 1-7-2.6c-4-3.3-6.5-8.4-6.5-14.2 0-3.7 1-7.2 3-10 3-5 8.5-8.3 14.7-8.3zm.6 28.4c2.2-.1 4.2-.6 5.7-2V21.7h-6.3a9.8 9.8 0 0 0-9 6.4 10.2 10.2 0 0 0 9.1 13.9h.5zM452.8 13.4c-6.2 0-11.7 3.3-14.8 8.2a18.5 18.5 0 0 0 3.6 24.3 10.4 10.4 0 0 0 13 .6c2.2-1.5 3.8-3.7 4.5-6.1v7.8c0 2.8-.8 5-2.2 6.3-1.5 1.5-4 2.2-7.5 2.2l-6-.3c-.3 0-.7.2-.8.5l-1.6 5.5c-.1.4.1.8.5 1h.1c2.8.4 5.5.6 7 .6 6.3 0 11-1.4 14-4.1 2.7-2.5 4.2-6.3 4.5-11.4V14.2c0-.5-.4-.8-.8-.8h-13.5zm6.3 8.2v18.3a9.6 9.6 0 0 1-5.6 2h-1a10.3 10.3 0 0 1-8.8-14c1.4-3.7 5-6.3 9-6.3h6.4zM291 31.5A32 32 0 0 1 322.8 0h30.8c.6 0 1.2.5 1.2 1.2v61.5c0 1.1-1.3 1.7-2.2 1l-19.2-17a18 18 0 0 1-11 3.4 18.1 18.1 0 1 1 18.2-14.8c-.1.4-.5.7-.9.6-.1 0-.3 0-.4-.2l-3.8-3.4c-.4-.3-.6-.8-.7-1.4a12 12 0 1 0-2.4 8.3c.4-.4 1-.5 1.6-.2l14.7 13.1v-46H323a26 26 0 1 0 10 49.7c.8-.4 1.6-.2 2.3.3l3 2.7c.3.2.3.7 0 1l-.2.2a32 32 0 0 1-47.2-28.6z")
 
   #search-mask
 
   script(src=url_for(theme.asset.algolia_search))
-  script(src=url_for(theme.asset.instantsearch))
   script(src=url_for(theme.asset.algolia_js))

layout/includes/third-party/search/local-search.pug

@@ -2,7 +2,7 @@
   .search-dialog
     nav.search-nav
       span.search-dialog-title= _p('search.title')
-      span#loading-status
+      i.fas.fa-spinner.fa-pulse#loading-status(hidden)
       button.search-close-button
         i.fas.fa-times
 
@@ -10,13 +10,15 @@
       i.fas.fa-spinner.fa-pulse
       span= '  ' + _p("search.load_data")
 
-    .search-wrap
+    .local-search-input
-      #local-search-input
+      input(placeholder=theme.search.placeholder || _p("search.input_placeholder") type="text")
-        .local-search-box
-          input(placeholder=theme.search.placeholder || _p("search.input_placeholder") type="text").local-search-box--input
-      hr
-      #local-search-results
-      #local-search-stats-wrap
-  #search-mask
 
+    hr
+
+    #local-search-results
+    #local-search-pagination.ais-Pagination(style="display:none;")
+      ul.ais-Pagination-list
+    #local-search-stats
+
+  #search-mask
   script(src=url_for(theme.asset.local_search))

layout/includes/third-party/umami_analytics.pug

@@ -1,4 +1,4 @@
-- let { serverURL, website_id, option, UV_PV } = theme.umami_analytics
+- let { serverURL, script_name, website_id, option, UV_PV } = theme.umami_analytics
 - const isServerURL = !!serverURL
 - const baseURL = serverURL ? serverURL.replace(/\/$/, '') : 'https://cloud.umami.is'
 - const apiUrl = serverURL ? serverURL.replace(/\/$/, '') + '/api' : 'https://api.umami.is/v1'
@@ -9,28 +9,51 @@ script.
     const config = !{JSON.stringify(UV_PV)}
 
     const runTrack = () => {
-      umami.track(props => ({ ...props, url: window.location.pathname, title: GLOBAL_CONFIG_SITE.title }))
+      if (typeof umami !== 'undefined' && typeof umami.track === 'function') {
+        umami.track(props => ({ ...props, url: window.location.pathname, title: GLOBAL_CONFIG_SITE.title }))
+      } else {
+        console.warn('Umami Analytics: umami.track is not available')
+      }
     }
 
     const loadUmamiJS = () => {
-      btf.getScript('!{baseURL}/script.js', {
+      btf.getScript('!{baseURL}/!{script_name}', {
         'data-website-id': '!{website_id}',
         'data-auto-track': 'false',
         ...option
-      }).then(runTrack)
+      }).then(() => {
+        runTrack()
+      }).catch(error => {
+        console.error('Umami Analytics: Error loading script', error)
+      })
     }
 
     const getData = async (isPost) => {
-      const now = Date.now()
+      try {
-      const keyUrl = isPost ? `&url=${window.location.pathname}` : ''
+        const now = Date.now()
-      const headerList = { 'Accept': 'application/json' }
+        const keyUrl = isPost ? `&url=${window.location.pathname}` : ''
-      if (!{isServerURL}) headerList['Authorization'] = `Bearer ${config.token}`
+        const headerList = { 'Accept': 'application/json' }
-      else headerList['x-umami-api-key'] = config.token
+
-      const res = await fetch(`!{apiUrl}/websites/!{website_id}/stats?startAt=0000000000&endAt=${now}${keyUrl}`, {
+        if (!{isServerURL}) {
-        method: "GET",
+          headerList['Authorization'] = `Bearer ${config.token}`
-        headers: headerList
+        } else {
-      })
+          headerList['x-umami-api-key'] = config.token
-      return await res.json()
+        }
+
+        const res = await fetch(`!{apiUrl}/websites/!{website_id}/stats?startAt=0000000000&endAt=${now}${keyUrl}`, {
+          method: "GET",
+          headers: headerList
+        })
+
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`)
+        }
+
+        return await res.json()
+      } catch (error) {
+        console.error('Umami Analytics: Failed to fetch data', error)
+        throw error
+      }
     }
 
     const insertData = async () => {
@@ -39,27 +62,49 @@ script.
           const pagePV = document.getElementById('umamiPV')
           if (pagePV) {
             const data = await getData(true)
-            pagePV.textContent = data.pageviews.value
+            if (data && data.pageviews && typeof data.pageviews.value !== 'undefined') {
-          }
+              pagePV.textContent = data.pageviews.value
-        } else {
+            } else {
-          const data = (config.site_uv || config.site_pv) && await getData()
+              console.warn('Umami Analytics: Invalid page view data received')
-          if (config.site_uv) {
+            }
-            const siteUV = document.getElementById('umami-site-uv')
-            if (siteUV) siteUV.textContent = data.visitors.value
-          }
-          if (config.site_pv) {
-            const sitePV = document.getElementById('umami-site-pv')
-            if (sitePV) sitePV.textContent = data.pageviews.value
           }
         }
-      } catch (e) {
+
-        console.error('Failed to load Umami Analytics:', e)
+        if (config.site_uv || config.site_pv) {
+          const data = await getData(false)
+
+          if (config.site_uv) {
+            const siteUV = document.getElementById('umami-site-uv')
+            if (siteUV && data && data.visitors && typeof data.visitors.value !== 'undefined') {
+              siteUV.textContent = data.visitors.value
+            } else if (siteUV) {
+              console.warn('Umami Analytics: Invalid site UV data received')
+            }
+          }
+
+          if (config.site_pv) {
+            const sitePV = document.getElementById('umami-site-pv')
+            if (sitePV && data && data.pageviews && typeof data.pageviews.value !== 'undefined') {
+              sitePV.textContent = data.pageviews.value
+            } else if (sitePV) {
+              console.warn('Umami Analytics: Invalid site PV data received')
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Umami Analytics: Failed to insert data', error)
       }
     }
 
     btf.addGlobalFn('pjaxComplete', runTrack, 'umami_analytics_run_track')
     btf.addGlobalFn('pjaxComplete', insertData, 'umami_analytics_insert')
 
+
     loadUmamiJS()
-    insertData()
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', insertData)
+    } else {
+      setTimeout(insertData, 100)
+    }
   })()

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: limit, unit: 'em'})
+        .card-tag-cloud!= cloudTags({source: site.tags, orderby: orderby, order: order, minfontsize: 1.15, maxfontsize: 1.45, limit: limit, unit: 'em', page: 'index'})
       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'})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "5.4.3",
+  "version": "5.5.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -26,7 +26,7 @@
     "hexo-renderer-pug": "^3.0.0",
     "hexo-renderer-stylus": "^3.0.1",
     "hexo-util": "^3.3.0",
-    "moment-timezone": "^0.5.48"
+    "moment-timezone": "^0.6.0"
   },
   "homepage": "https://butterfly.js.org/",
   "author": "Jerry <my@crazywong.com>",

plugins.yml

@@ -1,15 +1,15 @@
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.5.1
+  version: 6.5.2
 activate_power_mode:
   name: butterfly-extsrc
   file: dist/activate-power-mode.min.js
-  version: 1.1.4
+  version: 1.1.6
 algolia_search:
   name: algoliasearch
   file: dist/lite/builds/browser.umd.js
-  version: 5.34.1
+  version: 5.37.0
 aplayer_css:
   name: aplayer
   file: dist/APlayer.min.css
@@ -33,15 +33,15 @@ blueimp_md5:
 canvas_fluttering_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-fluttering-ribbon.min.js
-  version: 1.1.4
+  version: 1.1.6
 canvas_nest:
   name: butterfly-extsrc
   file: dist/canvas-nest.min.js
-  version: 1.1.4
+  version: 1.1.6
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
-  version: 1.1.4
+  version: 1.1.6
 chartjs:
   name: chart.js
   file: dist/chart.umd.js
@@ -49,11 +49,11 @@ chartjs:
 clickShowText:
   name: butterfly-extsrc
   file: dist/click-show-text.min.js
-  version: 1.1.4
+  version: 1.1.6
 click_heart:
   name: butterfly-extsrc
   file: dist/click-heart.min.js
-  version: 1.1.4
+  version: 1.1.6
 disqusjs:
   name: disqusjs
   file: dist/browser/disqusjs.es2015.umd.min.js
@@ -80,22 +80,22 @@ egjs_infinitegrid:
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 6.0.17
+  version: 6.0.29
   other_name: fancyapps-ui
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 6.0.17
+  version: 6.0.29
   other_name: fancyapps-ui
 fireworks:
   name: butterfly-extsrc
   file: dist/fireworks.min.js
-  version: 1.1.4
+  version: 1.1.6
 fontawesome:
   name: '@fortawesome/fontawesome-free'
   file: css/all.min.css
   other_name: font-awesome
-  version: 6.7.2
+  version: 7.0.1
 gitalk:
   name: gitalk
   file: dist/gitalk.min.js
@@ -108,10 +108,6 @@ instantpage:
   name: instant.page
   file: instantpage.js
   version: 5.2.0
-instantsearch:
-  name: instantsearch.js
-  file: dist/instantsearch.production.min.js
-  version: 4.79.2
 katex:
   name: katex
   file: dist/katex.min.css
@@ -128,8 +124,8 @@ lazyload:
   version: 19.1.3
 mathjax:
   name: mathjax
-  file: es5/tex-mml-chtml.js
+  file: tex-mml-chtml.js
-  version: 3.2.2
+  version: 4.0.0
 medium_zoom:
   name: medium-zoom
   file: dist/medium-zoom.min.js
@@ -137,11 +133,11 @@ medium_zoom:
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 11.9.0
+  version: 11.11.0
 meting_js:
   name: butterfly-extsrc
   file: metingjs/dist/Meting.min.js
-  version: 1.1.4
+  version: 1.1.6
 pace_default_css:
   name: pace-js
   other_name: pace
@@ -174,11 +170,11 @@ prismjs_lineNumber_js:
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
-  version: 1.1.4
+  version: 1.1.6
 sharejs_css:
   name: butterfly-extsrc
   file: sharejs/dist/css/share.min.css
-  version: 1.1.4
+  version: 1.1.6
 snackbar:
   name: node-snackbar
   file: dist/snackbar.min.js

scripts/common/default_config.js

@@ -0,0 +1,598 @@
+// Butterfly 主題默認配置
+// Default configuration for Butterfly theme
+
+module.exports = {
+  nav: {
+    logo: null,
+    display_title: true,
+    display_post_title: true,
+    fixed: false
+  },
+  menu: null,
+  code_blocks: {
+    theme: 'light',
+    macStyle: false,
+    height_limit: false,
+    word_wrap: false,
+    copy: true,
+    language: true,
+    shrink: false,
+    fullpage: false
+  },
+  social: null,
+  favicon: '/img/favicon.png',
+  avatar: {
+    img: '/img/butterfly-icon.png',
+    effect: false
+  },
+  disable_top_img: false,
+  default_top_img: null,
+  index_img: null,
+  archive_img: null,
+  tag_img: null,
+  tag_per_img: null,
+  category_img: null,
+  category_per_img: null,
+  footer_img: false,
+  background: null,
+  cover: {
+    index_enable: true,
+    aside_enable: true,
+    archives_enable: true,
+    default_cover: null
+  },
+  error_img: {
+    flink: '/img/friend_404.gif',
+    post_page: '/img/404.jpg'
+  },
+  error_404: {
+    enable: false,
+    subtitle: 'Page Not Found',
+    background: '/img/error-page.png'
+  },
+  post_meta: {
+    page: {
+      date_type: 'created',
+      date_format: 'date',
+      categories: true,
+      tags: false,
+      label: true
+    },
+    post: {
+      position: 'left',
+      date_type: 'both',
+      date_format: 'date',
+      categories: true,
+      tags: true,
+      label: true
+    }
+  },
+  index_site_info_top: null,
+  index_top_img_height: null,
+  subtitle: {
+    enable: false,
+    effect: true,
+    typed_option: null,
+    source: false,
+    sub: null
+  },
+  index_layout: 3,
+  index_post_content: {
+    method: 3,
+    length: 500
+  },
+  toc: {
+    post: true,
+    page: false,
+    number: true,
+    expand: false,
+    style_simple: false,
+    scroll_percent: true
+  },
+  post_copyright: {
+    enable: true,
+    decode: false,
+    author_href: null,
+    license: 'CC BY-NC-SA 4.0',
+    license_url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/'
+  },
+  reward: {
+    enable: false,
+    text: null,
+    QR_code: null
+  },
+  post_edit: {
+    enable: false,
+    url: null
+  },
+  related_post: {
+    enable: true,
+    limit: 6,
+    date_type: 'created'
+  },
+  post_pagination: 1,
+  noticeOutdate: {
+    enable: false,
+    style: 'flat',
+    limit_day: 365,
+    position: 'top',
+    message_prev: 'It has been',
+    message_next: 'days since the last update, the content of the article may be outdated.'
+  },
+  footer: {
+    nav: null,
+    owner: {
+      enable: true,
+      since: 2025
+    },
+    copyright: {
+      enable: true,
+      version: true
+    },
+    custom_text: null
+  },
+  aside: {
+    enable: true,
+    hide: false,
+    button: true,
+    mobile: true,
+    position: 'right',
+    display: {
+      archive: true,
+      tag: true,
+      category: true
+    },
+    card_author: {
+      enable: true,
+      description: null,
+      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,
+      sort: 'date',
+      sort_order: null
+    },
+    card_newest_comments: {
+      enable: false,
+      sort_order: null,
+      limit: 6,
+      storage: 10,
+      avatar: true
+    },
+    card_categories: {
+      enable: true,
+      limit: 8,
+      expand: 'none',
+      sort_order: null
+    },
+    card_tags: {
+      enable: true,
+      limit: 40,
+      color: false,
+      orderby: 'random',
+      order: 1,
+      sort_order: null
+    },
+    card_archives: {
+      enable: true,
+      type: 'monthly',
+      format: 'MMMM YYYY',
+      order: -1,
+      limit: 8,
+      sort_order: null
+    },
+    card_post_series: {
+      enable: true,
+      series_title: false,
+      orderBy: 'date',
+      order: -1
+    },
+    card_webinfo: {
+      enable: true,
+      post_count: true,
+      last_push_date: true,
+      sort_order: null,
+      runtime_date: null
+    }
+  },
+  rightside_bottom: null,
+  translate: {
+    enable: false,
+    default: '繁',
+    defaultEncoding: 2,
+    translateDelay: 0,
+    msgToTraditionalChinese: '繁',
+    msgToSimplifiedChinese: '簡'
+  },
+  readmode: true,
+  darkmode: {
+    enable: true,
+    button: true,
+    autoChangeMode: false,
+    start: null,
+    end: null
+  },
+  rightside_scroll_percent: false,
+  rightside_item_order: {
+    enable: false,
+    hide: null,
+    show: null
+  },
+  rightside_config_animation: true,
+  anchor: {
+    auto_update: false,
+    click_to_scroll: false
+  },
+  photofigcaption: false,
+  copy: {
+    enable: true,
+    copyright: {
+      enable: false,
+      limit_count: 150
+    }
+  },
+  wordcount: {
+    enable: false,
+    post_wordcount: true,
+    min2read: true,
+    total_wordcount: true
+  },
+  busuanzi: {
+    site_uv: true,
+    site_pv: true,
+    page_pv: true
+  },
+  math: {
+    use: null,
+    per_page: true,
+    hide_scrollbar: false,
+    mathjax: {
+      enableMenu: true,
+      tags: 'none'
+    },
+    katex: {
+      copy_tex: false
+    }
+  },
+  search: {
+    use: null,
+    placeholder: null,
+    algolia_search: {
+      hitsPerPage: 6
+    },
+    local_search: {
+      preload: false,
+      top_n_per_article: 1,
+      unescape: false,
+      pagination: {
+        enable: false,
+        hitsPerPage: 8
+      },
+      CDN: null
+    },
+    docsearch: {
+      appId: null,
+      apiKey: null,
+      indexName: null,
+      option: null
+    }
+  },
+  share: {
+    use: 'sharejs',
+    sharejs: {
+      sites: 'facebook,twitter,wechat,weibo,qq'
+    },
+    addtoany: {
+      item: 'facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link'
+    }
+  },
+  comments: {
+    use: null,
+    text: true,
+    lazyload: false,
+    count: false,
+    card_post_count: false
+  },
+  disqus: {
+    shortname: null,
+    apikey: null
+  },
+  disqusjs: {
+    shortname: null,
+    apikey: null,
+    option: null
+  },
+  livere: {
+    uid: null
+  },
+  gitalk: {
+    client_id: null,
+    client_secret: null,
+    repo: null,
+    owner: null,
+    admin: null,
+    option: null
+  },
+  valine: {
+    appId: null,
+    appKey: null,
+    avatar: 'monsterid',
+    serverURLs: null,
+    bg: null,
+    visitor: false,
+    option: null
+  },
+  waline: {
+    serverURL: null,
+    bg: null,
+    pageview: false,
+    option: null
+  },
+  utterances: {
+    repo: null,
+    issue_term: 'pathname',
+    light_theme: 'github-light',
+    dark_theme: 'photon-dark',
+    js: null,
+    option: null
+  },
+  facebook_comments: {
+    app_id: null,
+    user_id: null,
+    pageSize: 10,
+    order_by: 'social',
+    lang: 'en_US'
+  },
+  twikoo: {
+    envId: null,
+    region: null,
+    visitor: false,
+    option: null
+  },
+  giscus: {
+    repo: null,
+    repo_id: null,
+    category_id: null,
+    light_theme: 'light',
+    dark_theme: 'dark',
+    js: null,
+    option: null
+  },
+  remark42: {
+    host: null,
+    siteId: null,
+    option: null
+  },
+  artalk: {
+    server: null,
+    site: null,
+    visitor: false,
+    option: null
+  },
+  chat: {
+    use: null,
+    rightside_button: false,
+    button_hide_show: false
+  },
+  chatra: {
+    id: null
+  },
+  tidio: {
+    public_key: null
+  },
+  crisp: {
+    website_id: null
+  },
+  google_tag_manager: {
+    tag_id: null,
+    domain: 'https://www.googletagmanager.com'
+  },
+  baidu_analytics: null,
+  google_analytics: null,
+  cloudflare_analytics: null,
+  microsoft_clarity: null,
+  umami_analytics: {
+    enable: false,
+    serverURL: null,
+    script_name: 'script.js',
+    website_id: null,
+    option: null,
+    UV_PV: {
+      site_uv: false,
+      site_pv: false,
+      page_pv: false,
+      token: null
+    }
+  },
+  google_adsense: {
+    enable: false,
+    auto_ads: true,
+    js: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
+    client: null,
+    enable_page_level_ads: true
+  },
+  ad: {
+    index: null,
+    aside: null,
+    post: null
+  },
+  site_verification: null,
+  category_ui: null,
+  tag_ui: null,
+  rounded_corners_ui: true,
+  text_align_justify: false,
+  mask: {
+    header: true,
+    footer: true
+  },
+  preloader: {
+    enable: false,
+    source: 1,
+    pace_css_url: null
+  },
+  enter_transitions: true,
+  display_mode: 'light',
+  beautify: {
+    enable: false,
+    field: 'post',
+    title_prefix_icon: null,
+    title_prefix_icon_color: null
+  },
+  font: {
+    global_font_size: null,
+    code_font_size: null,
+    font_family: null,
+    code_font_family: null
+  },
+  blog_title_font: {
+    font_link: null,
+    font_family: null
+  },
+  hr_icon: {
+    enable: true,
+    icon: null,
+    icon_top: null
+  },
+  activate_power_mode: {
+    enable: false,
+    colorful: true,
+    shake: true,
+    mobile: false
+  },
+  canvas_ribbon: {
+    enable: false,
+    size: 150,
+    alpha: 0.6,
+    zIndex: -1,
+    click_to_change: false,
+    mobile: false
+  },
+  canvas_fluttering_ribbon: {
+    enable: false,
+    mobile: false
+  },
+  canvas_nest: {
+    enable: false,
+    color: '0,0,255',
+    opacity: 0.7,
+    zIndex: -1,
+    count: 99,
+    mobile: false
+  },
+  fireworks: {
+    enable: false,
+    zIndex: 9999,
+    mobile: false
+  },
+  click_heart: {
+    enable: false,
+    mobile: false
+  },
+  clickShowText: {
+    enable: false,
+    text: null,
+    fontSize: '15px',
+    random: false,
+    mobile: false
+  },
+  lightbox: null,
+  series: {
+    enable: false,
+    orderBy: 'title',
+    order: 1,
+    number: true
+  },
+  abcjs: {
+    enable: false,
+    per_page: true
+  },
+  mermaid: {
+    enable: false,
+    code_write: false,
+    theme: {
+      light: 'default',
+      dark: 'dark'
+    }
+  },
+  chartjs: {
+    enable: false,
+    fontColor: {
+      light: 'rgba(0, 0, 0, 0.8)',
+      dark: 'rgba(255, 255, 255, 0.8)'
+    },
+    borderColor: {
+      light: 'rgba(0, 0, 0, 0.1)',
+      dark: 'rgba(255, 255, 255, 0.2)'
+    },
+    scale_ticks_backdropColor: {
+      light: 'transparent',
+      dark: 'transparent'
+    }
+  },
+  note: {
+    style: 'flat',
+    icons: true,
+    border_radius: 3,
+    light_bg_offset: 0
+  },
+  pjax: {
+    enable: false,
+    exclude: null
+  },
+  aplayerInject: {
+    enable: false,
+    per_page: true
+  },
+  snackbar: {
+    enable: false,
+    position: 'bottom-left',
+    bg_light: '#49b1f5',
+    bg_dark: '#1f1f1f'
+  },
+  instantpage: false,
+  lazyload: {
+    enable: false,
+    native: false,
+    field: 'site',
+    placeholder: null,
+    blur: false
+  },
+  pwa: {
+    enable: false,
+    manifest: null,
+    apple_touch_icon: null,
+    favicon_32_32: null,
+    favicon_16_16: null,
+    mask_icon: null
+  },
+  Open_Graph_meta: {
+    enable: true,
+    option: null
+  },
+  structured_data: {
+    enable: false,
+    alternate_name: null
+  },
+  css_prefix: true,
+  inject: {
+    head: null,
+    bottom: null
+  },
+  CDN: {
+    internal_provider: 'local',
+    third_party_provider: 'jsdelivr',
+    version: false,
+    custom_format: null,
+    option: null
+  }
+}

scripts/events/comment.js

@@ -1,24 +0,0 @@
-/**
- * Capitalize the first letter of comment name
- */
-
-hexo.extend.filter.register('before_generate', () => {
-  const themeConfig = hexo.theme.config
-  let { use } = themeConfig.comments
-  if (!use) return
-
-  // Make sure use is an array
-  use = Array.isArray(use) ? use : use.split(',')
-
-  // Capitalize the first letter of each comment name
-  use = use.map(item =>
-    item.trim().toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase())
-  )
-
-  // Disqus and Disqusjs conflict, only keep the first one
-  if (use.includes('Disqus') && use.includes('Disqusjs')) {
-    use = [use[0]]
-  }
-
-  themeConfig.comments.use = use
-})

scripts/events/init.js

@@ -1,14 +1,26 @@
-hexo.extend.filter.register('before_generate', () => {
+const { deepMerge } = require('hexo-util')
-  // Get first two digits of the Hexo version number
+const path = require('path')
-  const { version, log, locals } = hexo
-  const hexoVer = version.replace(/(^.*\..*)\..*/, '$1')
 
-  if (hexoVer < 5.3) {
+// Cache default config to avoid repeated file reads
+let cachedDefaultConfig = null
+
+/**
+ * Check Hexo version and configuration
+ */
+function checkHexoEnvironment (hexo) {
+  const { version, log, locals } = hexo
+
+  const [major, minor] = version.split('.').map(Number)
+  const requiredMajor = 5
+  const requiredMinor = 3
+
+  if (major < requiredMajor || (major === requiredMajor && minor < requiredMinor)) {
     log.error('Please update Hexo to V5.3.0 or higher!')
     log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
     process.exit(-1)
   }
 
+  // Check for deprecated configuration file
   if (locals.get) {
     const data = locals.get('data')
     if (data && data.butterfly) {
@@ -17,4 +29,58 @@ hexo.extend.filter.register('before_generate', () => {
       process.exit(-1)
     }
   }
-})
+}
+
+/**
+ * Load default configuration
+ */
+function loadDefaultConfig () {
+  if (cachedDefaultConfig) {
+    return cachedDefaultConfig
+  }
+
+  const configPath = path.join(__dirname, '../common/default_config.js')
+  cachedDefaultConfig = require(configPath)
+  return cachedDefaultConfig
+}
+
+/**
+ * Process comment system configuration
+ */
+function processCommentConfig (themeConfig) {
+  const { comments } = themeConfig
+  if (!comments || !comments.use) {
+    return
+  }
+
+  let { use } = comments
+
+  if (!Array.isArray(use)) {
+    use = typeof use === 'string' ? use.split(',') : [use]
+  }
+
+  use = use
+    .map(item => {
+      if (typeof item !== 'string') return item
+      return item.trim().toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase())
+    })
+    .filter(Boolean)
+
+  // Handle Disqus and Disqusjs conflict
+  if (use.includes('Disqus') && use.includes('Disqusjs')) {
+    hexo.log.warn('Disqus and Disqusjs conflict detected, keeping only the first one')
+    hexo.log.warn('檢測到 Disqus 和 Disqusjs 衝突，只保留第一個')
+    use = [use[0]]
+  }
+
+  themeConfig.comments.use = use
+}
+
+hexo.extend.filter.register('before_generate', () => {
+  checkHexoEnvironment(hexo)
+
+  const defaultConfig = loadDefaultConfig()
+  hexo.theme.config = deepMerge(defaultConfig, hexo.theme.config)
+
+  processCommentConfig(hexo.theme.config)
+}, 1)

scripts/events/merge_config.js

@@ -1,593 +0,0 @@
-const { deepMerge } = require('hexo-util')
-
-hexo.extend.filter.register('before_generate', () => {
-  const defaultConfig = {
-    nav: {
-      logo: null,
-      display_title: true,
-      display_post_title: true,
-      fixed: false
-    },
-    menu: null,
-    code_blocks: {
-      theme: 'light',
-      macStyle: false,
-      height_limit: false,
-      word_wrap: false,
-      copy: true,
-      language: true,
-      shrink: false,
-      fullpage: false
-    },
-    social: null,
-    favicon: '/img/favicon.png',
-    avatar: {
-      img: '/img/butterfly-icon.png',
-      effect: false
-    },
-    disable_top_img: false,
-    default_top_img: null,
-    index_img: null,
-    archive_img: null,
-    tag_img: null,
-    tag_per_img: null,
-    category_img: null,
-    category_per_img: null,
-    footer_img: false,
-    background: null,
-    cover: {
-      index_enable: true,
-      aside_enable: true,
-      archives_enable: true,
-      default_cover: null
-    },
-    error_img: {
-      flink: '/img/friend_404.gif',
-      post_page: '/img/404.jpg'
-    },
-    error_404: {
-      enable: false,
-      subtitle: 'Page Not Found',
-      background: '/img/error-page.png'
-    },
-    post_meta: {
-      page: {
-        date_type: 'created',
-        date_format: 'date',
-        categories: true,
-        tags: false,
-        label: true
-      },
-      post: {
-        position: 'left',
-        date_type: 'both',
-        date_format: 'date',
-        categories: true,
-        tags: true,
-        label: true
-      }
-    },
-    index_site_info_top: null,
-    index_top_img_height: null,
-    subtitle: {
-      enable: false,
-      effect: true,
-      typed_option: null,
-      source: false,
-      sub: null
-    },
-    index_layout: 3,
-    index_post_content: {
-      method: 3,
-      length: 500
-    },
-    toc: {
-      post: true,
-      page: false,
-      number: true,
-      expand: false,
-      style_simple: false,
-      scroll_percent: true
-    },
-    post_copyright: {
-      enable: true,
-      decode: false,
-      author_href: null,
-      license: 'CC BY-NC-SA 4.0',
-      license_url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/'
-    },
-    reward: {
-      enable: false,
-      text: null,
-      QR_code: null
-    },
-    post_edit: {
-      enable: false,
-      url: null
-    },
-    related_post: {
-      enable: true,
-      limit: 6,
-      date_type: 'created'
-    },
-    post_pagination: 1,
-    noticeOutdate: {
-      enable: false,
-      style: 'flat',
-      limit_day: 365,
-      position: 'top',
-      message_prev: 'It has been',
-      message_next: 'days since the last update, the content of the article may be outdated.'
-    },
-    footer: {
-      nav: null,
-      owner: {
-        enable: true,
-        since: 2024
-      },
-      copyright: {
-        enable: true,
-        version: true
-      },
-      custom_text: null
-    },
-    aside: {
-      enable: true,
-      hide: false,
-      button: true,
-      mobile: true,
-      position: 'right',
-      display: {
-        archive: true,
-        tag: true,
-        category: true
-      },
-      card_author: {
-        enable: true,
-        description: null,
-        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,
-        sort: 'date',
-        sort_order: null
-      },
-      card_newest_comments: {
-        enable: false,
-        sort_order: null,
-        limit: 6,
-        storage: 10,
-        avatar: true
-      },
-      card_categories: {
-        enable: true,
-        limit: 8,
-        expand: 'none',
-        sort_order: null
-      },
-      card_tags: {
-        enable: true,
-        limit: 40,
-        color: false,
-        orderby: 'random',
-        order: 1,
-        sort_order: null
-      },
-      card_archives: {
-        enable: true,
-        type: 'monthly',
-        format: 'MMMM YYYY',
-        order: -1,
-        limit: 8,
-        sort_order: null
-      },
-      card_post_series: {
-        enable: true,
-        series_title: false,
-        orderBy: 'date',
-        order: -1
-      },
-      card_webinfo: {
-        enable: true,
-        post_count: true,
-        last_push_date: true,
-        sort_order: null,
-        runtime_date: null
-      }
-    },
-    rightside_bottom: null,
-    translate: {
-      enable: false,
-      default: '繁',
-      defaultEncoding: 2,
-      translateDelay: 0,
-      msgToTraditionalChinese: '繁',
-      msgToSimplifiedChinese: '簡'
-    },
-    readmode: true,
-    darkmode: {
-      enable: true,
-      button: true,
-      autoChangeMode: false,
-      start: null,
-      end: null
-    },
-    rightside_scroll_percent: false,
-    rightside_item_order: {
-      enable: false,
-      hide: null,
-      show: null
-    },
-    rightside_config_animation: true,
-    anchor: {
-      auto_update: false,
-      click_to_scroll: false
-    },
-    photofigcaption: false,
-    copy: {
-      enable: true,
-      copyright: {
-        enable: false,
-        limit_count: 150
-      }
-    },
-    wordcount: {
-      enable: false,
-      post_wordcount: true,
-      min2read: true,
-      total_wordcount: true
-    },
-    busuanzi: {
-      site_uv: true,
-      site_pv: true,
-      page_pv: true
-    },
-    math: {
-      use: null,
-      per_page: true,
-      hide_scrollbar: false,
-      mathjax: {
-        enableMenu: true,
-        tags: 'none'
-      },
-      katex: {
-        copy_tex: false
-      }
-    },
-    search: {
-      use: null,
-      placeholder: null,
-      algolia_search: {
-        hitsPerPage: 6
-      },
-      local_search: {
-        preload: false,
-        top_n_per_article: 1,
-        unescape: false,
-        CDN: null
-      },
-      docsearch: {
-        appId: null,
-        apiKey: null,
-        indexName: null,
-        option: null
-      }
-    },
-    share: {
-      use: 'sharejs',
-      sharejs: {
-        sites: 'facebook,twitter,wechat,weibo,qq'
-      },
-      addtoany: {
-        item: 'facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link'
-      }
-    },
-    comments: {
-      use: null,
-      text: true,
-      lazyload: false,
-      count: false,
-      card_post_count: false
-    },
-    disqus: {
-      shortname: null,
-      apikey: null
-    },
-    disqusjs: {
-      shortname: null,
-      apikey: null,
-      option: null
-    },
-    livere: {
-      uid: null
-    },
-    gitalk: {
-      client_id: null,
-      client_secret: null,
-      repo: null,
-      owner: null,
-      admin: null,
-      option: null
-    },
-    valine: {
-      appId: null,
-      appKey: null,
-      avatar: 'monsterid',
-      serverURLs: null,
-      bg: null,
-      visitor: false,
-      option: null
-    },
-    waline: {
-      serverURL: null,
-      bg: null,
-      pageview: false,
-      option: null
-    },
-    utterances: {
-      repo: null,
-      issue_term: 'pathname',
-      light_theme: 'github-light',
-      dark_theme: 'photon-dark',
-      js: null,
-      option: null
-    },
-    facebook_comments: {
-      app_id: null,
-      user_id: null,
-      pageSize: 10,
-      order_by: 'social',
-      lang: 'en_US'
-    },
-    twikoo: {
-      envId: null,
-      region: null,
-      visitor: false,
-      option: null
-    },
-    giscus: {
-      repo: null,
-      repo_id: null,
-      category_id: null,
-      light_theme: 'light',
-      dark_theme: 'dark',
-      js: null,
-      option: null
-    },
-    remark42: {
-      host: null,
-      siteId: null,
-      option: null
-    },
-    artalk: {
-      server: null,
-      site: null,
-      visitor: false,
-      option: null
-    },
-    chat: {
-      use: null,
-      rightside_button: false,
-      button_hide_show: false
-    },
-    chatra: {
-      id: null
-    },
-    tidio: {
-      public_key: null
-    },
-    crisp: {
-      website_id: null
-    },
-    google_tag_manager: {
-      tag_id: null,
-      domain: 'https://www.googletagmanager.com'
-    },
-    baidu_analytics: null,
-    google_analytics: null,
-    cloudflare_analytics: null,
-    microsoft_clarity: null,
-    umami_analytics: {
-      enable: false,
-      serverURL: null,
-      website_id: null,
-      option: null,
-      UV_PV: {
-        site_uv: false,
-        site_pv: false,
-        page_pv: false,
-        token: null
-      }
-    },
-    google_adsense: {
-      enable: false,
-      auto_ads: true,
-      js: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
-      client: null,
-      enable_page_level_ads: true
-    },
-    ad: {
-      index: null,
-      aside: null,
-      post: null
-    },
-    site_verification: null,
-    category_ui: null,
-    tag_ui: null,
-    rounded_corners_ui: true,
-    text_align_justify: false,
-    mask: {
-      header: true,
-      footer: true
-    },
-    preloader: {
-      enable: false,
-      source: 1,
-      pace_css_url: null
-    },
-    enter_transitions: true,
-    display_mode: 'light',
-    beautify: {
-      enable: false,
-      field: 'post',
-      title_prefix_icon: null,
-      title_prefix_icon_color: null
-    },
-    font: {
-      global_font_size: null,
-      code_font_size: null,
-      font_family: null,
-      code_font_family: null
-    },
-    blog_title_font: {
-      font_link: null,
-      font_family: null
-    },
-    hr_icon: {
-      enable: true,
-      icon: null,
-      icon_top: null
-    },
-    activate_power_mode: {
-      enable: false,
-      colorful: true,
-      shake: true,
-      mobile: false
-    },
-    canvas_ribbon: {
-      enable: false,
-      size: 150,
-      alpha: 0.6,
-      zIndex: -1,
-      click_to_change: false,
-      mobile: false
-    },
-    canvas_fluttering_ribbon: {
-      enable: false,
-      mobile: false
-    },
-    canvas_nest: {
-      enable: false,
-      color: '0,0,255',
-      opacity: 0.7,
-      zIndex: -1,
-      count: 99,
-      mobile: false
-    },
-    fireworks: {
-      enable: false,
-      zIndex: 9999,
-      mobile: false
-    },
-    click_heart: {
-      enable: false,
-      mobile: false
-    },
-    clickShowText: {
-      enable: false,
-      text: null,
-      fontSize: '15px',
-      random: false,
-      mobile: false
-    },
-    lightbox: null,
-    series: {
-      enable: false,
-      orderBy: 'title',
-      order: 1,
-      number: true
-    },
-    abcjs: {
-      enable: false,
-      per_page: true
-    },
-    mermaid: {
-      enable: false,
-      code_write: false,
-      theme: {
-        light: 'default',
-        dark: 'dark'
-      }
-    },
-    chartjs: {
-      enable: false,
-      fontColor: {
-        light: 'rgba(0, 0, 0, 0.8)',
-        dark: 'rgba(255, 255, 255, 0.8)'
-      },
-      borderColor: {
-        light: 'rgba(0, 0, 0, 0.1)',
-        dark: 'rgba(255, 255, 255, 0.2)'
-      },
-      scale_ticks_backdropColor: {
-        light: 'transparent',
-        dark: 'transparent'
-      }
-    },
-    note: {
-      style: 'flat',
-      icons: true,
-      border_radius: 3,
-      light_bg_offset: 0
-    },
-    pjax: {
-      enable: false,
-      exclude: null
-    },
-    aplayerInject: {
-      enable: false,
-      per_page: true
-    },
-    snackbar: {
-      enable: false,
-      position: 'bottom-left',
-      bg_light: '#49b1f5',
-      bg_dark: '#1f1f1f'
-    },
-    instantpage: false,
-    lazyload: {
-      enable: false,
-      native: false,
-      field: 'site',
-      placeholder: null,
-      blur: false
-    },
-    pwa: {
-      enable: false,
-      manifest: null,
-      apple_touch_icon: null,
-      favicon_32_32: null,
-      favicon_16_16: null,
-      mask_icon: null
-    },
-    Open_Graph_meta: {
-      enable: true,
-      option: null
-    },
-    structured_data: true,
-    css_prefix: true,
-    inject: {
-      head: null,
-      bottom: null
-    },
-    CDN: {
-      internal_provider: 'local',
-      third_party_provider: 'jsdelivr',
-      version: false,
-      custom_format: null,
-      option: null
-    }
-  }
-
-  hexo.theme.config = deepMerge(defaultConfig, hexo.theme.config)
-}, 1)

scripts/filters/post_lazyload.js

@@ -1,7 +1,7 @@
 /**
  * Butterfly
- * lazyload
+ * Lazyload filter
- * replace src to data-lazy-src
+ * Replace src with data-lazy-src for lazy loading
  */
 
 'use strict'
@@ -10,11 +10,28 @@ const urlFor = require('hexo-util').url_for.bind(hexo)
 
 const lazyload = htmlContent => {
   if (hexo.theme.config.lazyload.native) {
-    return htmlContent.replace(/(<img.*?)(>)/ig, '$1 loading=\'lazy\'$2')
+    // Use more precise replacement: only replace img tags in HTML, not content inside script tags
+    return htmlContent.replace(/(<img(?![^>]*?\bloading=)(?:\s[^>]*?)?>)(?![^<]*<\/script>)/gi, match => {
+      return match.replace(/>$/, ' loading=\'lazy\'>')
+    })
   }
 
   const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-  return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
+
+  // Use more precise replacement: handle src attributes with double and single quotes, but avoid replacing content inside script tags
+  let result = htmlContent
+
+  // Handle src attributes with double quotes
+  result = result.replace(/(<img(?![^>]*?\bdata-lazy-src=)(?:\s[^>]*?)?\ssrc="([^"]+)")(?![^<]*<\/script>)/gi, (match, tag, src) => {
+    return tag.replace(`src="${src}"`, `src="${bg}" data-lazy-src="${src}"`)
+  })
+
+  // Handle src attributes with single quotes
+  result = result.replace(/(<img(?![^>]*?\bdata-lazy-src=)(?:\s[^>]*?)?\ssrc='([^']+)')(?![^<]*<\/script>)/gi, (match, tag, src) => {
+    return tag.replace(`src='${src}'`, `src='${bg}' data-lazy-src='${src}'`)
+  })
+
+  return result
 }
 
 hexo.extend.filter.register('after_render:html', data => {

scripts/helpers/page.js

@@ -13,7 +13,7 @@ hexo.extend.helper.register('postDesc', data => {
 
 hexo.extend.helper.register('cloudTags', function (options = {}) {
   const env = this
-  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order } = options
+  let { source, minfontsize, maxfontsize, limit, unit = 'px', orderby, order, page = 'tags' } = options
 
   if (limit > 0) {
     source = source.limit(limit)
@@ -29,14 +29,19 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
     return `rgb(${Math.max(r, 50)}, ${Math.max(g, 50)}, ${Math.max(b, 50)})`
   }
 
-  const generateStyle = (size, unit) =>
+  const generateStyle = (size, unit, page) => {
-    `font-size: ${parseFloat(size.toFixed(2)) + unit}; color: ${getRandomColor()};`
+    if (page === 'tags') {
+      return `font-size: ${parseFloat(size.toFixed(2)) + unit}; background-color: ${getRandomColor()};`
+    } else {
+      return `font-size: ${parseFloat(size.toFixed(2)) + unit}; color: ${getRandomColor()};`
+    }
+  }
 
   const length = sizes.length - 1
   const result = source.sort(orderby, order).map(tag => {
     const ratio = length ? sizes.indexOf(tag.length) / length : 0
     const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
-    const style = generateStyle(size, unit)
+    const style = generateStyle(size, unit, page)
     return `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
   }).join('')
 
@@ -48,7 +53,7 @@ hexo.extend.helper.register('urlNoIndex', function (url = null, trailingIndex =
 })
 
 hexo.extend.helper.register('md5', function (path) {
-  return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex')
+  return crypto.createHash('md5').update(decodeURI(this.url_for(path, { relative: false }))).digest('hex')
 })
 
 hexo.extend.helper.register('injectHtml', data => {
@@ -65,7 +70,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   const defaultTitle = this._p('page.archives')
   if (!menu) return defaultTitle
 
-  const loop = (m) => {
+  const loop = m => {
     for (const key in m) {
       if (typeof m[key] === 'object') {
         const result = loop(m[key])
@@ -81,7 +86,7 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   return loop(menu) || defaultTitle
 })
 
-hexo.extend.helper.register('getBgPath', function(path) {
+hexo.extend.helper.register('getBgPath', function (path) {
   if (!path) return ''
 
   const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
@@ -127,6 +132,8 @@ hexo.extend.helper.register('shuoshuoFN', (data, page) => {
   finalResult.forEach(item => {
     const utcDate = moment.utc(item.date).format('YYYY-MM-DD HH:mm:ss')
     item.date = moment.tz(utcDate, hexo.config.timezone).format('YYYY-MM-DD HH:mm:ss')
+    // markdown
+    item.content = hexo.render.renderSync({ text: item.content, engine: 'markdown' })
   })
 
   return finalResult

scripts/tag/score.js

@@ -37,7 +37,7 @@ const score = (args, content) => {
   try {
     paramsObj = JSON.parse(paramPart)
   } catch (e) {
-    console.error("Failed to parse JSON in score tag:", e)
+    console.error('Failed to parse JSON in score tag:', e)
   }
 
   // Use double quotes for data-params attribute value,
@@ -47,4 +47,4 @@ const score = (args, content) => {
   </div>`
 }
 
-hexo.extend.tag.register("score", score, { ends: true })
+hexo.extend.tag.register('score', score, { ends: true })

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)

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

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

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

source/css/_layout/rightside.styl

@@ -38,10 +38,14 @@
       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
+        i
-            display: none
+          opacity: 0
+          transform: scale(.8)
 
-      &:hover
+      &:hover.show-percent
         .scroll-percent
-          display: none
+          opacity: 0
+          transform: scale(.8)
 
-          & + i
+        i
-            display: block
+          opacity: 1 !important
+          transform: scale(1) !important
+
+@keyframes fadeInScale
+  from
+    opacity: 0
+    transform: scale(.8)
+
+  to
+    opacity: 1
+    transform: scale(1)

source/css/_layout/sidebar.styl

@@ -52,7 +52,10 @@
 
         &: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%
@@ -70,9 +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
+
+    // 當父元素沒有 .hide 類時，顯示子目錄
+    .site-page.group:not(.hide) + .menus_item_child
+      max-height: 1000px
+      opacity: 1
+      transform: scaleY(1)

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

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

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)

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
+      margin: 5px
-      padding: 2px 7px
+      padding: 3px 12px
       line-height: 1.7
-      transition: all .3s
+      transition: all .3s cubic-bezier(.4, 0, .2, 1)
-      addBorderRadius(5)
+      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
+        background: var(--btn-hover-color) !important
-        box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
+        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

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
+      +maxWidth768()
-      padding: 0
+        min-height: calc(var(--search-height) - 245px)
-      @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)
 
     #algolia-info
-      div
-        display: inline
-
       .algolia-poweredBy
         float: right
-        vertical-align: text-top
+        padding-top: 2px
 
         svg
           height: 1.1em

source/css/_search/index.styl

@@ -20,22 +20,173 @@
     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
+        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 +201,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'

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
+  #local-search-stats
-  background: transparent
+    .search-result-stats
-  color: $search-keyword-highlight
+      text-align: left
-  font-weight: 600
+
+  .search-keyword
+    font-weight: 600
+
+  #loading-database ~ *
+    visibility: hidden

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)
+    background-color: var(--btn-beautify-color, var(--btn-default-color))
-    color: $btn-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
-
+      @extend .btn-effects-large
-    &:hover
-      text-decoration: none
 
     &.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
+        i,
-        color: white !important
+        span
+          color: var(--btn-color)

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)

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

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
+    background-color: var(--note-modern-default-bg)
-    color: $font-black
+    color: var(--note-modern-default-text)
 
   &.flat
     border: initial
-    border-left: 5px solid #EEEEEE
+    border-left: 5px solid var(--note-default-border)
-    background-color: lighten(#EEEEEE, 65%)
+    background-color: var(--note-default-bg)
-    color: $font-black
+    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')
+        border-color: unquote('var(--note-modern-' + $type + '-border)') !important
-        background: lookup('$note-modern-' + $type + '-bg')
+        background: unquote('var(--note-modern-' + $type + '-bg)')
-        color: lookup('$note-modern-' + $type + '-text')
+        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)')

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

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

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) {
+    if (end > contentStr.length) {
-      end = content.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 = [
+  // Helper function to handle Algolia highlight results
-    document.getElementById('algolia-hits'),
+  const extractHighlightValue = highlightObj => {
-    document.getElementById('algolia-pagination'),
+    if (!highlightObj) return ''
-    document.querySelector('#algolia-info .algolia-stats')
-  ]
 
-  const searchClient = typeof algoliasearch === 'function' ? algoliasearch : window['algoliasearch/lite'].liteClient
+    if (typeof highlightObj === 'string') {
-  const search = instantsearch({
+      return highlightObj.trim()
-    indexName,
-    searchClient: searchClient(appId, apiKey),
-    searchFunction (helper) {
-      disableDiv.forEach(item => {
-        item.style.display = helper.state.query ? '' : 'none'
-      })
-      if (helper.state.query) helper.search()
     }
-  })
 
-  const widgets = [
+    if (typeof highlightObj === 'object' && highlightObj.value !== undefined) {
-    instantsearch.widgets.configure({ hitsPerPage }),
+      return String(highlightObj.value).trim()
-    instantsearch.widgets.searchBox({
+    }
-      container: '#algolia-search-input',
+
-      showReset: false,
+    return ''
-      showSubmit: false,
+  }
-      placeholder: languages.input_placeholder,
+
-      showLoadingIndicator: true
+  // Initialize Algolia client
-    }),
+  let searchClient
-    instantsearch.widgets.hits({
+
-      container: '#algolia-hits',
+  if (window['algoliasearch/lite'] && typeof window['algoliasearch/lite'].liteClient === 'function') {
-      templates: {
+    searchClient = window['algoliasearch/lite'].liteClient(appId, apiKey)
-        item (data) {
+  } else if (typeof window.algoliasearch === 'function') {
-          const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
+    searchClient = window.algoliasearch(appId, apiKey)
-          const result = data._highlightResult
+  } else {
-          const content = result.contentStripTruncate
+    return console.error('Algolia search client not found!')
-            ? cutContent(result.contentStripTruncate.value)
+  }
-            : result.contentStrip
+
-              ? cutContent(result.contentStrip.value)
+  if (!searchClient) {
-              : result.content
+    return console.error('Failed to initialize Algolia search client')
-                ? cutContent(result.content.value)
+  }
-                : ''
+
-          return `
+  // Search state
-            <a href="${link}" class="algolia-hit-item-link">
+  let currentQuery = ''
-              <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
+
-              ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
+  // Show loading state
-            </a>`
+  const showLoading = show => {
-        },
+    const loadingIndicator = document.getElementById('loading-status')
-        empty (data) {
+    if (loadingIndicator) {
-          return `<div id="algolia-hits-empty">${languages.hits_empty.replace(/\$\{query}/, data.query)}</div>`
+      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({
+      // Title handling
-      container: '#algolia-info > .algolia-stats',
+      let title = 'no-title'
-      templates: {
+      try {
-        text (data) {
+        if (result.title) {
-          const stats = languages.hits_stats
+          title = extractHighlightValue(result.title) || 'no-title'
-            .replace(/\$\{hits}/, data.nbHits)
+        } else if (hit.title) {
-            .replace(/\$\{time}/, data.processingTimeMS)
+          title = extractHighlightValue(hit.title) || 'no-title'
-          return `<hr>${stats}`
         }
+
+        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({
+      return `
-      container: '#algolia-info > .algolia-poweredBy'
+        <li class="ais-Hits-item" value="${itemNumber}">
-    }),
+          <a href="${link}" class="algolia-hit-item-link">
-    instantsearch.widgets.pagination({
+            <span class="algolia-hits-item-title">${title}</span>
-      container: '#algolia-pagination',
+            ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
-      totalPages: 5,
+          </a>
-      templates: {
+        </li>`
-        first: '<i class="fas fa-angle-double-left"></i>',
+    }).join('')
-        last: '<i class="fas fa-angle-double-right"></i>',
+
-        previous: '<i class="fas fa-angle-left"></i>',
+    elements.hitsList.innerHTML = hitsHTML
-        next: '<i class="fas fa-angle-right"></i>'
+    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)
+    // Initial state
-  search.start()
+    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'))
-    })
-  }
 })

source/js/search/local-search.js

@@ -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 input = document.querySelector('.local-search-input input')
-  const statsItem = document.getElementById('local-search-stats-wrap')
+  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 = ''
+      clearSearchResults()
-      statsItem.textContent = ''
     } else if (resultItems.length === 0) {
-      container.textContent = ''
+      showNoResults(searchText)
-      const statsDiv = document.createElement('div')
-      statsDiv.className = 'search-result-stats'
-      statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
-      statsItem.innerHTML = statsDiv.outerHTML
     } 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)
+      if (enablePagination) {
-
+        currentResultItems = resultItems
-      container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
+        currentPage = 0
-      statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
+      }
-      window.pjax && window.pjax.refresh(container)
+      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()
   })
 

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']
                   }