Merge branch 'dev'

2026-04-16 20:30:53 +08:00 · 2023-06-06 23:35:08 +08:00 · 2023-05-09 00:43:22 +08:00 · 2023-04-10 20:31:17 +08:00 · 2023-04-10 16:51:10 +08:00 · 2023-02-20 17:24:38 +08:00
224 changed files with 13955 additions and 18553 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,13 +0,0 @@
 # These are supported funding model platforms
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 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'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -7,12 +7,11 @@ body:
    attributes:
      value: |
        重要：請依照該模板來提交 
-        Important: Please follow the template to create a new issue
+        Please follow the template to create a new issue
  - type: input
    id: butterfly-ver
    attributes:
-      label: 使用的 Butterfly 版本？ | What version of Butterfly are you using?
+      label: 使用的 Butterfly 版本？ | What version of Butterfly are you use?
      description: 檢視主題的 package.json | Check the theme's package.json
    validations:
      required: true
@@ -20,17 +19,17 @@ body:
  - type: dropdown
    id: modify
    attributes:
-      label: 是否修改過主題文件？ | Has the theme files been modified?
+      label: 是否修改过主题文件？ || Has the theme files been modified?
      options:
        - 是 (Yes)
-        - 否 (No)
+        - 不是 (No)
    validations:
      required: true
  - type: dropdown
    id: browser
    attributes:
-      label: 使用的瀏覽器？ | What browser are you using?
+      label: 使用的瀏覽器？ || What browse are you using?
      options:
        - Chrome
        - Edge
@@ -43,7 +42,7 @@ body:
  - type: dropdown
    id: platform
    attributes:
-      label: 使用的系統？ | What operating system are you using?
+      label: 使用的系統？ || What operating system are you using?
      options:
        - Windows
        - macOS 
@@ -54,15 +53,6 @@ body:
    validations:
      required: true
  - type: textarea
    id: dependencies
    attributes:
      label: 依賴插件 | Package dependencies information
      description: 在 Hexo 根目錄下執行 `npm ls --depth 0` | Run `npm ls --depth 0` in Hexo root directory
      render: Text
    validations:
      required: true
  - type: textarea
    id: description
    attributes:
@@ -76,8 +66,8 @@ body:
  - type: input
    id: website
    attributes:
-      label: 出現問題的網站 | Website with the issue
+      label: 出現問題網站 | Website
-      description: 請提供可復現問題的網站地址 | Please provide a website URL where the problem can be reproduced.
+      description: 請提供下可復現網站地址 | Please supply a website url which can reproduce problem.
-      placeholder: 請填寫具體的網址，不要填寫 localhost 網站 | Please provide a specific URL, do not use localhost. 
+      placeholder:
    validations:
      required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -12,7 +12,11 @@ contact_links:
    url: https://t.me/bu2fly
    about: 'Official Telegram Group'
-  - name: QQ 群
+  - name: QQ 1群
    url: https://jq.qq.com/?_wv=1027&k=KU9105XR
-    about: '群號 1070540070'
+    about: '群號 1070540070，不要兩個Q群都添加'
  - name: QQ 2群
    url: https://jq.qq.com/?_wv=1027&k=r1nK0DQz
    about: '群號 978221020，不要兩個Q群都添加'
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +0,0 @@
 .DS_Store
 node_modules/
--- a/README.md
+++ b/README.md
@@ -1,193 +1,111 @@
 <div align="right">
-  <a title="中文" href="/README_CN.md">中文</a>
+<a title="Chinese" href="/README_CN.md">中文</a>
 </div>
 <div align="center">
 <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)
-![dev version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
+![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
-![npm version](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
+![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83cd)
+![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c)
 ![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 Official](https://butterfly.js.org/) | [CrazyWong's Blog](https://blog.crazywong.com/)
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
-📖 **Documentation**: [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) | [中文文档](https://butterfly.js.org/posts/21cfbf15/)
+Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://blog.crazywong.com/)
-![Butterfly Theme Preview](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
+Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
-</div>
+Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
---
+## 💻 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
 ```
-```bash
+Dev branch:
-# Install development version (early access to new features)
+
 ```
 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
-#### Method 2: NPM Installation
+### NPM
-> ⚠️ **Note**: NPM installation only supports Hexo 5.0.0 and above
+> It supports Hexo 5.0.0 or later
-```bash
+In Hexo site root directory 
-npm install hexo-theme-butterfly
+
 ```powershell
 npm i hexo-theme-butterfly
 ```
-### ⚙️ Theme Configuration
+## ⚙ Configuration
-1. **Enable Theme**: Modify your Hexo configuration file `_config.yml`:
+ Set theme in the hexo work folder's root config file `_config.yml`: 
-```yaml
+> theme: butterfly
 theme: butterfly
 ```
-2. **Install Dependencies**: If you haven't installed pug and stylus renderers, please run:
+ If you don't have pug & stylus renderer, try this: 
-```bash
+> npm install hexo-renderer-pug hexo-renderer-stylus
 npm install hexo-renderer-pug hexo-renderer-stylus --save
 ```
-## ✨ Theme Features
+## 🎉 Features
-### 🎨 Design Style
+- [x] Card UI 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/mac/mac light), also support customization
 - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
 - [X] Disable copy/Add a Copyright Notice to the Copied Text
 - [X] Search (Algolia 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 (AddThis/Sharejs/Addtoany)
 - [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk)
 - [x] Multiple Comment System Support
 - [x] Online Chats (Chatra/Tidio/Daovoice/Crisp/messenger)
 - [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] Justified Gallery
 - [x] Lazyload images
 - [x] Instantpage/Pangu/Snackbar notification toast/PWA......
-### 📝 Content Features
+## ✨ Contributors
 - [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
-### 🔍 Search & Navigation
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
- [x] **Multiple Search Options** - Algolia Search / Local Search / Docsearch
+  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
- [x] **Built-in 404** - Beautiful 404 error page
+</a>
 - [x] **Pjax Support** - Smooth page transition experience
-### 🎨 Code Display
+## 📷 Screenshots
 - [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
-### 💬 Social Interaction
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.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-2.jpg)
- [x] **Dual Comments Support** - Enable two comment systems simultaneously
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
- [x] **Share Features** - Sharejs/Addtoany sharing components
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
- [x] **Live Chat** - Chatra/Tidio/Crisp instant messaging
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png)
-
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
 ### 📊 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>
--- a/README_CN.md
+++ b/README_CN.md
@@ -2,192 +2,110 @@
  <a title="English" href="/README.md">English</a>
 </div>
 <div align="center">
 <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)
-![dev version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
+![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
-![npm version](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
+![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83cd)
+![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83c)
 ![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/)
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
-📖 **完整文檔**: [中文文檔](https://butterfly.js.org/posts/21cfbf15/) | [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
+預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://blog.crazywong.com/)
-![Butterfly 主題預覽](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
+文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
-</div>
+一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
---
+## 💻 安裝
-## 🚀 快速開始
+### 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
 ```
-```bash
+如果想要安裝比較新的dev分支，可以
-# 安裝開發版本（搶先體驗新功能）
+
 ```powershell
 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 ```
-#### 方式二：NPM 安裝
+### npm 安裝
-> ⚠️ **注意**: NPM 安裝方式僅支援 Hexo 5.0.0 及以上版本
+> 此方法只支持Hexo 5.0.0以上版本
-```bash
+在博客根目錄裡
-npm install hexo-theme-butterfly
+
 ```powershell
 npm i hexo-theme-butterfly
 ```
-### ⚙️ 主題配置
+## ⚙ 應用主題
-1. **啟用主題**: 修改您的 Hexo 配置檔案 `_config.yml`：
+修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
-```yaml
+```
 theme: butterfly
 ```
-2. **安裝依賴**: 如果您尚未安裝 pug 和 stylus 渲染器，請執行：
+>如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save
-```bash
+## 🎉 特色
 npm install hexo-renderer-pug hexo-renderer-stylus --save
 ```
-## ✨ 主題特色
+- [x] 卡片化設計
 - [X] 支持二級目錄
 - [x] 雙欄設計
 - [x] 響應式主題
 - [x] 夜間模式
 - [x] Pjax
 - [x] 文章閲讀模式
 - [x] 簡體和繁體轉換
 - [X] 電腦和手機都可查看TOC目錄
 - [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色
 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
 - [X] 可關閉文字複製/可開啟內容複製增加版權信息）
 - [X] 兩種搜索（ Algolia 搜索和本地搜索）
 - [x] Mathjax 和 Katex
 - [x] 內置404頁面
 - [x] 顯示字數統計
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
 - [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
 - [x] 支持雙評論部署
 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Crisp/messenger）
 - [x] 多種分析系統
 - [x] 谷歌廣告/手動廣告位置
 - [x] 各種站長驗證（Google/Bing/Baidu/360/Yandex）
 - [x] 修改網站配色
 - [x] 打字特效 activate_power_mode
 - [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
 - [x] 多種鼠標點擊特效（煙花/文字/愛心）
 - [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
 - [x] 不蒜子訪問統計
 - [x] 兩種大圖模式（Medium Zoom/Fancybox）
 - [x] Mermaid 圖表顯示
 - [x] 照片牆
 - [x] 圖片懶加載
 - [x] Instantpage/Pangu/Snackbar彈窗/PWA......
-### 🎨 設計風格
+## ✨ 貢獻者
 - [x] **卡片化設計** - 現代化的卡片式佈局
 - [x] **圓角/直角設計** - 支援自訂邊框樣式
 - [x] **響應式設計** - 完美適配各種螢幕尺寸
 - [x] **雙欄佈局** - 優化的閱讀體驗
 - [x] **深色模式** - 護眼的夜間模式
-### 📝 內容功能
+<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
- [x] **多級選單** - 支援二級導航選單
+  <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
- [x] **閱讀模式** - 專注的文章閱讀體驗
+</a>
 - [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)
- [x] **語法高亮** - 內建多種主題（darker/pale night/light/ocean）
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
- [x] **程式碼功能** - 語言顯示/摺疊展開/複製按鈕/自動換行
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
- [x] **數學公式** - 支援 Mathjax 和 Katex
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)
-
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-1.png)
-### 💬 社交互動
+![](https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/theme-butterfly-readme-homepage-2.png)
 - [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>
--- a/_config.yml
+++ b/_config.yml
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -3,54 +3,55 @@ footer:
  theme: Theme
 copy:
-  success: Copy Successful
+  success: Copy successfully
-  error: Copy Failed
+  error: Copy error
-  noSupport: Browser Not Supported
+  noSupport: The browser does not support
 page:
-  articles: All Articles
+  articles: Articles
  tag: Tag
  category: Category
  archives: Archives
 card_post_count: comments
-no_title: Untitled
+sticky: Sticky
 no_title: No title
 post:
  created: Created
  updated: Updated
-  wordcount: Word Count
+  wordcount: Word count
-  min2read: Reading Time
+  min2read: Reading time
-  min2read_unit: mins
+  min2read_unit: min
-  page_pv: Post Views
+  page_pv: Post View
  comments: Comments
  copyright:
    author: Author
    link: Link
    copyright_notice: Copyright Notice
-    copyright_content: 'All articles on this blog are licensed under <a href="%s">%s</a> unless otherwise stated.'
+    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
  recommend: Related Articles
-  edit: Edit
+  edit: Edited on
  back_to_home: Back to Home
 search:
  title: Search
-  load_data: Loading Database
+  load_data: Loading the Database
  input_placeholder: Search for Posts
  algolia_search:
-    hits_empty: 'No results found for: ${query}'
+    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}."
    hits_stats: '${hits} results found in ${time} ms'
  local_search:
-    hits_empty: 'No results found for: ${query}'
+    input_placeholder: Search for Posts
-    hits_stats: '${hits} articles found'
+    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: '${hits} results found'
 pagination:
-  prev: Previous
+  prev: Previous Post
-  next: Next
+  next: Next Post
  page_info: 'Page ${current} of ${total}' 
-comment: Comments
+comment: Comment
 aside:
  articles: Articles
@@ -60,64 +61,63 @@ aside:
  card_categories: Categories
  card_tags: Tags
  card_archives: Archives
-  card_recent_post: Recent Posts
+  card_recent_post: Recent Post
  card_webinfo:
-    headline: Website Info
+    headline: Info
-    article_name: Article Count
+    article_name: Article
    runtime:
      name: Run time
      unit: days
    last_push_date:
-      name: Last Update
+      name: Last Push
-    site_wordcount: Total Word Count
+    site_wordcount: Total Count
-    site_uv_name: Unique Visitors
+    site_uv_name: UV
-    site_pv_name: Page Views
+    site_pv_name: PV
-  more_button: View More
+  more_button: More
  card_newest_comments:
-    headline: Latest Comments
+    headline: Newest Comments
-    loading_text: Loading...
+    loading_text: loading...
-    error: Unable to retrieve comments, please check the configuration
+    error: Unable to get the data, please make sure the settings are correct.
-    zero: No comments
+    zero: No Comment
-    image: Image
+    image: image
-    link: Link
+    link: link
-    code: Code
+    code: code
-  card_toc: Contents
+  card_toc: Catalog
  card_post_series: Post Series
 date_suffix:
-  just: Just now
+  just: Just
  min: minutes ago
  hour: hours ago
  day: days ago
  month: months ago
-donate: Sponsor
+donate: Donate
 share: Share
 rightside:
-  readmode_title: Reading Mode
+  readmode_title: Read Mode
-  translate_title: Toggle Between Traditional and Simplified Chinese
+  translate_title: Toggle Between Traditional Chinese And Simplified Chinese
-  night_mode_title: Toggle Between Light and Dark Mode
+  night_mode_title: Toggle Between Light And Dark Mode
-  back_to_top: Back to Top
+  back_to_top: Back To Top
-  toc: Table of Contents
+  toc: Table Of Contents
-  scroll_to_comment: Scroll to Comments
+  scroll_to_comment: Scroll To Comments
-  setting: Settings
+  setting: Setting
-  aside: Toggle Between Single-column and Double-column
+  aside: Toggle between single-column and double-column
  chat: Chat
 copy_copyright:
  author: Author
  link: Link
  source: Source
-  info: Copyright belongs to the author. For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
 Snackbar:
-  chs_to_cht: You have switched to Traditional Chinese
+  chs_to_cht: Traditional Chinese Activated Manually
-  cht_to_chs: You have switched to Simplified Chinese
+  cht_to_chs: Simplified Chinese Activated Manually
-  day_to_night: You have switched to Dark Mode
+  day_to_night: Dark Mode Activated Manually
-  night_to_day: You have switched to Light Mode
+  night_to_day: Light Mode Activated Manually
 loading: Loading...
 load_more: Load More
-error404: Page Not Found
+error404: Page not found
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -3,54 +3,55 @@ footer:
  theme: Theme
 copy:
-  success: Copy Successful
+  success: Copy successfully
-  error: Copy Failed
+  error: Copy error
-  noSupport: Browser Not Supported
+  noSupport: The browser does not support
 page:
-  articles: All Articles
+  articles: Articles
  tag: Tag
  category: Category
  archives: Archives
 card_post_count: comments
-no_title: Untitled
+sticky: Sticky
 no_title: No title
 post:
  created: Created
  updated: Updated
-  wordcount: Word Count
+  wordcount: Word count
-  min2read: Reading Time
+  min2read: Reading time
-  min2read_unit: mins
+  min2read_unit: min
-  page_pv: Post Views
+  page_pv: Post View
  comments: Comments
  copyright:
    author: Author
    link: Link
    copyright_notice: Copyright Notice
-    copyright_content: 'All articles on this blog are licensed under <a href="%s">%s</a> unless otherwise stated.'
+    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
  recommend: Related Articles
-  edit: Edit
+  edit: Edited on
  back_to_home: Back to Home
 search:
  title: Search
-  load_data: Loading Database
+  load_data: Loading the Database
  input_placeholder: Search for Posts
  algolia_search:
-    hits_empty: 'No results found for: ${query}'
+    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}."
    hits_stats: '${hits} results found in ${time} ms'
  local_search:
-    hits_empty: 'No results found for: ${query}'
+    input_placeholder: Search for Posts
-    hits_stats: '${hits} articles found'
+    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: '${hits} results found'
 pagination:
-  prev: Previous
+  prev: Previous Post
-  next: Next
+  next: Next Post
  page_info: 'Page ${current} of ${total}'
-comment: Comments
+comment: Comment
 aside:
  articles: Articles
@@ -60,64 +61,63 @@ aside:
  card_categories: Categories
  card_tags: Tags
  card_archives: Archives
-  card_recent_post: Recent Posts
+  card_recent_post: Recent Post
  card_webinfo:
-    headline: Website Info
+    headline: Info
-    article_name: Article Count
+    article_name: Article
    runtime:
      name: Run time
      unit: days
    last_push_date:
-      name: Last Update
+      name: Last Push
-    site_wordcount: Total Word Count
+    site_wordcount: Total Count
-    site_uv_name: Unique Visitors
+    site_uv_name: UV
-    site_pv_name: Page Views
+    site_pv_name: PV
-  more_button: View More
+  more_button: More
  card_newest_comments:
-    headline: Latest Comments
+    headline: Newest Comments
-    loading_text: Loading...
+    loading_text: loading...
-    error: Unable to retrieve comments, please check the configuration
+    error: Unable to get the data, please make sure the settings are correct.
-    zero: No comments
+    zero: No Comment
-    image: Image
+    image: image
-    link: Link
+    link: link
-    code: Code
+    code: code
-  card_toc: Contents
+  card_toc: Catalog
  card_post_series: Post Series
 date_suffix:
-  just: Just now
+  just: Just
  min: minutes ago
  hour: hours ago
  day: days ago
  month: months ago
-donate: Sponsor
+donate: Donate
 share: Share
 rightside:
-  readmode_title: Reading Mode
+  readmode_title: Read Mode
-  translate_title: Toggle Between Traditional and Simplified Chinese
+  translate_title: Switch Between Traditional Chinese And Simplified Chinese
-  night_mode_title: Toggle Between Light and Dark Mode
+  night_mode_title: Switch Between Light And Dark Mode
-  back_to_top: Back to Top
+  back_to_top: Back To Top
-  toc: Table of Contents
+  toc: Table Of Contents
-  scroll_to_comment: Scroll to Comments
+  scroll_to_comment: Scroll To Comments
-  setting: Settings
+  setting: Setting
-  aside: Toggle Between Single-column and Double-column
+  aside: Toggle between single-column and double-column
  chat: Chat
 copy_copyright:
  author: Author
  link: Link
  source: Source
-  info: Copyright belongs to the author. For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
+  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
 Snackbar:
-  chs_to_cht: You have switched to Traditional Chinese
+  chs_to_cht: Traditional Chinese Activated Manually
-  cht_to_chs: You have switched to Simplified Chinese
+  cht_to_chs: Simplified Chinese Activated Manually
-  day_to_night: You have switched to Dark Mode
+  day_to_night: Dark Mode Activated Manually
-  night_to_day: You have switched to Light Mode
+  night_to_day: Light Mode Activated Manually
 loading: Loading...
 load_more: Load More
-error404: Page Not Found
+error404: Page not found
--- a/languages/ja.yml
+++ b/languages/ja.yml
@@ -1,123 +0,0 @@
 footer:
  framework: フレームワーク
  theme: テーマ
 copy:
  success: コピー成功
  error: コピー失敗
  noSupport: ブラウザが対応していません
 page:
  articles: 記事一覧
  tag: タグ
  category: カテゴリ
  archives: アーカイブ
 card_post_count: コメント数
 no_title: タイトルなし
 post:
  created: 作成日
  updated: 更新日
  wordcount: 総文字数
  min2read: 読む時間
  min2read_unit: 分
  page_pv: 閲覧数
  comments: コメント数
  copyright:
    author: 著者
    link: リンク
    copyright_notice: 著作権表示
    copyright_content: 'このブログのすべての記事は、<a href="%s">%s</a> ライセンスの下で提供されており、特に明記されていない限り、すべての権利を留保します。転載時には出典を明記してください: <a href="%s">%s</a>。'
  recommend: 関連記事
  edit: 編集
  back_to_home: ホームに戻る
 search:
  title: 検索
  load_data: データベースを読み込んでいます
  input_placeholder: 記事を検索
  algolia_search:
    hits_empty: '${query} の検索結果が見つかりませんでした。'
    hits_stats: '${hits} 件の結果が ${time}ms で見つかりました'
  local_search:
    hits_empty: '${query} の検索結果が見つかりませんでした。'
    hits_stats: '${hits} 件の記事が見つかりました'
 pagination:
  prev: 前へ
  next: 次へ
  page_info: '${current} ページ / 合計 ${total} ページ'
 comment: コメント
 aside:
  articles: 記事
  tags: タグ
  categories: カテゴリ
  card_announcement: お知らせ
  card_categories: カテゴリ
  card_tags: タグ
  card_archives: アーカイブ
  card_recent_post: 最近の記事
  card_webinfo:
    headline: サイト情報
    article_name: 記事数
    runtime:
      name: 稼働時間
      unit: 日
    last_push_date:
      name: 最終更新日
    site_wordcount: 総文字数
    site_uv_name: ユーザー数
    site_pv_name: ページビュー数
  more_button: もっと見る
  card_newest_comments:
    headline: 最新コメント
    loading_text: ローディング中...
    error: コメントを取得できませんでした。設定を確認してください。
    zero: コメントがありません
    image: 画像
    link: リンク
    code: コード
  card_toc: 目次
  card_post_series: シリーズ記事
 date_suffix:
  just: たった今
  min: 分前
  hour: 時間前
  day: 日前
  month: ヶ月前
 donate: 寄付
 share: 共有
 rightside:
  readmode_title: 読書モード
  translate_title: 簡体字と繁体字の切り替え
  night_mode_title: ライトモード/ダークモード切り替え
  back_to_top: トップに戻る
  toc: 目次
  scroll_to_comment: コメントへ移動
  setting: 設定
  aside: シングルカラムとダブルカラムの切り替え
  chat: チャット
 copy_copyright:
  author: 著者
  link: リンク
  source: ソース
  info: 著作権は著者に帰属します。商業的利用の場合は著者に連絡して許可を得てください。非商業的利用の場合は出典を明記してください。
 Snackbar:
  chs_to_cht: 繁体字に切り替えました
  cht_to_chs: 簡体字に切り替えました
  day_to_night: ダークモードに切り替えました
  night_to_day: ライトモードに切り替えました
 loading: ローディング中...
 load_more: もっと見る
 error404: ページが見つかりません
--- a/languages/ko.yml
+++ b/languages/ko.yml
@@ -1,123 +0,0 @@
 footer:
  framework: 프레임워크
  theme: 테마
 copy:
  success: 복사 성공
  error: 복사 실패
  noSupport: 브라우저가 지원되지 않음
 page:
  articles: 모든 글
  tag: 태그
  category: 카테고리
  archives: 아카이브
 card_post_count: 댓글 수
 no_title: 제목 없음
 post:
  created: 작성일
  updated: 수정일
  wordcount: 총 글자 수
  min2read: 읽기 시간
  min2read_unit: 분
  page_pv: 조회수
  comments: 댓글
  copyright:
    author: 작성자
    link: 링크
    copyright_notice: 저작권 고지
    copyright_content: '이 블로그의 모든 글은 <a href="%s">%s</a> 라이선스를 따르며, 별도로 명시되지 않는 한 모든 권리를 보유합니다. 재배포 시 출처를 명시해 주세요: <a href="%s">%s</a>.'
  recommend: 관련 글
  edit: 편집
  back_to_home: 홈으로 돌아가기
 search:
  title: 검색
  load_data: 데이터베이스 로드 중
  input_placeholder: 글 검색
  algolia_search:
    hits_empty: '${query}에 대한 결과를 찾을 수 없습니다.'
    hits_stats: '${hits}개의 결과를 ${time}ms 만에 찾음'
  local_search:
    hits_empty: '${query}에 대한 결과를 찾을 수 없습니다.'
    hits_stats: '${hits}개의 글을 찾음'
 pagination:
  prev: 이전
  next: 다음
  page_info: '${current} 페이지 / 총 ${total} 페이지'
 comment: 댓글
 aside:
  articles: 글
  tags: 태그
  categories: 카테고리
  card_announcement: 공지
  card_categories: 카테고리
  card_tags: 태그
  card_archives: 아카이브
  card_recent_post: 최근 글
  card_webinfo:
    headline: 사이트 정보
    article_name: 글 수
    runtime:
      name: 운영 시간
      unit: 일
    last_push_date:
      name: 마지막 업데이트
    site_wordcount: 총 글자 수
    site_uv_name: 방문자 수
    site_pv_name: 총 조회수
  more_button: 더 보기
  card_newest_comments:
    headline: 최신 댓글
    loading_text: 로딩 중...
    error: 댓글을 가져올 수 없습니다. 설정을 확인해 주세요.
    zero: 댓글 없음
    image: 이미지
    link: 링크
    code: 코드
  card_toc: 목차
  card_post_series: 시리즈 글
 date_suffix:
  just: 방금
  min: 분 전
  hour: 시간 전
  day: 일 전
  month: 달 전
 donate: 후원
 share: 공유
 rightside:
  readmode_title: 읽기 모드
  translate_title: 번체와 간체 전환
  night_mode_title: 라이트/다크 모드 전환
  back_to_top: 맨 위로
  toc: 목차
  scroll_to_comment: 댓글로 이동
  setting: 설정
  aside: 단일/이중 열 전환
  chat: 채팅
 copy_copyright:
  author: 작성자
  link: 링크
  source: 출처
  info: 저작권은 작성자에게 있습니다. 상업적 사용을 위해서는 작성자의 허가를 받아야 하며, 비상업적 사용 시에는 출처를 명시해 주세요.
 Snackbar:
  chs_to_cht: 번체로 전환되었습니다.
  cht_to_chs: 간체로 전환되었습니다.
  day_to_night: 다크 모드로 전환되었습니다.
  night_to_day: 라이트 모드로 전환되었습니다.
 loading: 로딩 중...
 load_more: 더 보기
 error404: 페이지를 찾을 수 없습니다.
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -4,52 +4,53 @@ footer:
 copy:
  success: 复制成功
-  error: 复制失败
+  error: 复制错误
  noSupport: 浏览器不支持
 page:
-  articles: 全部文章
+  articles: 文章总览
  tag: 标签
  category: 分类
  archives: 归档
 card_post_count: 条评论
-no_title: 无标题
+sticky: 置顶
 no_title: 无题
 post:
  created: 发表于
  updated: 更新于
-  wordcount: 总字数
+  wordcount: 字数总计
  min2read: 阅读时长
  min2read_unit: 分钟
-  page_pv: 浏览量
+  page_pv: 阅读量
  comments: 评论数
  copyright:
    author: 文章作者
    link: 文章链接
    copyright_notice: 版权声明
    copyright_content: '本博客所有文章除特别声明外，均采用
-      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来源 <a href="%s" target="_blank">%s</a>！'
+      <a href="%s" target="_blank">%s</a> 许可协议。转载请注明来自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相关推荐
  edit: 编辑
  back_to_home: 返回首页
 search:
  title: 搜索
-  load_data: 数据加载中
+  load_data: 数据库加载中
  input_placeholder: 搜索文章
  algolia_search:
-    hits_empty: '未找到符合您查询的内容：${query}'
+    input_placeholder: 搜索文章
-    hits_stats: '找到 ${hits} 条结果，耗时 ${time} 毫秒'
+    hits_empty: '找不到您查询的内容：${query}'
    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
  local_search:
-    hits_empty: '未找到符合您查询的内容：${query}'
+    input_placeholder: 搜索文章
    hits_empty: '找不到您查询的内容：${query}'
    hits_stats: '共找到 ${hits} 篇文章'
 pagination:
  prev: 上一篇
  next: 下一篇
  page_info: '第 ${current} 页 / 共 ${total} 页'
 comment: 评论
@@ -63,27 +64,26 @@ aside:
  card_archives: 归档
  card_recent_post: 最新文章
  card_webinfo:
-    headline: 网站信息
+    headline: 网站资讯
    article_name: 文章数目
    runtime:
-      name: 运行时间
+      name: 已运行时间
      unit: 天
    last_push_date:
      name: 最后更新时间
    site_wordcount: 本站总字数
    site_uv_name: 本站访客数
-    site_pv_name: 本站总浏览量
+    site_pv_name: 本站总访问量
  more_button: 查看更多
  card_newest_comments:
    headline: 最新评论
-    loading_text: 加载中...
+    loading_text: 正在加载中...
    error: 无法获取评论，请确认相关配置是否正确
-    zero: 暂无评论
+    zero: 没有评论
    image: 图片
    link: 链接
    code: 代码
  card_toc: 目录
  card_post_series: 系列文章
 date_suffix:
  just: 刚刚
@@ -92,16 +92,16 @@ date_suffix:
  day: 天前
  month: 个月前
-donate: 赞助
+donate: 打赏
 share: 分享
 rightside:
  readmode_title: 阅读模式
  translate_title: 简繁转换
-  night_mode_title: 日间和夜间模式切换
+  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
  toc: 目录
-  scroll_to_comment: 前往评论
+  scroll_to_comment: 直达评论
  setting: 设置
  aside: 单栏和双栏切换
  chat: 聊天
@@ -113,12 +113,12 @@ copy_copyright:
  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 Snackbar:
-  chs_to_cht: 已切换为繁体中文
+  chs_to_cht: 你已切换为繁体
-  cht_to_chs: 已切换为简体中文
+  cht_to_chs: 你已切换为简体
-  day_to_night: 已切换为深色模式
+  day_to_night: 你已切换为深色模式
-  night_to_day: 已切换为浅色模式
+  night_to_day: 你已切换为浅色模式
 loading: 加载中...
 load_more: 加载更多
-error404: 页面未找到
+error404: 页面没有找到
--- a/languages/zh-HK.yml
+++ b/languages/zh-HK.yml
@@ -1,123 +0,0 @@
 footer:
  framework: 框架
  theme: 主題
 copy:
  success: 複製成功
  error: 複製失敗
  noSupport: 瀏覽器不支援
 page:
  articles: 全部文章
  tag: 標籤
  category: 分類
  archives: 歸檔
 card_post_count: 條評論
 no_title: 無標題
 post:
  created: 發表於
  updated: 更新於
  wordcount: 字數統計
  min2read: 閱讀時間
  min2read_unit: 分鐘
  page_pv: 瀏覽量
  comments: 評論數
  copyright:
    author: 文章作者
    link: 文章連結
    copyright_notice: 版權聲明
    copyright_content: '除特別聲明外，本博客所有文章均採用<a href="%s">%s</a> 授權協議。轉載請註明出處：<a href="%s">%s</a>。'
  recommend: 相關文章
  edit: 編輯
  back_to_home: 返回首頁
 search:
  title: 搜尋
  load_data: 正在加載數據庫
  input_placeholder: 搜尋文章
  algolia_search:
    hits_empty: '未找到相關內容：${query}'
    hits_stats: '找到 ${hits} 條結果，耗時 ${time} 毫秒'
  local_search:
    hits_empty: '未找到相關內容：${query}'
    hits_stats: '找到 ${hits} 篇文章'
 pagination:
  prev: 上一頁
  next: 下一頁
  page_info: '第 ${current} 頁 / 共 ${total} 頁'
 comment: 評論
 aside:
  articles: 文章
  tags: 標籤
  categories: 分類
  card_announcement: 公告
  card_categories: 分類
  card_tags: 標籤
  card_archives: 歸檔
  card_recent_post: 最新文章
  card_webinfo:
    headline: 網站資訊
    article_name: 文章數目
    runtime:
      name: 運行時間
      unit: 天
    last_push_date:
      name: 最後更新時間
    site_wordcount: 總字數
    site_uv_name: 訪客數
    site_pv_name: 總瀏覽量
  more_button: 查看更多
  card_newest_comments:
    headline: 最新評論
    loading_text: 正在加載...
    error: 無法取得評論，請確認配置是否正確
    zero: 暫無評論
    image: 圖片
    link: 連結
    code: 代碼
  card_toc: 目錄
  card_post_series: 系列文章
 date_suffix:
  just: 剛剛
  min: 分鐘前
  hour: 小時前
  day: 天前
  month: 個月前
 donate: 贊助
 share: 分享
 rightside:
  readmode_title: 閱讀模式
  translate_title: 簡繁轉換
  night_mode_title: 切換日夜模式
  back_to_top: 回到頂部
  toc: 目錄
  scroll_to_comment: 前往評論
  setting: 設定
  aside: 單欄與雙欄切換
  chat: 聊天
 copy_copyright:
  author: 作者
  link: 連結
  source: 來源
  info: 版權屬於作者所有。商業用途請聯絡作者獲得授權，非商業用途請註明出處。
 Snackbar:
  chs_to_cht: 已切換為繁體中文
  cht_to_chs: 已切換為簡體中文
  day_to_night: 已切換為深色模式
  night_to_day: 已切換為淺色模式
 loading: 正在加載...
 load_more: 加載更多
 error404: 未找到頁面
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -4,51 +4,53 @@ footer:
 copy:
  success: 複製成功
-  error: 複製失敗
+  error: 複製錯誤
  noSupport: 瀏覽器不支援
 page:
-  articles: 所有文章
+  articles: 文章總覽
  tag: 標籤
  category: 分類
  archives: 歸檔
-card_post_count: 則評論
+card_post_count: 條評論
-no_title: 無標題
+sticky: 置頂
 no_title: 無題
 post:
  created: 發表於
  updated: 更新於
-  wordcount: 總字數
+  wordcount: 字數總計
-  min2read: 閱讀時間
+  min2read: 閱讀時長
  min2read_unit: 分鐘
-  page_pv: 瀏覽量
+  page_pv: 閱讀量
  comments: 評論數
  copyright:
    author: 文章作者
    link: 文章連結
    copyright_notice: 版權聲明
-    copyright_content: '本部落格所有文章除特別聲明外，均採用<a href="%s" target="_blank">%s</a> 授權協議。轉載請註明來源 <a href="%s" target="_blank">%s</a>！'
+    copyright_content: '本部落格所有文章除特別聲明外，均採用
      <a href="%s" target="_blank">%s</a> 許可協議。轉載請註明來自 <a href="%s" target="_blank">%s</a>！'
  recommend: 相關推薦
  edit: 編輯
  back_to_home: 返回首頁
 search:
  title: 搜尋
-  load_data: 資料載入中
+  load_data: 資料庫載入中
  input_placeholder: 搜尋文章
  algolia_search:
-    hits_empty: '找不到符合您查詢的內容：${query}'
+    input_placeholder: 搜尋文章
-    hits_stats: '找到 ${hits} 筆結果，耗時 ${time} 毫秒'
+    hits_empty: '找不到您查詢的內容：${query}'
    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
  local_search:
-    hits_empty: '找不到符合您查詢的內容：${query}'
+    input_placeholder: 搜尋文章
    hits_empty: '找不到您查詢的內容：${query}'
    hits_stats: '共找到 ${hits} 篇文章'
 pagination:
  prev: 上一篇
  next: 下一篇
  page_info: '第 ${current} 頁 / 共 ${total} 頁'
 comment: 評論
@@ -63,26 +65,25 @@ aside:
  card_recent_post: 最新文章
  card_webinfo:
    headline: 網站資訊
-    article_name: 文章數量
+    article_name: 文章數目
    runtime:
-      name: 運行時間
+      name: 已執行時間
      unit: 天
    last_push_date:
      name: 最後更新時間
-    site_wordcount: 總字數
+    site_wordcount: 本站總字數
-    site_uv_name: 訪客數
+    site_uv_name: 本站訪客數
-    site_pv_name: 總瀏覽量
+    site_pv_name: 本站總訪問量
  more_button: 檢視更多
  card_newest_comments:
    headline: 最新評論
-    loading_text: 載入中...
+    loading_text: 正在載入中...
    error: 無法獲取評論，請確認相關配置是否正確
-    zero: 尚無評論
+    zero: 沒有評論
    image: 圖片
    link: 連結
    code: 程式碼
  card_toc: 目錄
  card_post_series: 系列文章
 date_suffix:
  just: 剛剛
@@ -91,16 +92,16 @@ date_suffix:
  day: 天前
  month: 個月前
-donate: 贊助
+donate: 打賞
 share: 分享
 rightside:
  readmode_title: 閱讀模式
-  translate_title: 繁簡轉換
+  translate_title: 簡繁轉換
-  night_mode_title: 日夜模式切換
+  night_mode_title: 淺色和深色模式轉換
-  back_to_top: 回到頂端
+  back_to_top: 回到頂部
  toc: 目錄
-  scroll_to_comment: 前往評論
+  scroll_to_comment: 直達評論
  setting: 設定
  aside: 單欄和雙欄切換
  chat: 聊天
@@ -109,15 +110,15 @@ copy_copyright:
  author: 作者
  link: 連結
  source: 來源
-  info: 著作權歸作者所有。如需商業轉載，請聯絡作者獲得授權，非商業轉載請註明出處。
+  info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
 Snackbar:
-  chs_to_cht: 已切換為繁體中文
+  chs_to_cht: 你已切換為繁體
-  cht_to_chs: 已切換為簡體中文
+  cht_to_chs: 你已切換為簡體
-  day_to_night: 已切換為深色模式
+  day_to_night: 你已切換為深色模式
-  night_to_day: 已切換為淺色模式
+  night_to_day: 你已切換為淺色模式
 loading: 載入中...
 load_more: 載入更多
-error404: 找不到頁面
+error404: 頁面沒有找到
--- a/layout/archive.pug
+++ b/layout/archive.pug
@@ -3,6 +3,7 @@ extends includes/layout.pug
 block content
  include ./includes/mixins/article-sort.pug
  #archive
-    .article-sort-title= `${_p('page.articles')} - ${getArchiveLength()}`
+    - const archiveLength = findArchiveLength(fragment_cache)
    .article-sort-title= _p('page.articles') + ' - ' + archiveLength
    +articleSort(page.posts)
    include includes/pagination.pug
--- a/layout/category.pug
+++ b/layout/category.pug
@@ -2,8 +2,10 @@ extends includes/layout.pug
 block content
  if theme.category_ui == 'index'
-    include ./includes/mixins/indexPostUI.pug
+    include ./includes/mixins/post-ui.pug
-    +indexPostUI
+    #recent-posts.recent-posts.category_ui
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
--- a/layout/includes/404.pug
+++ b/layout/includes/404.pug
@@ -0,0 +1,12 @@
 - var top_img_404 = theme.error_404.background || theme.default_top_img
 #body-wrap.error404
  include ./header/index.pug
  #error-wrap
    .error-content
      .error-img
        img(src=url_for(top_img_404) alt='Page not found')
      .error-info
        h1.error_title= '404'
        .error_subtitle= theme.error_404.subtitle || _p('error404')
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -5,18 +5,23 @@ div
  if theme.translate.enable
    script(src=url_for(theme.asset.translate))
-  if theme.lightbox
+  if theme.medium_zoom
-    script(src=url_for(theme.asset[theme.lightbox]))
+    script(src=url_for(theme.asset.medium_zoom))
  else if theme.fancybox
    script(src=url_for(theme.asset.fancybox))
  if theme.instantpage
    script(src=url_for(theme.asset.instantpage), type='module')
-  if theme.lazyload.enable && !theme.lazyload.native
+  if theme.lazyload.enable
    script(src=url_for(theme.asset.lazyload))
  if theme.snackbar.enable
    script(src=url_for(theme.asset.snackbar))
  if theme.pangu.enable
    != partial("includes/third-party/pangu.pug", {}, { cache: true })
  .js-pjax
    if needLoadCountJs
      != partial("includes/third-party/card-post-count/index", {}, { cache: true })
@@ -25,6 +30,7 @@ div
      include ./third-party/subtitle.pug
    include ./third-party/math/index.pug
    include ./third-party/abcjs/index.pug
    if commentsJsLoad
@@ -32,30 +38,28 @@ div
  != partial("includes/third-party/prismjs", {}, { cache: true })
-  if theme.aside.enable && theme.aside.card_newest_comments.enable
+  if theme.aside.enable && theme.newest_comments.enable
-    if theme.pjax.enable || (globalPageType !== 'post' && page.aside !== false)
+    if theme.pjax.enable
      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
    else if (!is_post() && page.aside !== false)
      != partial("includes/third-party/newest-comments/index", {}, { cache: true })
  != fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
  != partial("includes/third-party/effect", {}, { cache: true })
  != partial("includes/third-party/chat/index", {}, { cache: true })
  if theme.aplayerInject && theme.aplayerInject.enable
-    if theme.pjax.enable || theme.aplayerInject.per_page || page.aplayer
+    if theme.pjax.enable || theme.aplayerInject.per_page
      include ./third-party/aplayer.pug
    else if page.aplayer
      include ./third-party/aplayer.pug
  if theme.pjax.enable
    != partial("includes/third-party/pjax", {}, { cache: true })
  if theme.umami_analytics.enable
    != partial("includes/third-party/umami_analytics", {}, { cache: true })
  if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
-    script(async data-pjax src=theme.asset.busuanzi ? url_for(theme.asset.busuanzi) : '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+    script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
  !=partial('includes/third-party/search/index', {}, {cache: true})
  if theme.google_tag_manager && theme.google_tag_manager.tag_id
    noscript
      iframe(src=`${theme.google_tag_manager.domain ? theme.google_tag_manager.domain : 'https://www.googletagmanager.com'}/ns.html?id=${theme.google_tag_manager.tag_id}` height="0" width="0" style="display:none;visibility:hidden")
--- a/layout/includes/footer.pug
+++ b/layout/includes/footer.pug
@@ -1,39 +1,17 @@
- const { nav, owner, copyright, custom_text } = theme.footer
+#footer-wrap
-
+  if theme.footer.owner.enable
-if nav
+    - var now = new Date()
-  .footer-flex
+    - var nowYear = now.getFullYear()
-    for block in nav
+    if theme.footer.owner.since && theme.footer.owner.since != nowYear
-      .footer-flex-items(style=`${ block.width ? 'flex-grow:' + block.width : '' }`)
+      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
        for blockItem in block.content
          .footer-flex-item
            .footer-flex-title= blockItem.title
            .footer-flex-content
              for subitem in blockItem.item
                if subitem.html
                  div!= subitem.html
                else if subitem.url
                  a(href=url_for(subitem.url), target='_blank' title=subitem.title)= subitem.title
                else if subitem.title
                  div!= subitem.title
 .footer-other
  .footer-copyright
    if owner.enable
      - const currentYear = new Date().getFullYear()
      - const sinceYear = owner.since
      span.copyright
        if sinceYear && sinceYear != currentYear
          != `&copy;&nbsp;${sinceYear} - ${currentYear} By ${config.author}`
    else
-          != `&copy;&nbsp;${currentYear} By ${config.author}`
+      .copyright!= `&copy;${nowYear} By ${config.author}`
-    if copyright.enable
+  if theme.footer.copyright
-      - const v = copyright.version ? getVersion() : false
+    .framework-info
      span.framework-info
        if owner.enable && nav
          span.footer-separator |
      span= _p('footer.framework') + ' '
-        a(href='https://hexo.io')= `Hexo${ v ? ' ' + v.hexo : '' }`
+      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
-        a(href='https://github.com/jerryc127/hexo-theme-butterfly')= `Butterfly${ v ? ' ' + v.theme : '' }`
+      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
-    .footer_custom_text!= theme.footer.custom_text
+    .footer_custom_text!=`${theme.footer.custom_text}`
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -1,18 +1,12 @@
 - var pageTitle
- globalPageType === 'archive' ? page.title = findArchivesTitle(page, theme.menu, date) : ''
+- is_archive() ? page.title = findArchivesTitle(page, theme.menu, date) : ''
-case globalPageType
+- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
-  when 'tag'
+- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
-    - pageTitle = _p('page.tag') + ': ' + page.tag
+- else if (is_current('/404.html', [strict])) pageTitle = _p('error404')
-  when 'category'
+- else pageTitle = page.title || config.title || ''
    - pageTitle = _p('page.category') + ': ' + page.category
  when '404'
    - pageTitle = _p('error404')
  default
    - pageTitle = page.title || config.title || ''
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
- var tabTitle = globalPageType === 'home' || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
+- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
 - var pageAuthor = config.email ? config.author + ',' + config.email : config.author
 - var pageCopyright = config.copyright || config.author
 - var themeColorLight = theme.theme_color && theme.theme_color.enable && theme.theme_color.meta_theme_color_light || '#ffffff'
@@ -31,9 +25,6 @@ meta(name="theme-color" content=themeColor)
 //- Open_Graph
 include ./head/Open_Graph.pug
 //- Structured Data
 include ./head/structured_data.pug
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex(null,config.pretty_urls.trailing_index,config.pretty_urls.trailing_html))
@@ -49,16 +40,14 @@ if (theme.pwa && theme.pwa.enable)
 //- main css
 link(rel='stylesheet', href=url_for(theme.asset.main_css))
-link(rel='stylesheet', href=url_for(theme.asset.fontawesome))
+link(rel='stylesheet', href=url_for(theme.asset.fontawesome) media="print" onload="this.media='all'")
 if (theme.snackbar && theme.snackbar.enable)
  link(rel='stylesheet', href=url_for(theme.asset.snackbar_css) media="print" onload="this.media='all'")
-if theme.lightbox === 'fancybox'
+if theme.fancybox
  link(rel='stylesheet' href=url_for(theme.asset.fancybox_css) media="print" onload="this.media='all'")
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 //- google_adsense
 !=partial('includes/head/google_adsense', {}, {cache: true})
@@ -66,12 +55,15 @@ if theme.lightbox === 'fancybox'
 !=partial('includes/head/analytics', {}, {cache: true})
 //- font
-if theme.blog_title_font && theme.blog_title_font.font_link
+if theme.blog_title_font &&　theme.blog_title_font.font_link
  link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link) media="print" onload="this.media='all'")
 //- global config
 !=partial('includes/head/config', {}, {cache: true})
 include ./head/config_site.pug
 include ./head/noscript.pug
 !=fragment_cache('injectHeadJs', function(){return inject_head_js()})
 !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -2,7 +2,7 @@ if theme.Open_Graph_meta.enable
  -
    const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
    let ogOption = Object.assign({
-      type: globalPageType === 'post' ? 'article' : 'website',
+      type: is_post() ? 'article' : 'website',
      image: coverVal ? full_url_for(coverVal) : '',
      fb_admins: theme.facebook_comments.user_id || '',
      fb_app_id: theme.facebook_comments.app_id || '',
@@ -10,7 +10,5 @@ if theme.Open_Graph_meta.enable
  -
  != open_graph(ogOption)
 else
-  - const description = page.description || page.content || page.title || config.description
+  meta(name="description" content=page_description())
  if description
    meta(name="description" content=truncate(description, 150))
--- a/layout/includes/head/analytics.pug
+++ b/layout/includes/head/analytics.pug
@@ -7,20 +7,14 @@ if theme.baidu_analytics
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    btf.addGlobalFn('pjaxComplete', () => {
      _hmt.push(['_trackPageview',window.location.pathname])
    }, 'baidu_analytics')
 if theme.google_analytics
  script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`)
  script.
-    window.dataLayer = window.dataLayer || []
+    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments)}
+    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date())
+    gtag('js', new Date());
-    gtag('config', '!{theme.google_analytics}')
+    gtag('config', '!{theme.google_analytics}');
    btf.addGlobalFn('pjaxComplete', () => {
      gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname})
    }, 'google_analytics')
 if theme.cloudflare_analytics
  script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`)
@@ -32,14 +26,3 @@ if theme.microsoft_clarity
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "!{theme.microsoft_clarity}");
 if (theme.google_tag_manager && theme.google_tag_manager.tag_id)
  script.
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    "!{theme.google_tag_manager.domain ? theme.google_tag_manager.domain : 'https://www.googletagmanager.com'}/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','!{theme.google_tag_manager.tag_id}');
    btf.addGlobalFn('pjaxComplete', () => {
      dataLayer.push({'event': 'pjaxComplete', 'page_title': document.title, 'page_location': location.href, 'page_path': window.location.pathname})
    }, 'google_tag_manager')
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -1,33 +1,28 @@
 -
-  let algolia = 'undefined'
+  let algolia = 'undefined';
-  if (theme.search.use === 'algolia_search') {
+  let env = process.env;
-    const { ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX_NAME } = process.env
+  if (theme.algolia_search.enable) {
    const { appId, applicationID, apiKey, indexName } = config.algolia
    algolia = JSON.stringify({
-      appId: ALGOLIA_APP_ID || appId || applicationID,
+      appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,
-      apiKey: ALGOLIA_API_KEY || apiKey,
+      apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,
-      indexName: ALGOLIA_INDEX_NAME || indexName,
+      indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
-      hitsPerPage: theme.search.algolia_search.hitsPerPage,
+      hits: theme.algolia_search.hits,
      // search languages
      languages: {
        input_placeholder: _p("search.algolia_search.input_placeholder"),
        hits_empty: _p("search.algolia_search.hits_empty"),
        hits_stats: _p("search.algolia_search.hits_stats"),
      }
    })
  }
-  let localSearch = 'undefined'
+  let localSearch = 'undefined';
-  if (theme.search.use === 'local_search') {
+  if (theme.local_search && theme.local_search.enable) {
    const { CDN, preload, top_n_per_article, pagination, unescape } = theme.search.local_search
    localSearch = JSON.stringify({
-      path: CDN || config.root + config.search.path,
+      path: theme.local_search.CDN ? theme.local_search.CDN : config.root + config.search.path,
-      preload,
+      preload: theme.local_search.preload,
-      top_n_per_article,
+      top_n_per_article: theme.local_search.top_n_per_article,
-      unescape,
+      unescape: theme.local_search.unescape,
      pagination: {
        enable: pagination.enable,
        hitsPerPage: pagination.hitsPerPage
      },
      languages: {
        // search languages
        hits_empty: _p("search.local_search.hits_empty"),
@@ -36,7 +31,7 @@
    })
  }
-  let translate = 'undefined'
+  let translate = 'undefined';
  if (theme.translate && theme.translate.enable){
    translate = JSON.stringify({
      defaultEncoding: theme.translate.defaultEncoding,
@@ -46,7 +41,7 @@
    })
  }
-  let copyright = 'undefined'
+  let copyright = 'undefined';
  if (theme.copy.enable && theme.copy.copyright.enable){
    copyright = JSON.stringify({
      limitCount: theme.copy.copyright.limit_count,
@@ -59,7 +54,7 @@
    })
  }
-  let Snackbar = 'undefined'
+  let Snackbar = 'undefined';
  if (theme.snackbar && theme.snackbar.enable) {
    Snackbar = JSON.stringify({
      chs_to_cht: _p("Snackbar.chs_to_cht"),
@@ -72,16 +67,25 @@
    })
  }
-  let highlightProvider = config.syntax_highlighter || (config.highlight.enable ? 'highlight.js' : config.prismjs.enable ? 'prismjs' : null)
+  let noticeOutdate = 'undefined';
-  const { copy, language, height_limit, fullpage, macStyle, shrink } = theme.code_blocks
+  if (theme.noticeOutdate && theme.noticeOutdate.enable) {
-  let highlight = JSON.stringify({
+    noticeOutdate = JSON.stringify({
-    plugin: highlightProvider,
+      limitDay: theme.noticeOutdate.limit_day,
-    highlightCopy: copy,
+      position: theme.noticeOutdate.position,
-    highlightLang: language,
+      messagePrev: theme.noticeOutdate.message_prev,
-    highlightHeightLimit: height_limit,
+      messageNext: theme.noticeOutdate.message_next,
    highlightFullpage: fullpage,
    highlightMacStyle: macStyle
    })
  }
  let highlight = 'undefined';
  if ((config.highlight && config.highlight.enable) || (config.prismjs && config.prismjs.enable)) {
    highlight = JSON.stringify({
      plugin: config.highlight.enable ? 'highlighjs' : 'prismjs',
      highlightCopy: theme.highlight_copy,
      highlightLang: theme.highlight_lang,
      highlightHeightLimit: theme.highlight_height_limit
    })
  }
 script.
  const GLOBAL_CONFIG = {
@@ -89,6 +93,7 @@ script.
    algolia: !{algolia},
    localSearch: !{localSearch},
    translate: !{translate},
    noticeOutdate: !{noticeOutdate},
    highlight: !{highlight},
    copy: {
      success: '!{_p("copy.success")}',
@@ -99,7 +104,7 @@ script.
      homepage: !{theme.post_meta.page.date_format === 'relative'},
      post: !{theme.post_meta.post.date_format === 'relative'}
    },
-    runtime: '!{theme.aside.card_webinfo.runtime_date ? _p("aside.card_webinfo.runtime.unit") : ""}',
+    runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
    dateSuffix: {
      just: '!{_p("date_suffix.just")}',
      min: '!{_p("date_suffix.min")}',
@@ -108,14 +113,16 @@ script.
      month: '!{_p("date_suffix.month")}'
    },
    copyright: !{copyright},
-    lightbox: '!{ theme.lightbox || 'null' }',
+    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
    Snackbar: !{Snackbar},
-    infinitegrid: {
+    source: {
-      js: '!{url_for(theme.asset.egjs_infinitegrid)}',
+      justifiedGallery: {
-      buttonText: '!{_p("load_more")}'
+        js: '!{url_for(theme.asset.flickr_justified_gallery_js)}',
        css: '!{url_for(theme.asset.flickr_justified_gallery_css)}'
      }
    },
    isPhotoFigcaption: !{theme.photofigcaption},
-    islazyloadPlugin: !{theme.lazyload.enable && !theme.lazyload.native},
+    islazyload: !{theme.lazyload.enable},
    isAnchor: !{theme.anchor.auto_update || false},
    percent: {
      toc: !{theme.toc.scroll_percent},
--- a/layout/includes/head/config_site.pug
+++ b/layout/includes/head/config_site.pug
@@ -2,24 +2,29 @@
  const titleVal = pageTitle.replace(/'/ig,"\\'")
  let isHighlightShrink
-  if (theme.code_blocks.shrink == 'none') isHighlightShrink = 'undefined'
+  if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined'
-  else if (typeof page.highlight_shrink == 'boolean') isHighlightShrink = page.highlight_shrink
+  else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
-  else isHighlightShrink = theme.code_blocks.shrink
+  else isHighlightShrink = theme.highlight_shrink
  var showToc = false
  if (theme.aside.enable && page.aside !== false) {
    let tocEnable = false
-    if (globalPageType === 'post' && theme.toc.post) tocEnable = true
+    if (is_post()) {
-    else if (globalPageType === 'page' && theme.toc.page) tocEnable = true
+      if (theme.toc.post) tocEnable = true
-    const pageToc = typeof page.toc === 'boolean' ? page.toc : tocEnable
+    } else if (is_page()) {
-    showToc = pageToc && (toc(page.content) !== '' || page.encrypt === true)
+      if (theme.toc.page) tocEnable = true
    }
    const pageToc = page.toc === true || page.toc === false ? page.toc : tocEnable
    showToc = pageToc && (toc(page.content) !== '' || page.encrypt == true )
  }
 -
 script#config-diff.
  var GLOBAL_CONFIG_SITE = {
    title: '!{titleVal}',
    isPost: !{is_post()},
    isHome: !{is_home()},
    isHighlightShrink: !{isHighlightShrink},
    isToc: !{showToc},
-    pageType: '!{page.type == 'shuoshuo' ? 'shuoshuo' : globalPageType}'
+    postUpdate: '!{full_date(page.updated)}'
  }
--- a/layout/includes/head/noscript.pug
+++ b/layout/includes/head/noscript.pug
@@ -0,0 +1,14 @@
 noscript. 
  <style type="text/css">
    #nav {
      opacity: 1
    }
    .justified-gallery img {
      opacity: 1
    }
    #recent-posts time,
    #post-meta time {
      display: inline !important
    }
  </style>
--- a/layout/includes/head/preconnect.pug
+++ b/layout/includes/head/preconnect.pug
@@ -1,20 +1,4 @@
-
+link(rel="preconnect" href="//cdn.jsdelivr.net")
  const { internal_provider, third_party_provider, custom_format } = theme.CDN
  const providers = {
    'jsdelivr': '//cdn.jsdelivr.net',
    'cdnjs': '//cdnjs.cloudflare.com',
    'unpkg': '//unpkg.com',
    'custom': custom_format && custom_format.match(/^((https?:)?(\/\/[^/]+)|([^/]+))(\/|$)/)[1]
  }
 -
 if internal_provider === third_party_provider && internal_provider !== 'local'
  link(rel="preconnect" href=providers[internal_provider])
 else
  if internal_provider !== 'local'
    link(rel="preconnect" href=providers[internal_provider])
  if third_party_provider !== 'local'
  link(rel="preconnect" href=providers[third_party_provider])
 if theme.google_analytics
  link(rel="preconnect" href="//www.google-analytics.com" crossorigin='')
--- a/layout/includes/head/pwa.pug
+++ b/layout/includes/head/pwa.pug
@@ -1,13 +1,11 @@
- const { manifest, theme_color, apple_touch_icon, favicon_32_32, favicon_16_16, mask_icon } = theme.pwa
+link(rel="manifest" href=url_for(theme.pwa.manifest))
-
+if(theme.pwa.theme_color) 
-link(rel="manifest" href=url_for(manifest))
+  meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
-if theme_color
+if(theme.pwa.apple_touch_icon) 
-  meta(name="msapplication-TileColor" content=theme_color)
+  link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
-if apple_touch_icon
+if(theme.pwa.favicon_32_32) 
-  link(rel="apple-touch-icon" sizes="180x180" href=url_for(apple_touch_icon))
+  link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
-if favicon_32_32
+if(theme.pwa.favicon_16_16)
-  link(rel="icon" type="image/png" sizes="32x32" href=url_for(favicon_32_32))
+  link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
-if favicon_16_16
+if(theme.pwa.mask_icon)
-  link(rel="icon" type="image/png" sizes="16x16" href=url_for(favicon_16_16))
+  link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")
 if mask_icon
  link(rel="mask-icon" href=url_for(mask_icon) color="#5bbad5")
--- a/layout/includes/head/structured_data.pug
+++ b/layout/includes/head/structured_data.pug
@@ -1,67 +0,0 @@
 if theme.structured_data
  if page.layout === 'post'
    -
      // https://developers.google.com/search/docs/appearance/structured-data/article
      const title = page.title
      const url = page.permalink
      const imageVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
      const image = imageVal ? full_url_for(imageVal) : ''
      const datePublished = page.date.toISOString()
      const dateModified = (page.updated || page.date).toISOString()
      const author = page.copyright_author || config.author
      const authorHrefVal = page.copyright_author_href || theme.post_copyright.author_href || config.url
      const authorHref = full_url_for(authorHrefVal)
      const jsonLd = {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": title,
        "url": url,
        "image": image,
        "datePublished": datePublished,
        "dateModified": dateModified,
        "author": [{
          "@type": "Person",
          "name": author,
          "url": authorHref
        }]
      }
      jsonLdScript = JSON.stringify(jsonLd, null, 2)
    -
  else if is_home() && (!page.current || page.current === 1)
    -
      // https://developers.google.com/search/docs/appearance/site-names#website
      const baseUrl = config.url;
      const currentPath = url_for('/');
      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('/'),
        }
        jsonLdScript = JSON.stringify(jsonLd, null, 2)
      }
    -
  script(type="application/ld+json").
    !{jsonLdScript}
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -1,52 +1,52 @@
 -
  const returnTopImg = img => img !== false ? img || theme.default_top_img : false
  const isFixedClass = theme.nav.fixed ? ' fixed' : ''
  var top_img = false
  let headerClassName = 'not-top-img'
  var bg_img = ''
 if !theme.disable_top_img && page.top_img !== false
-  case globalPageType
+  if is_post()
-    when 'post'
+    - var top_img = page.top_img || page.cover || theme.default_top_img
-      - top_img = page.top_img || page.cover || theme.default_top_img
+  else if is_page()
-    when 'page'
+    - var top_img = page.top_img || theme.default_top_img
-      - top_img = page.top_img || theme.default_top_img
+  else if is_tag()
-    when 'tag'
+    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
-      - top_img = theme.tag_per_img && theme.tag_per_img[page.tag] || returnTopImg(theme.tag_img)
+    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
-    when 'category'
+  else if is_category()
-      - top_img = theme.category_per_img && theme.category_per_img[page.category] || returnTopImg(theme.category_img)
+    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
-    when 'home'
+    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
-      - top_img = returnTopImg(theme.index_img)
+  else if is_home()
-    when 'archive'
+    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
-      - top_img = returnTopImg(theme.archive_img)
+  else if is_archive()
-    default
+    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
-      - top_img = page.top_img || theme.default_top_img
+  else
    - var top_img = page.top_img || theme.default_top_img
  if top_img !== false
-    - bg_img = getBgPath(top_img)
+    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
-    - headerClassName = globalPageType === 'home' ? 'full_page' : globalPageType === 'post' ? 'post-bg' : 'not-home-page'
+    - var bg_img = top_img ? imgSource : ''
    - var site_title = page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
 else
  - var top_img = false
  - var isHomeClass = 'not-top-img'
-header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
+- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
-  include ./nav.pug
+
 header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
-    if globalPageType === 'post'
+    if is_post()
      include ./post-info.pug
-    else if globalPageType === 'home'
+    else if is_home() 
      #site-info
-        h1#site-title=config.title
+        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
-        if theme.social
+        if(theme.social)
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
-        h1#site-title=page.title || page.tag || page.category
+        h1#site-title=site_title
  else
    //- improve seo
    if globalPageType !== 'post'
      h1.title-seo=page.title || page.tag || page.category || config.title
--- a/layout/includes/header/menu_item.pug
+++ b/layout/includes/header/menu_item.pug
@@ -3,25 +3,25 @@ if theme.menu
    each value, label in theme.menu
      if typeof value !== 'object'
        .menus_item
-          - const [link, icon] = value.split('||').map(part => trim(part))
+          - const valueArray = value.split('||')
-          a.site-page(href=url_for(link))
+          a.site-page(href=url_for(trim(valueArray[0])))
-            if icon
+            if valueArray[1]
-              i.fa-fw(class=icon)
+              i.fa-fw(class=trim(valueArray[1]))
            span=' '+label
      else
        .menus_item
-          - const [groupLabel, groupIcon, groupClass] = label.split('||').map(part => trim(part))
+          - const labelArray = label.split('||')
-          - const hideClass = groupClass === 'hide' ? 'hide' : ''
+          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
-          span.site-page.group(class=hideClass)
+          a.site-page.group(class=`${hideClass}` href='javascript:void(0);')
-            if groupIcon
+            if labelArray[1]
-              i.fa-fw(class=groupIcon)
+              i.fa-fw(class=trim(labelArray[1]))
-            span= ' ' + groupLabel
+            span=' '+ trim(labelArray[0])
            i.fas.fa-chevron-down
          ul.menus_item_child
            each val,lab in value 
-              - const [childLink, childIcon] = val.split('||').map(part => trim(part))
+              - const valArray = val.split('||')
              li
-                a.site-page.child(href=url_for(childLink))
+                a.site-page.child(href=url_for(trim(valArray[0])))
-                  if childIcon
+                  if valArray[1]
-                    i.fa-fw(class=childIcon)
+                    i.fa-fw(class=trim(valArray[1]))
                  span=' '+ lab
--- a/layout/includes/header/nav.pug
+++ b/layout/includes/header/nav.pug
@@ -1,26 +1,21 @@
 nav#nav
  span#blog-info
-    a.nav-site-title(href=url_for('/'))
+    a(href=url_for('/') title=config.title)
      if theme.nav.logo
-        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
+        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=config.title
    if globalPageType === 'post' && theme.nav.display_post_title
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
        span.site-name
          i.fa-solid.fa-circle-arrow-left
          span= '  ' + _p('post.back_to_home')
  #menus
-    if theme.search.use
+    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
      #search-button
-        span.site-page.social-icon.search
+        a.site-page.social-icon.search(href="javascript:void(0);")
          i.fas.fa-search.fa-fw
          span=' '+_p('search.title')
    if theme.menu
    !=partial('includes/header/menu_item', {}, {cache: true})
    #toggle-menu
-        span.site-page
+      a.site-page(href="javascript:void(0);")
        i.fas.fa-bars.fa-fw
--- a/layout/includes/header/post-info.pug
+++ b/layout/includes/header/post-info.pug
@@ -7,9 +7,9 @@
  #post-meta
    .meta-firstline
-      if theme.post_meta.post.date_type
+      if (theme.post_meta.post.date_type)
        span.post-meta-date
-          if theme.post_meta.post.date_type === 'both'
+          if (theme.post_meta.post.date_type === 'both')
            i.far.fa-calendar-alt.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.created')
            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
@@ -25,19 +25,20 @@
            i.fa-fw.post-meta-icon(class=date_icon)
            span.post-meta-label= date_title
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
-      if theme.post_meta.post.categories && page.categories.data.length > 0
+      if (theme.post_meta.post.categories && page.categories.data.length > 0)
        span.post-meta-categories
-          if theme.post_meta.post.date_type
+          if (theme.post_meta.post.date_type)
            span.post-meta-separator |
          each item, index in page.categories.data
            i.fas.fa-inbox.fa-fw.post-meta-icon
            a(href=url_for(item.path)).post-meta-categories #[=item.name]
-            if index < page.categories.data.length - 1
+            if (index < page.categories.data.length - 1)
              i.fas.fa-angle-right.post-meta-separator
    .meta-secondline
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
-      if postWordcount
+      if (postWordcount)
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
@@ -54,44 +55,38 @@
      //- for pv and count
      mixin pvBlock(parent_id,parent_class,parent_title)
        span.post-meta-separator |
-        span(class=parent_class id=parent_id data-flag-title=parent_title)
+        span(class=parent_class id=parent_id data-flag-title=page.title)
          i.far.fa-eye.fa-fw.post-meta-icon
          span.post-meta-label=_p('post.page_pv') + ':'
          if block
            block
-      mixin otherPV()
+      - const commentUse = comments.use
-        if theme.umami_analytics.enable && theme.umami_analytics.UV_PV.page_pv
+      if page.comments !== false && commentUse && !comments.lazyload
        if commentUse[0] === 'Valine' && theme.valine.visitor
          +pvBlock(url_for(page.path),'leancloud_visitors',page.title)
            span.leancloud-visitors-count
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Waline' && theme.waline.pageview
          +pvBlock('','','')
-            span#umamiPV(data-path=url_for(page.path))
+            span.waline-pageview-count(data-path=url_for(page.path))
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Twikoo' && theme.twikoo.visitor
          +pvBlock('','','')
            span#twikoo_visitors
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Artalk' && theme.artalk.visitor
          +pvBlock('','','')
            span#ArtalkPV
              i.fa-solid.fa-spinner.fa-spin
        else if theme.busuanzi.page_pv
          +pvBlock('','post-meta-pv-cv','')
            span#busuanzi_value_page_pv
              i.fa-solid.fa-spinner.fa-spin
-
+      else if theme.busuanzi.page_pv
-      - const commentUse = comments.use && comments.use[0]
+        +pvBlock('','post-meta-pv-cv','')
-      if page.comments !== false && commentUse && !comments.lazyload
+          span#busuanzi_value_page_pv
        if commentUse === 'Valine' && theme.valine.visitor
          +pvBlock(url_for(page.path), 'leancloud_visitors', page.title)
            span.leancloud-visitors-count
            i.fa-solid.fa-spinner.fa-spin
        else if commentUse === 'Waline' && theme.waline.pageview
          +pvBlock('', '', '')
            span.waline-pageview-count(data-path=url_for(page.path))
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse === 'Twikoo' && theme.twikoo.visitor
          +pvBlock('', '', '')
            span#twikoo_visitors
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse === 'Artalk' && theme.artalk.visitor
          +pvBlock('', '', '')
            span#ArtalkPV
              i.fa-solid.fa-spinner.fa-spin
        else
          +otherPV()
      else
        +otherPV()
      if comments.count && !comments.lazyload && page.comments !== false && comments.use
        - var whichCount = comments.use[0]
@@ -107,11 +102,13 @@
        case whichCount
          when 'Disqus'
            +countBlock
-              a.disqus-comment-count(href=full_url_for(page.path) + '#post-comment')
+              span.disqus-comment-count
                a(href=full_url_for(page.path) + '#disqus_thread')
                  i.fa-solid.fa-spinner.fa-spin
          when 'Disqusjs'
            +countBlock
-              a.disqusjs-comment-count(href=full_url_for(page.path) + '#post-comment')
+              a(href=full_url_for(page.path) + '#disqusjs')
                span.disqus-comment-count(data-disqus-url=full_url_for(page.path))
                  i.fa-solid.fa-spinner.fa-spin
          when 'Valine'
            +countBlock
@@ -145,5 +142,5 @@
          when 'Artalk'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
-                span#ArtalkCount
+                span.artalk-count
                  i.fa-solid.fa-spinner.fa-spin
--- a/layout/includes/header/social.pug
+++ b/layout/includes/header/social.pug
@@ -1,8 +1,4 @@
 each url, icon in theme.social
-  -
+  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
-    const [link, title, color] = url.split('||').map(i => trim(i))
+  title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-    const href = url_for(link)
+    i(class=icon style=url.split('||')[2] === undefined ? '' : `color: ${trim(url.split('||')[2]).replace(/[\'\"]/g, '')};`)
    const iconStyle = color ? `color: ${color.replace(/[\'\"]/g, '')};` : ''
    const iconTitle = title || ''
  a.social-icon(href=href target="_blank" title=iconTitle)
    i(class=icon style=iconStyle)
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -1,44 +1,22 @@
 - var globalPageType = getPageType(page, is_home)
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = globalPageType === 'archive' ? theme.aside.display.archive: globalPageType === 'category' ? theme.aside.display.category : globalPageType === 'tag' ? theme.aside.display.tag : page.aside
+- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = globalPageType === 'post' ? 'post' : 'page'
+- var pageType = is_post() ? 'post' : 'page'
 - pageType = page.type ? pageType + ' type-' + page.type : pageType
 doctype html
 html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/index', {}, {cache: true})
    if theme.background
-      if !Array.isArray(theme.background)
+      #web_bg
        #web_bg.bg-animation(style=getBgPath(theme.background))
      else
        #web_bg.bg-animation
        - const bgStyleArr = theme.background.map(getBgPath)
        script.
          (() => {
            const arr = !{JSON.stringify(bgStyleArr)}
            const webBgDiv = document.getElementById('web_bg')
            const setRandomBg = () => {
              webBgDiv.style = arr[Math.floor(Math.random() * arr.length)]
              requestAnimationFrame(() => webBgDiv.classList.add('bg-animation'))
            }
            document.addEventListener('pjax:send', () => {
              webBgDiv.style = ''
              webBgDiv.classList.remove('bg-animation')
            })
            document.addEventListener('pjax:complete', setRandomBg)
            document.addEventListener('DOMContentLoaded', setRandomBg)
          })()
    !=partial('includes/sidebar', {}, {cache: true})
    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug
@@ -50,10 +28,20 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
            if theme.aside.enable && page.aside !== false
              include widget/index.pug
-      - const footerBg = theme.footer_img
+        - var footerBg = theme.footer_bg
-      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
+        if (footerBg)
          if (footerBg === true)
            - var footer_bg = bg_img
          else
            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
        else
          - var footer_bg = ''
        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})
    else
      include ./404.pug
    include ./rightside.pug
    include ./additional-js.pug
--- a/layout/includes/loading/fullpage-loading.pug
+++ b/layout/includes/loading/fullpage-loading.pug
@@ -14,7 +14,6 @@ script.
    const $body = document.body
    const preloader = {
      endLoading: () => {
        if ($loadingBox.classList.contains('loaded')) return
        $body.style.overflow = ''
        $loadingBox.classList.add('loaded')
      },
@@ -25,18 +24,10 @@ script.
    }
    preloader.initLoading()
-
+    window.addEventListener('load',() => { preloader.endLoading() })
    if (document.readyState === 'complete') {
      preloader.endLoading()
    } else {
      window.addEventListener('load', preloader.endLoading)
      document.addEventListener('DOMContentLoaded', preloader.endLoading)
      // Add timeout protection: force end after 7 seconds
      setTimeout(preloader.endLoading, 7000)
    }
    if (!{theme.pjax && theme.pjax.enable}) {
-      btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
+      document.addEventListener('pjax:send', () => { preloader.initLoading() })
-      btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
+      document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }
  })()
--- a/layout/includes/loading/index.pug
+++ b/layout/includes/loading/index.pug
@@ -1,4 +1,3 @@
 if theme.preloader.enable
 if theme.preloader.source === 1
  include ./fullpage-loading.pug
 else
--- a/layout/includes/loading/pace.pug
+++ b/layout/includes/loading/pace.pug
@@ -3,10 +3,9 @@ script.
    restartOnPushState: false
  }
-  btf.addGlobalFn('pjaxSend', () => {
+  document.addEventListener('pjax:send', () => {
    Pace.restart()
-  }, 'pace_restart')
+  })
 link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
 script(src=url_for(theme.asset.pace_js))
--- a/layout/includes/mixins/article-sort.pug
+++ b/layout/includes/mixins/article-sort.pug
@@ -1,14 +1,14 @@
 mixin articleSort(posts)
  .article-sort
-    - let year
+    - var year
-    - posts.forEach(article => {
+    - posts.each(function (article) {
-      - const tempYear = date(article.date, 'YYYY')
+      - let tempYear = date(article.date, 'YYYY')
-      - const noCoverClass = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
-      - const title = article.title || _p('no_title')
+      - let title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
-      .article-sort-item(class=noCoverClass)
+      .article-sort-item(class=no_cover)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            if article.cover_type === 'img'
--- a/layout/includes/mixins/indexPostUI.pug
+++ b/layout/includes/mixins/indexPostUI.pug
@@ -1,119 +0,0 @@
 mixin indexPostUI()
  - const indexLayout = theme.index_layout
  - const masonryLayoutClass = [6, 7].includes(indexLayout) ? 'masonry' : ''
  #recent-posts.recent-posts.nc(class=masonryLayoutClass)
    .recent-post-items
      each article, index in page.posts.data
        .recent-post-item
          - const link = article.link || article.path
          - const title = article.title || _p('no_title')
          - const leftOrRight = indexLayout === 3 ? (index % 2 === 0 ? 'left' : 'right') : (indexLayout === 2 ? 'right' : '')
          - const postCover = article.cover
          - const noCover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
          if postCover && theme.cover.index_enable
            .post_cover(class=leftOrRight)
              a(href=url_for(link) title=title)
                if article.cover_type === 'img'
                  img.post-bg(src=url_for(postCover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
                else
                  div.post-bg(style=`background: ${postCover}`)
          .recent-post-info(class=noCover)
            a.article-title(href=url_for(link) title=title)
              if globalPageType === 'home' && (article.top || article.sticky > 0)
                i.fas.fa-thumbtack.sticky
              = title
            .article-meta-wrap
              if theme.post_meta.page.date_type
                span.post-meta-date
                  if theme.post_meta.page.date_type === 'both'
                    i.far.fa-calendar-alt
                    span.article-meta-label=_p('post.created')
                    time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
                    span.article-meta-separator |
                    i.fas.fa-history
                    span.article-meta-label=_p('post.updated')
                    time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))= date(article.updated, config.date_format)
                  else
                    - const isUpdatedType = theme.post_meta.page.date_type === 'updated'
                    - const dateType = isUpdatedType ? 'updated' : 'date'
                    - const dateIcon = isUpdatedType ? 'fas fa-history' : 'far fa-calendar-alt'
                    - const dateTitle = isUpdatedType ? _p('post.updated') : _p('post.created')
                    i(class=dateIcon)
                    span.article-meta-label= dateTitle
                    time(datetime=date_xml(article[dateType]) title=dateTitle + ' ' + full_date(article[dateType]))= date(article[dateType], config.date_format)
              if theme.post_meta.page.categories && article.categories.data.length > 0
                span.article-meta
                  span.article-meta-separator |
                  each item, index in article.categories.data
                    i.fas.fa-inbox
                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
                    if index < article.categories.data.length - 1
                      i.fas.fa-angle-right.article-meta-link
              if theme.post_meta.page.tags && article.tags.length > 0
                span.article-meta.tags
                  span.article-meta-separator |
                  each item, index in article.tags.data
                    i.fas.fa-tag
                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
                    if index < article.tags.data.length - 1
                      span.article-meta-link #[='•']
              mixin countBlockInIndex
                - needLoadCountJs = true
                span.article-meta
                  span.article-meta-separator |
                  i.fas.fa-comments
                  if block
                    block
                  span.article-meta-label= ' ' + _p('card_post_count')
              if theme.comments.card_post_count && theme.comments.use
                - const commentSystem = theme.comments.use[0]
                - const commentLink = url_for(link) + '#post-comment'
                case commentSystem
                  when 'Disqus'
                  when 'Disqusjs'
                    +countBlockInIndex
                      a.disqus-count(href=full_url_for(link) + '#post-comment')
                        i.fa-solid.fa-spinner.fa-spin
                  when 'Valine'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.valine-comment-count(data-xid=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Waline'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.waline-comment-count(data-path=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Twikoo'
                    +countBlockInIndex
                      a.twikoo-count(href=commentLink)
                        i.fa-solid.fa-spinner.fa-spin
                  when 'Facebook Comments'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.fb-comments-count(data-href=urlNoIndex(article.permalink))
                  when 'Remark42'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.remark42__counter(data-url=urlNoIndex(article.permalink))
                          i.fa-solid.fa-spinner.fa-spin
                  when 'Artalk'
                    +countBlockInIndex
                      a(href=commentLink)
                        span.artalk-count(data-page-key=url_for(link))
                          i.fa-solid.fa-spinner.fa-spin
            //- Display the article introduction on homepage
            - const content = postDesc(article)
            if content
              .content!=content
        if theme.ad && theme.ad.index
          if (index + 1) % 3 === 0
            .recent-post-item.ads-wrap!= theme.ad.index
    include ../pagination.pug
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -0,0 +1,135 @@
 mixin postUI(posts)
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
        a.article-title(href=url_for(link) title=title)= title
        .article-meta-wrap
          if (is_home() && (article.top || article.sticky > 0))
            span.article-meta
              i.fas.fa-thumbtack.sticky
              span.sticky= _p('sticky')
              span.article-meta-separator |
          if (theme.post_meta.page.date_type)
            span.post-meta-date
              if (theme.post_meta.page.date_type === 'both')
                i.far.fa-calendar-alt
                span.article-meta-label=_p('post.created')
                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                span.article-meta-separator |
                i.fas.fa-history
                span.article-meta-label=_p('post.updated')
                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
              else
                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                - let date_type = data_type_updated ? 'updated' : 'date'
                - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                i(class=date_icon)
                span.article-meta-label=date_title
                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
          if (theme.post_meta.page.categories && article.categories.data.length > 0)
            span.article-meta
              span.article-meta-separator |
              i.fas.fa-inbox
              each item, index in article.categories.data
                a(href=url_for(item.path)).article-meta__categories #[=item.name]
                if (index < article.categories.data.length - 1)
                  i.fas.fa-angle-right.article-meta-link
          if (theme.post_meta.page.tags && article.tags.data.length > 0)
            span.article-meta.tags
              span.article-meta-separator |
              i.fas.fa-tag
              each item, index in article.tags.data
                a(href=url_for(item.path)).article-meta__tags #[=item.name]
                if (index < article.tags.data.length - 1)
                  span.article-meta-link #[='•']
          mixin countBlockInIndex
            - needLoadCountJs = true
            span.article-meta
              span.article-meta-separator |
              i.fas.fa-comments
              if block
                block
              span.article-meta-label= ' ' + _p('card_post_count')
          if theme.comments.card_post_count && theme.comments.use
            case theme.comments.use[0]
              when 'Disqus'
                +countBlockInIndex
                  a(href=full_url_for(link) + '#disqus_thread')
                    i.fa-solid.fa-spinner.fa-spin
              when 'Disqusjs'
                +countBlockInIndex
                  a(href=full_url_for(link) + '#disqusjs')
                    span.disqus-comment-count(data-disqus-url=full_url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Valine'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.valine-comment-count(data-xid=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Waline'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.waline-comment-count(data-path=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Twikoo'
                +countBlockInIndex
                  a.twikoo-count(href=url_for(link) + '#post-comment')
                    i.fa-solid.fa-spinner.fa-spin
              when 'Facebook Comments'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.fb-comments-count(data-href=urlNoIndex(article.permalink))
              when 'Remark42'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.remark42__counter(data-url=urlNoIndex(article.permalink))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Artalk'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.artalk-count(data-page-key=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
        //- Display the article introduction on homepage
        case theme.index_post_content.method
          when false
            - break
          when 1
            .content!= article.description
          when 2
            if article.description
              .content!= article.description
            else
              - const content = strip_html(article.content)
              - let expert = content.substring(0, theme.index_post_content.length) 
              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
              .content!= expert
          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length) 
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert
    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
        .recent-post-item.ads-wrap!=theme.ad.index
--- a/layout/includes/page/404.pug
+++ b/layout/includes/page/404.pug
@@ -1,8 +0,0 @@
 - var top_img_404 = theme.error_404.background || theme.default_top_img
 .error-content
  .error-img
    img(src=url_for(top_img_404) alt='Page not found')
  .error-info
    h1.error_title= '404'
    .error_subtitle= theme.error_404.subtitle || _p('error404')
--- a/layout/includes/page/default-page.pug
+++ b/layout/includes/page/default-page.pug
@@ -1,2 +1,2 @@
-#article-container.container
+#article-container
  != page.content
--- a/layout/includes/page/flink.pug
+++ b/layout/includes/page/flink.pug
@@ -1,4 +1,4 @@
-#article-container.container
+#article-container
  .flink
    - let { content, random, flink_url } = page
    - let pageContent = content
--- a/layout/includes/page/shuoshuo.pug
+++ b/layout/includes/page/shuoshuo.pug
@@ -1,332 +0,0 @@
 //- - author:
 //-   avatar:
 //-   date:
 //-   content:
 //-   tags:
 //-     - tag1
 //-     - tag2
 - page.toc = false
 #article-container
  if page.shuoshuo_url || (site.data.shuoshuo && site.data.shuoshuo.length)
    if page.comments !== false && theme.comments.use
      - commentsJsLoad = true
      script.
        (() => {
          const commentDiv = `!{partial('includes/third-party/comments/index', {}, {cache: true})}`
          const runDestroy = (shuoshuoComment) => {
            if (!shuoshuoComment) return
            for (const [key, fn] of Object.entries(shuoshuoComment)) {
              if (key.startsWith('destroy')) fn()
            }
          }
          window.addCommentToShuoshuo = e => {
            const btn = e.target.closest('.shuoshuo-comment-btn')
            if (!btn) return
            const ele = btn.closest('.container').nextElementSibling
            const { shuoshuoComment } = window
            const isInclude = ele.classList.contains('no-comment')
            runDestroy(shuoshuoComment)
            if (isInclude) {
              ele.classList.remove('no-comment')
              ele.innerHTML = commentDiv
              const key = `${location.pathname.replace(/\/$/, '')}?key=${ele.getAttribute('data-key')}`
              btf.switchComments(ele, key)
              shuoshuoComment.loadComment && shuoshuoComment.loadComment(ele, key)
            }
          }
        })()
    - const localDate = page.shuoshuo_url ? [] : shuoshuoFN(site.data.shuoshuo, page)
    if !page.shuoshuo_url
      script(type='application/json' id='shuoshuo-data')!= safeJSON(localDate)
    - const { enable, native, placeholder, field } = theme.lazyload
    script.
      (() => {
        const limitConfig = !{ JSON.stringify(page.limit || {}) }
        const sortDataByDate = data => data.sort((a, b) => new Date(b.date) - new Date(a.date))
        const filterDataByLimit = (data, limit) => {
          if (!limit || !limit.type) return data
          if (limit.type === 'num') return data.slice(0, limit.value)
          if (limit.type === 'date') {
            const limitDate = new Date(limit.value)
            return data.filter(item => new Date(item.date) >= limitDate)
          }
          return data
        };
        const formatToTimeZone = (date) => {
          const fullDate = date.length === 10 ? `${date} 00:00:00` : date
          const visitorTimeZone = '#{config.timezone}' || Intl.DateTimeFormat().resolvedOptions().timeZone
          const options = {
            timeZone: visitorTimeZone,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
          }
          const [day, month, year, hour, minute, second] = new Intl.DateTimeFormat('en-GB', options)
            .format(new Date(fullDate))
            .match(/\d+/g)
          return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }
        const addLazyload = str => {
          const config = {
            enable: !{Boolean(enable)},
            native: !{Boolean(native)},
            field: '!{field}',
            placeholder: '!{url_for(placeholder)}',
          }
          if (!config.enable || config.field !== 'site') return str
          const parser = new DOMParser()
          const doc = parser.parseFromString(str, 'text/html')
          const images = doc.querySelectorAll('img')
          images.forEach(img => {
            if (config.native) {
              img.setAttribute('loading', 'lazy')
            } else {
              const src = img.getAttribute('src')
              img.setAttribute('data-lazy-src', src)
              if (config.placeholder) {
                img.setAttribute('src', config.placeholder)
              } else {
                img.removeAttribute('src')
              }
            }
          })
          return doc.body.innerHTML
        }
        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">${addLazyload(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 {
            let originData = []
            if (!{Boolean(page.shuoshuo_url)}) {
              const response = await fetch('!{url_for(page.shuoshuo_url)}')
              originData = await response.json()
            } else {
              const dataElement = document.getElementById('shuoshuo-data')
              originData = dataElement ? JSON.parse(dataElement.textContent) : []
            }
            data = filterDataByLimit(sortDataByDate(originData), limitConfig)
            totalPages = Math.ceil(data.length / itemsPerPage)
            renderPage(currentPage)
          } catch (error) {
            console.error(error)
          }
        };
        window.pjax ? loadShuoshuo() : window.addEventListener('load', loadShuoshuo)
      })()
--- a/layout/includes/page/tags.pug
+++ b/layout/includes/page/tags.pug
@@ -1,2 +1,2 @@
-.tag-cloud-list.text-center
+.tag-cloud-list.is-center
-  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', custom_colors: page.custom_colors})
+  !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})
--- a/layout/includes/pagination.pug
+++ b/layout/includes/pagination.pug
@@ -1,4 +1,3 @@
 if page.total !== 1
 -
  var options = {
    prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
@@ -7,32 +6,36 @@ if page.total !== 1
    escape: false
  }
-  if globalPageType === 'post'
+if is_post()
-    - let paginationOrder = theme.post_pagination === 2 ? { prev: page.prev, next: page.next } : { prev: page.next, next: page.prev }
+  - let prev = theme.post_pagination === 1 ? page.prev : page.next
-
+  - let next = theme.post_pagination === 1 ? page.next : page.prev
  nav#pagination.pagination-post
-      each direction, key in paginationOrder
+    if(prev)
-        if direction
+      - var hasPageNext = next ? 'pull-left' : 'pull-full'
-          - const getPostDesc = direction.postDesc || postDesc(direction)
+      .prev-post(class=hasPageNext)
-          - let className = key === 'prev' ? (paginationOrder.next ? '' : 'full-width') : (paginationOrder.prev ? '' : 'full-width')
+        a(href=url_for(prev.path) title=prev.title)
-          - className = getPostDesc ? className : className + ' no-desc'
+          if prev.cover_type === 'img'
-
+            img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
          a.pagination-related(class=className href=url_for(direction.path) title=direction.title)
            if direction.cover_type === 'img'
              img.cover(src=url_for(direction.pagination_cover || direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
          else
-              .cover(style=`background: ${direction.cover || 'var(--default-bg-color)'}`)
+            .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
          .pagination-info
            .label=_p('pagination.prev')
            .prev_info=prev.title
-            .info(class=key === 'prev' ? '' : 'text-right')
+    if(next)
-              .info-1
+      - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
-                .info-item-1=_p(`pagination.${key}`)
+      .next-post(class=hasPagePrev)
-                .info-item-2!=direction.title
+        a(href=url_for(next.path) title=next.title)
-              if getPostDesc
+          if next.cover_type === 'img'
-                .info-2
+            img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
-                  .info-item-1!=getPostDesc
+          else
            .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
          .pagination-info
            .label=_p('pagination.next')
            .next_info=next.title
 else
  nav#pagination
    .pagination
-        if globalPageType === 'home'
+      if is_home()
        - options.format = 'page/%d/#content-inner'
      !=paginator(options)
--- a/layout/includes/post/outdate-notice.pug
+++ b/layout/includes/post/outdate-notice.pug
@@ -1,8 +0,0 @@
 - const { limit_day, message_prev, message_next, position} = theme.noticeOutdate
 - const notice_data = { limitDay: limit_day, messagePrev: message_prev, messageNext: message_next, postUpdate: full_date(page.updated)}
 if position === 'top'
  #post-outdate-notice(data=notice_data hidden)
  !=page.content
 else
  !=page.content
  #post-outdate-notice(data=notice_data hidden)
--- a/layout/includes/post/post-copyright.pug
+++ b/layout/includes/post/post-copyright.pug
@@ -1,23 +1,17 @@
 if theme.post_copyright.enable && page.copyright !== false
-  - const author = page.copyright_author || config.author
+  - let author = page.copyright_author || config.author
-  - const authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
+  - let authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
-  - const url = page.copyright_url || page.permalink
+  - let url = page.copyright_url || page.permalink
-  - const info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
+  - let info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
  .post-copyright
    .post-copyright__author
-      span.post-copyright-meta
+      span.post-copyright-meta= _p('post.copyright.author') + ": "
        i.fas.fa-circle-user.fa-fw
        = _p('post.copyright.author') + ": "
      span.post-copyright-info
        a(href=authorHref)=author
    .post-copyright__type
-      span.post-copyright-meta
+      span.post-copyright-meta= _p('post.copyright.link') + ": "
        i.fas.fa-square-arrow-up-right.fa-fw
        = _p('post.copyright.link') + ": "
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright__notice
-      span.post-copyright-meta
+      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
        i.fas.fa-circle-exclamation.fa-fw
        = _p('post.copyright.copyright_notice') + ": "
      span.post-copyright-info!= info
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -1,12 +1,13 @@
 .post-reward
  .reward-button
    i.fas.fa-qrcode
-    = theme.reward.text || _p('donate')
+    = ' ' + _p('donate')
  .reward-main
    ul.reward-all
      each item in theme.reward.QR_code
-        - const clickTo = item.link || item.img
+        - var clickTo = item.link ? item.link : item.img
        li.reward-item
          a(href=url_for(clickTo) target='_blank')
            img.post-qr-code-img(src=url_for(item.img) alt=item.text)
          .post-qr-code-desc=item.text
--- a/layout/includes/rightside.pug
+++ b/layout/includes/rightside.pug
@@ -1,10 +1,9 @@
- const { readmode, translate, darkmode, aside, chat } = theme
+- const { readmode, translate, darkmode, aside, chat_btn } = theme
 mixin rightsideItem(array)
  each item in array
    case item
      when 'readmode'
-        if globalPageType === 'post' && readmode
+        if is_post() && readmode
          button#readmode(type="button" title=_p('rightside.readmode_title'))
            i.fas.fa-book-open
      when 'translate'
@@ -23,30 +22,38 @@ mixin rightsideItem(array)
          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
            i.fas.fa-list-ul
      when 'chat'
-        if chat.rightside_button && chat.use
+        if chat_btn
-          button#chat-btn(type="button" title=_p("rightside.chat") style="display:none")
+          button#chat-btn(type="button" title=_p("rightside.chat"))
-            i.fas.fa-message
+            i.fas.fa-sms
      when 'comment'
        if commentsJsLoad
          a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
            i.fas.fa-comments
 - const { enable, hide, show } = theme.rightside_item_order
 - const hideArray = enable && hide ? hide.split(',') : ['readmode','translate','darkmode','hideAside']
 - const showArray = enable && show ? show.split(',') : ['toc','chat','comment']
 - const needCogBtn = (enable && hide) || (!enable && ((globalPageType === 'post' && (readmode || translate.enable || (darkmode.enable && darkmode.button))) || (translate.enable || (darkmode.enable && darkmode.button))))
 #rightside
  - const { enable, hide, show } = theme.rightside_item_order
  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
  #rightside-config-hide
-    if hideArray.length
+    if hideArray
      +rightsideItem(hideArray)
  #rightside-config-show
-    if needCogBtn
+    if enable
-      button#rightside-config(type="button" title=_p("rightside.setting"))
+      if hide
-        i.fas.fa-cog(class=theme.rightside_config_animation ? 'fa-spin' : '')
+        button#rightside_config(type="button" title=_p("rightside.setting"))
          i.fas.fa-cog.fa-spin
    else
      if is_post()
        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
          button#rightside_config(type="button" title=_p("rightside.setting"))
            i.fas.fa-cog.fa-spin
      else if translate.enable || (darkmode.enable && darkmode.button)
        button#rightside_config(type="button" title=_p("rightside.setting"))
          i.fas.fa-cog.fa-spin
-    if showArray.length
+    if showArray
      +rightsideItem(showArray)
    button#go-up(type="button" title=_p("rightside.back_to_top"))
--- a/layout/includes/sidebar.pug
+++ b/layout/includes/sidebar.pug
@@ -1,18 +1,18 @@
 if theme.menu
 #sidebar
  #menu-mask
  #sidebar-menus
-      .avatar-img.text-center
+    .avatar-img.is-center
-        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.flink)}'` alt="avatar")
+      img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
-      .site-data.text-center
+    .sidebar-site-data.site-data.is-center
-        a(href=`${url_for(config.archive_dir)}/`)
+      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles') 
        .length-num= site.posts.length
-        a(href=`${url_for(config.tag_dir)}/`)
+      a(href=url_for(config.tag_dir) + '/' )
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-        a(href=`${url_for(config.category_dir)}/`)
+      a(href=url_for(config.category_dir) + '/')
        .headline= _p('aside.categories') 
        .length-num= site.categories.length
    hr.custom-hr
    !=partial('includes/header/menu_item', {}, {cache: true})
--- a/layout/includes/third-party/abcjs/abcjs.pug
+++ b/layout/includes/third-party/abcjs/abcjs.pug
@@ -1,46 +1,15 @@
 script.
  (() => {
-    const abcjsInit = () => {
+    function abcjsInit() {
-      const abcjsFn = () => {
+      function abcjsFn() {
-        setTimeout(() => {
+        for (let abcContainer of document.getElementsByClassName("abc-music-sheet")) {
-          const sheets = document.querySelectorAll(".abc-music-sheet")
+          ABCJS.renderAbc(abcContainer, abcContainer.innerHTML, {responsive: 'resize'})
          for (let i = 0; i < sheets.length; i++) {
            const ele = sheets[i]
            if (ele.children.length > 0) continue
            // Parse parameters from data-params attribute
            let params = {}
            const dp = ele.getAttribute("data-params")
            if (dp) {
              try {
                params = JSON.parse(dp)
              } catch (e) {
                console.error("Failed to parse data-params:", e)
        }
      }
-            // Merge parsed parameters with the responsive option
+      typeof ABCJS === 'object' ? abcjsFn()
-            // Ensures params content appears before responsive
+        : getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
            const options = { ...params, responsive: "resize" }
            // Render the music score using ABCJS.renderAbc
            ABCJS.renderAbc(ele, ele.textContent, options)
          }
        }, 100)
    }
-      if (typeof ABCJS === "object") {
+    window.pjax ? abcjsInit() : document.addEventListener('DOMContentLoaded', abcjsInit)
        abcjsFn()
      } else {
        btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn)
      }
    }
    if (window.pjax) {
      abcjsInit()
    } else {
      window.addEventListener("load", abcjsInit)
    }
    btf.addGlobalFn("encrypt", abcjsInit, "abcjs")
  })()
--- a/layout/includes/third-party/abcjs/index.pug
+++ b/layout/includes/third-party/abcjs/index.pug
@@ -1,3 +1,6 @@
-if theme.abcjs.enable
+if theme.abcjs && theme.abcjs.enable
-  if theme.abcjs.per_page && (['post','page'].includes(globalPageType)) || page.abcjs
+  if theme.abcjs.per_page
    if is_post() || is_page()
      include ./abcjs.pug
  else if page.abcjs
    include ./abcjs.pug
--- a/layout/includes/third-party/aplayer.pug
+++ b/layout/includes/third-party/aplayer.pug
@@ -1,23 +1,3 @@
 link(rel='stylesheet' href=url_for(theme.asset.aplayer_css) media="print" onload="this.media='all'")
 script(src=url_for(theme.asset.aplayer_js))
 script(src=url_for(theme.asset.meting_js))
 if theme.pjax.enable
  script.
    (() => {
      const destroyAplayer = () => {
        if (window.aplayers) {
          for (let i = 0; i < window.aplayers.length; i++) {
            if (!window.aplayers[i].options.fixed) {
              window.aplayers[i].destroy()
            }
          }
        }
      }
      const runMetingJS = () => {
        typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
      }
      btf.addGlobalFn('pjaxSend', destroyAplayer, 'destroyAplayer')
      btf.addGlobalFn('pjaxComplete', loadMeting, 'runMetingJS')
    })()
--- a/layout/includes/third-party/card-post-count/artalk.pug
+++ b/layout/includes/third-party/card-post-count/artalk.pug
@@ -8,15 +8,19 @@ script.
        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
        const headerList = {
-          method: 'GET',
+          method: 'POST',
-        }
+          headers: {
-
+            'Content-Type': 'application/x-www-form-urlencoded',
-        const searchParams = new URLSearchParams({
+            'Origin': window.location.origin
          },
          body: new URLSearchParams({
            'site_name': '!{site}',
            'type':'page_comment',
            'page_keys': keyArray
          })
        }
-        const res = await fetch(`!{server}/api/v2/stats/page_comment?${searchParams}`, headerList)
+        const res = await fetch('!{server}/api/stat', headerList)
        const result = await res.json()
        keyArray.forEach((key, index) => {
--- a/layout/includes/third-party/card-post-count/disqus.pug
+++ b/layout/includes/third-party/card-post-count/disqus.pug
@@ -1,25 +1,16 @@
 - const { shortname, apikey } = theme.disqus
 script.
  (() => {
-    const getCount = async () => {
+    const getCount = () => {
-      try {
+      if (window.DISQUSWIDGETS === undefined) {
-        const eleGroup = document.querySelectorAll('#recent-posts .disqus-count')
+        var d = document, s = d.createElement('script');
-        const cleanedLinks = Array.from(eleGroup).map(i => `thread:link=${i.href.replace(/#post-comment$/, '')}`);
+        s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
-
+        s.id = 'dsq-count-scr';
-        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{shortname}&api_key=!{apikey}&${cleanedLinks.join('&')}`,{
+        (d.head || d.body).appendChild(s);
-          method: 'GET'
+      } else {
-        })
+        DISQUSWIDGETS.getCount({reset: true});
        const result = await res.json()
        eleGroup.forEach(i => {
          const cleanedLink = i.href.replace(/#post-comment$/, '')
          const urlData = result.response.find(data => data.link === cleanedLink) || { posts: 0 }
          i.textContent = urlData.posts
        })
      } catch (err) {
        console.error(err)
      }
    }
    window.pjax ? getCount() : window.addEventListener('load', getCount)
  })()
--- a/layout/includes/third-party/card-post-count/fb.pug
+++ b/layout/includes/third-party/card-post-count/fb.pug
@@ -1,5 +1,5 @@
- const fbSDKVer = 'v20.0'
+- const fbSDKVer = 'v16.0'
- const fbSDK = `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
 script.
  (()=>{
--- a/layout/includes/third-party/card-post-count/twikoo.pug
+++ b/layout/includes/third-party/card-post-count/twikoo.pug
@@ -18,9 +18,7 @@ script.
          includeReply: false
        }).then(function (res) {
          document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
            if (res[index]) {
            item.textContent = res[index].count
            }
          })
        }).catch(function (err) {
          console.log(err)
@@ -30,7 +28,7 @@ script.
        if (typeof twikoo === 'object') {
          runTwikoo()
        } else {
-          btf.getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
+          getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
        }
    }
--- a/layout/includes/third-party/card-post-count/valine.pug
+++ b/layout/includes/third-party/card-post-count/valine.pug
@@ -13,7 +13,7 @@ script.
      }
      if (typeof Valine === 'function') initValine() 
-      else btf.getScript('!{url_for(theme.asset.valine)}').then(initValine)
+      else getScript('!{url_for(theme.asset.valine)}').then(initValine)
    }
    window.pjax ? loadValine() : window.addEventListener('load', loadValine)
--- a/layout/includes/third-party/card-post-count/waline.pug
+++ b/layout/includes/third-party/card-post-count/waline.pug
@@ -1,4 +1,3 @@
 - const serverURL = theme.waline.serverURL.replace(/\/$/, '')
 script.
  (() => {
    async function loadWaline () {
@@ -6,7 +5,7 @@ script.
        const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count')
        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path'))
-        const res = await fetch(`!{serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
+        const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
        const result = await res.json()
        result.data.forEach((count, index) => {
--- a/layout/includes/third-party/chat/chatra.pug
+++ b/layout/includes/third-party/chat/chatra.pug
@@ -1,14 +1,8 @@
 //- https://chatra.io/help/api/
 script.
  (() => {
-    window.ChatraID = '#{theme.chatra.id}'
+    const isChatBtn = !{theme.chat_btn}
-    window.Chatra = window.Chatra || function() {
+    const isChatHideShow = !{theme.chat_hide_show}
      (window.Chatra.q = window.Chatra.q || []).push(arguments)
    }
    btf.getScript('https://call.chatra.io/chatra.js').then(() => {
      const isChatBtn = !{theme.chat.rightside_button}
      const isChatHideShow = !{theme.chat.button_hide_show}
    if (isChatBtn) {
      const close = () => {
@@ -21,18 +15,36 @@ script.
        Chatra('show')
      }
-        window.ChatraSetup = { startHidden: true }
+      window.ChatraSetup = {
        startHidden: true
      }
-        window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
+      window.chatBtnFn = () => {
-
+        const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
-        document.getElementById('chat-btn').style.display = 'block'
+        isShow ? close() : open()
      }
    } else if (isChatHideShow) {
      window.chatBtn = {
-          hide: () => Chatra('hide'),
+        hide: () => {
-          show: () => Chatra('show')
+          Chatra('hide')
        },
        show: () => {
          Chatra('show')
        }
      }
-    })
+    }
    (function(d, w, c) {
      w.ChatraID = '#{theme.chatra.id}'
      var s = d.createElement('script')
      w[c] = w[c] || function() {
          (w[c].q = w[c].q || []).push(arguments)
      }
      s.async = true
      s.src = 'https://call.chatra.io/chatra.js'
      if (d.head) d.head.appendChild(s)
    })(document, window, 'Chatra')
  })()
--- a/layout/includes/third-party/chat/crisp.pug
+++ b/layout/includes/third-party/chat/crisp.pug
@@ -1,11 +1,18 @@
 script.
  (() => {
-    window.$crisp = ['safe', true]
+    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
    (function () {
      d = document;
      s = d.createElement("script");
      s.src = "https://client.crisp.chat/l.js";
      s.async = 1;
      d.getElementsByTagName("head")[0].appendChild(s);
    })();
    $crisp.push(["safe", true])
-    btf.getScript('https://client.crisp.chat/l.js').then(() => {
+    const isChatBtn = !{theme.chat_btn}
-      const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat_hide_show}
      const isChatHideShow = !{theme.chat.button_hide_show}
    if (isChatBtn) {
      const open = () => {
@@ -13,20 +20,26 @@ script.
        $crisp.push(["do", "chat:open"])
      }
-        const close = () => $crisp.push(["do", "chat:hide"])
+      const close = () => {
        $crisp.push(["do", "chat:hide"])
      }
      close()
      $crisp.push(["on", "chat:closed", function() {
        close()
      }])
-        $crisp.push(["on", "chat:closed", close])
+      window.chatBtnFn = () => {
-
+        $crisp.is("chat:visible") ? close() : open()
-        window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
+      }
        document.getElementById('chat-btn').style.display = 'block'
    } else if (isChatHideShow) {
      window.chatBtn = {
-          hide: () => $crisp.push(["do", "chat:hide"]),
+        hide: () => {
-          show: () => $crisp.push(["do", "chat:show"])
+          $crisp.push(["do", "chat:hide"])
        },
        show: () => {
          $crisp.push(["do", "chat:show"])
        }
      }
    }
    })
  })()
--- a/layout/includes/third-party/chat/daovoice.pug
+++ b/layout/includes/third-party/chat/daovoice.pug
@@ -0,0 +1,40 @@
 //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
 script.
  (() => {
    (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
    const isChatBtn = !{theme.chat_btn}
    const isChatHideShow = !{theme.chat_hide_show}
    daovoice('init', {
      app_id: '!{theme.daovoice.app_id}',},{
      launcher: { 
        disableLauncherIcon: isChatBtn
      },
    });
    daovoice('update');
    if (isChatBtn) {
      window.chatBtnFn = () => {
        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
        isShow ? daovoice('hide') : daovoice('show')
      }
    } else if (isChatHideShow) {
      window.chatBtn = {
        hide: () => {
          daovoice('update', {},{
            launcher: {
              disableLauncherIcon: true
            }
          })
        },
        show: () => {
          daovoice('update', {}, {
            launcher: {
              disableLauncherIcon: false
            }
          })
        }
      }
    }
  })()
--- a/layout/includes/third-party/chat/index.pug
+++ b/layout/includes/third-party/chat/index.pug
@@ -1,7 +1,10 @@
-case theme.chat.use
+if theme.chatra && theme.chatra.enable
  when 'chatra'
  include ./chatra.pug
-  when 'tidio'
+else if theme.tidio && theme.tidio.enable
  include ./tidio.pug
-  when 'crisp'
+else if theme.daovoice && theme.daovoice.enable
  include ./daovoice.pug
 else if theme.crisp && theme.crisp.enable
  include ./crisp.pug
 else if theme.messenger && theme.messenger.enable
  include ./messenger.pug
--- a/layout/includes/third-party/chat/messenger.pug
+++ b/layout/includes/third-party/chat/messenger.pug
@@ -0,0 +1,44 @@
 - let { pageID, lang } = theme.messenger
 - lang = theme.comments.use && theme.comments.use.includes('Facebook Comments') ? theme.facebook_comments.lang : lang
 #fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox')
 script.
  (() => {
    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
        version: 'v16.0'
      });
    };
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    const isChatBtn = !{theme.chat_btn}
    const isChatHideShow = !{theme.chat_hide_show}
    if (isChatBtn) {
      window.chatBtnFn = () => {
        const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2')
        isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show()
      }
    } else if (isChatHideShow) {
      window.chatBtn = {
        hide: () => {
          FB.CustomerChat.hide()
        },
        show: () => {
          FB.CustomerChat.show(false)
        }
      }
    }
  })()
--- a/layout/includes/third-party/chat/tidio.pug
+++ b/layout/includes/third-party/chat/tidio.pug
@@ -1,8 +1,8 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 script.
  (() => {
-    btf.getScript('//code.tidio.co/!{theme.tidio.public_key}.js').then(() => {
+    const isChatBtn = !{theme.chat_btn}
-      const isChatBtn = !{theme.chat.rightside_button}
+    const isChatHideShow = !{theme.chat_hide_show}
      const isChatHideShow = !{theme.chat.button_hide_show}
    if (isChatBtn) {
      let isShow = false
@@ -31,15 +31,15 @@ script.
        if (!window.tidioChatApi) return
        isShow ? close() : open()
      }
        document.getElementById('chat-btn').style.display = 'block'
    } else if (isChatHideShow) {
      window.chatBtn = {
-          hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
+        hide: () => {
-          show: () => window.tidioChatApi && window.tidioChatApi.show()
+          window.tidioChatApi && window.tidioChatApi.hide()
        },
        show: () => {
          window.tidioChatApi && window.tidioChatApi.show()
        }
      }
    }
    })
  })()
--- a/layout/includes/third-party/comments/artalk.pug
+++ b/layout/includes/third-party/comments/artalk.pug
@@ -1,73 +1,50 @@
 - const { server, site, option } = theme.artalk
 - const { use, lazyload } = theme.comments
 script.
-  (() => {
+  function loadArtalk () {
-    let artalkItem = null
+    function initArtalk () {
-    const option = !{JSON.stringify(option)}
+      window.artalkItem = new Artalk(Object.assign({
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+        el: '#artalk-wrap',
    const destroyArtalk = () => {
      if (artalkItem) {
        artalkItem.destroy()
        artalkItem = null
      }
    }
    const artalkChangeMode = theme => artalkItem && artalkItem.setDarkMode(theme === 'dark')
    const initArtalk = (el = document, pageKey = location.pathname) => {
      artalkItem = Artalk.init({
        el: el.querySelector('#artalk-wrap'),
        server: '!{server}',
        site: '!{site}',
        pageKey: location.pathname,
        darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
-        ...option,
+        countEl: '.artalk-count'
-        pageKey: isShuoshuo ? pageKey : (option && option.pageKey) || pageKey
+      },!{JSON.stringify(option)}))
      })
      if (GLOBAL_CONFIG.lightbox === 'null') return
-      artalkItem.on('list-loaded', () => {
+      window.artalkItem.use(ctx => {
-        artalkItem.ctx.get('list').getCommentNodes().forEach(comment => {
+        ctx.on('list-loaded', () => {
          ctx.getCommentList().forEach(comment => {
            const $content = comment.getRender().$content
            btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
          })
        })
-
+      })
      if (isShuoshuo) {
        window.shuoshuoComment.destroyArtalk = () => {
          destroyArtalk()
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
    }
-      btf.addGlobalFn('pjaxSendOnce', destroyArtalk, 'destroyArtalk')
+    if (typeof window.artalkItem === 'object') initArtalk()
      btf.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
    }
    const loadArtalk = async (el, pageKey) => {
      if (typeof Artalk === 'object') initArtalk(el, pageKey)
    else {
-        await btf.getCSS('!{url_for(theme.asset.artalk_css)}')
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
-        await btf.getScript('!{url_for(theme.asset.artalk_js)}')
+        getScript('!{theme.asset.artalk_js}').then(initArtalk)
-        initArtalk(el, pageKey)
+      })
    }
  }
-    if (isShuoshuo) {
+  function artalkChangeMode (theme) {
-      '!{use[0]}' === 'Artalk'
+    const artalkWrap = document.getElementById('artalk-wrap')
-        ? window.shuoshuoComment = { loadComment: loadArtalk }
+    if (!(artalkWrap && artalkWrap.children.length)) return
-        : window.loadOtherComment = loadArtalk
+    const isDark = theme === 'dark'
-      return
+    window.artalkItem.setDarkMode(isDark)
  }
-    if ('!{use[0]}' === 'Artalk' || !!{lazyload}) {
+  btf.addModeChange('artalk', artalkChangeMode)
-      if (!{lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+  
-      else setTimeout(loadArtalk, 100)
+  if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
    else loadArtalk()
  } else {
-      window.loadOtherComment = loadArtalk
+    function loadOtherComment () {
      loadArtalk()
    }
  }
  })()
--- a/layout/includes/third-party/comments/disqus.pug
+++ b/layout/includes/third-party/comments/disqus.pug
@@ -1,80 +1,49 @@
- const disqusPageTitle = page.title.replace(/'/ig,"\\'")
+- let disqusPageTitle = page.title.replace(/'/ig,"\\'")
 - const { shortname, apikey } = theme.disqus
 - const { use, lazyload, count } = theme.comments
 script.
-  (() => {
+  function loadDisqus () {
    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
    const disqusReset = conf => {
      window.DISQUS && window.DISQUS.reset({
        reload: true,
        config: conf
      })
    }
    const loadDisqus = (el, path) => {
      if (isShuoshuo) {
        window.shuoshuoComment.destroyDisqus = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
      window.disqus_identifier = isShuoshuo ? path : '!{ url_for(page.path) }'
      window.disqus_url = isShuoshuo ? location.origin + path : '!{ page.permalink }'
    const disqus_config = function () {
-        this.page.url = disqus_url
+      this.page.url = '!{ page.permalink }'
-        this.page.identifier = disqus_identifier
+      this.page.identifier = '!{ url_for(page.path) }'
      this.page.title = '!{ disqusPageTitle }'
    }
-      if (window.DISQUS) disqusReset(disqus_config)
+    const disqusReset = () => {
-      else {
+      DISQUS.reset({
-        const script = document.createElement('script')
+        reload: true,
-        script.src = 'https://!{shortname}.disqus.com/embed.js'
+        config: disqus_config
        script.setAttribute('data-timestamp', +new Date())
        document.head.appendChild(script)
      }
      btf.addGlobalFn('themeChange', () => disqusReset(disqus_config), 'disqus')
    }
    const getCount = async() => {
      try {
        const eleGroup = document.querySelector('#post-meta .disqus-comment-count')
        if (!eleGroup) return
        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{shortname}&api_key=!{apikey}&thread:link=${cleanedLinks}`,{
          method: 'GET'
      })
        const result = await res.json()
        const count = result.response.length ? result.response[0].posts : 0
        eleGroup.textContent = count
      } catch (err) {
        console.error(err)
      }
    }
-    if (isShuoshuo) {
+    btf.addModeChange('disqus', disqusReset)
      '!{use[0]}' === 'Disqus'
        ? window.shuoshuoComment = { loadComment: loadDisqus }
        : window.loadOtherComment = loadDisqus
      return
    }
-    if ('!{use[0]}' === 'Disqus' || !!{lazyload}) {
+    if (window.DISQUS) disqusReset()
      if (!{lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
    else {
-        loadDisqus()
+      (function() { 
-        !{ count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
+        var d = document, s = d.createElement('script');
        s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    }
  }
  if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
    else loadDisqus()
  } else {
-      window.loadOtherComment = loadDisqus
+    function loadOtherComment () {
      loadDisqus()
    }
  }
 if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqus'
  script.
    if (window.DISQUSWIDGETS === undefined) {
      var d = document, s = d.createElement('script');
      s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
      s.id = 'dsq-count-scr';
      (d.head || d.body).appendChild(s);
    } else {
      DISQUSWIDGETS.getCount({reset: true});
    }
  })()
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -1,87 +1,57 @@
- let disqusjsPageTitle = page.title && page.title.replace(/'/ig,"\\'")
+- let disqusjsPageTitle = page.title.replace(/'/ig,"\\'")
 - const { shortname:dqShortname, apikey:dqApikey, option:dqOption } = theme.disqusjs
 script.
-  (() => {
+  function loadDisqusjs () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
+    function initDisqusjs () {
    const dqOption = !{JSON.stringify(dqOption)}
    const destroyDisqusjs = () => {
      disqusjs.destroy()
      window.disqusjs = null
-    }
+      disqusjs = new DisqusJS(Object.assign({
-
+        shortname: '!{theme.disqusjs.shortname}',
-    const themeChange = (el, path) => {
+        identifier: '!{ url_for(page.path) }',
-      destroyDisqusjs()
+        url: '!{ page.permalink }',
      initDisqusjs(el, path)
    }
    const initDisqusjs = (el = document, path) => {
      if (isShuoshuo) {
        window.shuoshuoComment.destroyDisqusjs = () => {
          destroyDisqusjs()
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
      disqusjs = new DisqusJS({
        shortname: '!{dqShortname}',
        title: '!{ disqusjsPageTitle }',
-        apikey: '!{dqApikey}',
+        apikey: '!{theme.disqusjs.apikey}',
-        ...dqOption,
+      },!{JSON.stringify(theme.disqusjs.option)}))
        identifier: isShuoshuo ? path : (dqOption && dqOption.identifier) || '!{ url_for(page.path) }',
        url: isShuoshuo ? location.origin + path : (dqOption && dqOption.url) || '!{ page.permalink }'
      })
-      disqusjs.render(el.querySelector('#disqusjs-wrap'))
+      disqusjs.render(document.getElementById('disqusjs'))
      btf.addGlobalFn('themeChange', () => themeChange(el, path), 'disqusjs')
    }
-    const loadDisqusjs = async(el, path) => {
+    const themeChange = () => {
-      if (window.disqusJsLoad) initDisqusjs(el, path)
+      const ele = document.getElementById('disqus_thread')
      if(!ele) return
      disqusjs.destroy()
      initDisqusjs()
    }
    btf.addModeChange('disqusjs', themeChange)
    if (window.disqusJsLoad) initDisqusjs()
    else {
-        await btf.getCSS('!{url_for(theme.asset.disqusjs_css)}')
+      getCSS('!{url_for(theme.asset.disqusjs_css)}')
-        await btf.getScript('!{url_for(theme.asset.disqusjs)}')
+      getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs)
        initDisqusjs(el, path)
      window.disqusJsLoad = true
    }
  }
    const getCount = async() => {
      try {
        const eleGroup = document.querySelector('#post-meta .disqusjs-comment-count')
        if (!eleGroup) return
        const cleanedLinks = eleGroup.href.replace(/#post-comment$/, '')
        const res = await fetch(`https://disqus.com/api/3.0/threads/set.json?forum=!{dqShortname}&api_key=!{dqApikey}&thread:link=${cleanedLinks}`,{
          method: 'GET'
        })
        const result = await res.json()
        const count = result.response.length ? result.response[0].posts : 0
        eleGroup.textContent = count
      } catch (err) {
        console.error(err)
      }
    }
    if (isShuoshuo) {
      '!{theme.comments.use[0]}' === 'Disqusjs'
        ? window.shuoshuoComment = { loadComment: loadDisqusjs }
        : window.loadOtherComment = loadDisqusjs
      return
    }
  if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
-      if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs-wrap'), loadDisqusjs)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs'), loadDisqusjs)
    else loadDisqusjs()
  }
  else {
    function loadOtherComment () {
      loadDisqusjs()
        !{ theme.comments.count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : '' }
    }
  }
 if is_post() && !theme.comments.lazyload && theme.comments.count && theme.comments.use[0] === 'Disqusjs'
  script.
    if (window.DISQUSWIDGETS === undefined) {
      var d = document, s = d.createElement('script');
      s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
      s.id = 'dsq-count-scr';
      (d.head || d.body).appendChild(s);
    } else {
-      window.loadOtherComment = loadDisqusjs
+      DISQUSWIDGETS.getCount({reset: true});
    }
-  })()
+
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -1,30 +1,18 @@
- const fbSDKVer = 'v20.0'
+- const fbSDKVer = 'v16.0'
- const fbSDK = `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
+- const fbSDK = theme.messenger.enable ? `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk/xfbml.customerchat.js#xfbml=1&version=${fbSDKVer}` : `https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=${fbSDKVer}`
 script.
-  (()=>{
+  function loadFBComment () {
    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'== 'shuoshuo'
    const loadFBComment = (el = document, path) => {
      if (isShuoshuo) {
        window.shuoshuoComment.destroyFB = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
    const themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-      const $fbComment = el.getElementsByClassName('fb-comments')[0]
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
    $fbComment.setAttribute('data-colorscheme',themeNow)
-      $fbComment.setAttribute('data-href', isShuoshuo ? '!{urlNoIndex(page.permalink)}' + '#' + path : '!{urlNoIndex(page.permalink)}')
+    $fbComment.setAttribute('data-href', '!{urlNoIndex(page.permalink)}')
    if (typeof FB === 'object') {
      FB.XFBML.parse(document.getElementsByClassName('post-meta-commentcount')[0])
-        FB.XFBML.parse(el.querySelector('#post-comment'))
+      FB.XFBML.parse(document.getElementById('post-comment'))
    }
    else {
      let ele = document.createElement('script')
@@ -37,7 +25,7 @@ script.
    }
  }
-    const fbModeChange = theme => {
+  function fbModeChange (theme) {
    const $fbComment = document.getElementsByClassName('fb-comments')[0]
    if ($fbComment && typeof FB === 'object') {
      $fbComment.setAttribute('data-colorscheme',theme)
@@ -45,20 +33,14 @@ script.
    }
  }
-    btf.addGlobalFn('themeChange', fbModeChange, 'facebook_comments')
+  btf.addModeChange('facebook_comments', fbModeChange)
    if (isShuoshuo) {
      '!{theme.comments.use[0]}' === 'Facebook Comments'
        ? window.shuoshuoComment = { loadComment: loadFBComment }
        : window.loadOtherComment = loadFBComment
      return
    }
  if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
    else loadFBComment()
  } else {
-      window.loadOtherComment = loadFBComment
+    function loadOtherComment () {
      loadFBComment()
    }
  }
  })()
--- a/layout/includes/third-party/comments/giscus.pug
+++ b/layout/includes/third-party/comments/giscus.pug
@@ -1,82 +1,53 @@
- const { use, lazyload } = theme.comments
+- const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
- const { repo, repo_id, category_id, light_theme, dark_theme, js, option } = theme.giscus
+- const giscusUrl = theme.asset.giscus || 'https://giscus.app/client.js'
 - const giscusUrl = js || 'https://giscus.app/client.js'
 - const giscusOriginUrl = new URL(giscusUrl).origin
 script.
-  (() => {
+  function getGiscusTheme (theme) {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
    const option = !{JSON.stringify(option)}
    const getGiscusTheme = theme => theme === 'dark' ? '!{dark_theme}' : '!{light_theme}'
    const createScriptElement = config => {
      const ele = document.createElement('script')
      Object.entries(config).forEach(([key, value]) => {
        ele.setAttribute(key, value)
      })
      return ele
  }
-    const loadGiscus = (el = document, key) => {
+  function loadGiscus () {
-      const mappingConfig = isShuoshuo
+    const config = Object.assign({
        ? { 'data-mapping': 'specific', 'data-term': key }
        : { 'data-mapping': (option && option['data-mapping']) || 'pathname' }
      const giscusConfig = {
      src: '!{giscusUrl}',
      'data-repo': '!{repo}',
      'data-repo-id': '!{repo_id}',
      'data-category-id': '!{category_id}',
      'data-mapping': 'pathname',
      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
      'data-reactions-enabled': '1',
      crossorigin: 'anonymous',
-        async: true,
+      async: true
-        ...option,
+    },!{JSON.stringify(option)})
-        ...mappingConfig
+
    let ele = document.createElement('script')
    for (let key in config) {
      ele.setAttribute(key, config[key])
    }
    document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
  }
-      const scriptElement = createScriptElement(giscusConfig)
+  function changeGiscusTheme (theme) {
-
+    function sendMessage(message) {
-      el.querySelector('#giscus-wrap').appendChild(scriptElement)
+      const iframe = document.querySelector('iframe.giscus-frame')
-
+      if (!iframe) return
-      if (isShuoshuo) {
+      iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
        window.shuoshuoComment.destroyGiscus = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
    }
-    const changeGiscusTheme = theme => {
+    sendMessage({
      const iframe = document.querySelector('#giscus-wrap iframe')
      if (iframe) {
        const message = {
          giscus: {
      setConfig: {
        theme: getGiscusTheme(theme)
      }
-          }
+    });
        }
        iframe.contentWindow.postMessage(message, '!{giscusOriginUrl}')
      }
  }
-    btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
+  btf.addModeChange('giscus', changeGiscusTheme)
-    if (isShuoshuo) {
+  if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
-      '!{use[0]}' === 'Giscus'
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
        ? window.shuoshuoComment = { loadComment: loadGiscus }
        : window.loadOtherComment = loadGiscus
      return
    }
    if ('!{use[0]}' === 'Giscus' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
    else loadGiscus()
  } else {
-      window.loadOtherComment = loadGiscus
+    function loadOtherComment () {
      loadGiscus()
    }
  }
  })()
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/layout/includes/third-party/comments/gitalk.pug
@@ -1,64 +1,41 @@
 - const { client_id, client_secret, repo, owner, admin, option } = theme.gitalk
 script.
-  (() => {
+  function loadGitalk () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    function initGitalk () {
-    const option = !{JSON.stringify(option)}
+      var gitalk = new Gitalk(Object.assign({
-
+        clientID: '!{theme.gitalk.client_id}',
-    const commentCount = n => {
+        clientSecret: '!{theme.gitalk.client_secret}',
-      const isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
+        repo: '!{theme.gitalk.repo}',
-      if (isCommentCount) {
+        owner: '!{theme.gitalk.owner}',
-        isCommentCount.textContent= n
+        admin: ['!{theme.gitalk.admin}'],
-      }
+        id: '!{md5(page.path)}',
-    }
+        updateCountCallback: commentCount
-
+      },!{JSON.stringify(theme.gitalk.option)}))
    const initGitalk = (el, path) => {
      if (isShuoshuo) {
        window.shuoshuoComment.destroyGitalk = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
      const gitalk = new Gitalk({
        clientID: '!{client_id}',
        clientSecret: '!{client_secret}',
        repo: '!{repo}',
        owner: '!{owner}',
        admin: ['!{admin}'],
        updateCountCallback: commentCount,
        ...option,
        id: isShuoshuo ? path : (option && option.id) || '!{md5(page.path)}'
      })
      gitalk.render('gitalk-container')
    }
-    const loadGitalk = async(el, path) => {
+    if (typeof Gitalk === 'function') initGitalk()
      if (typeof Gitalk === 'function') initGitalk(el, path)
    else {
-        await btf.getCSS('!{url_for(theme.asset.gitalk_css)}')
+      getCSS('!{url_for(theme.asset.gitalk_css)}')
-        await btf.getScript('!{url_for(theme.asset.gitalk)}')
+      getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk)
        initGitalk(el, path)
    }
  }
-    if (isShuoshuo) {
+  function commentCount(n){
-      '!{theme.comments.use[0]}' === 'Gitalk'
+    let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
-        ? window.shuoshuoComment = { loadComment: loadGitalk }
+    if (isCommentCount) {
-        : window.loadOtherComment = loadGitalk
+      isCommentCount.textContent= n
-      return
+    }
  }
  if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
    else loadGitalk()
  } else {
-      window.loadOtherComment = loadGitalk
+    function loadOtherComment () {
      loadGitalk()
    }
  }
  })()
--- a/layout/includes/third-party/comments/index.pug
+++ b/layout/includes/third-party/comments/index.pug
@@ -7,9 +7,9 @@ hr.custom-hr
      span= ' ' + _p('comment')
    if theme.comments.use.length > 1
-      .comment-switch
+      #comment-switch
        span.first-comment=defaultComment
-        span#switch-btn
+        span.switch-btn
        span.second-comment=theme.comments.use[1]
@@ -22,7 +22,7 @@ hr.custom-hr
          when 'Valine'
            #vcomment.vcomment
          when 'Disqusjs'
-            #disqusjs-wrap
+            #disqusjs
          when 'Livere'
            #lv-container(data-id="city" data-uid=theme.livere.uid)
          when 'Gitalk'
--- a/layout/includes/third-party/comments/livere.pug
+++ b/layout/includes/third-party/comments/livere.pug
@@ -1,24 +1,8 @@
 - const { use, lazyload } = theme.comments
 script.
-  (() => {
+  function loadLivere () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    if (typeof LivereTower === 'object') {
-
+      window.LivereTower.init()
    const loadLivere = (el, path) => {
      window.livereOptions = {
        refer: path || location.pathname
    }
      if (isShuoshuo) {
        window.shuoshuoComment.destroyLivere = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
      if (typeof LivereTower === 'object') window.LivereTower.init()
    else {
      (function(d, s) {
          var j, e = d.getElementsByTagName(s)[0];
@@ -31,17 +15,12 @@ script.
    }
  }
-    if (isShuoshuo) {
+  if ('!{theme.comments.use[0]}' === 'Livere' || !!{theme.comments.lazyload}) {
-      '!{use[0]}' === 'Livere'
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere)
        ? window.shuoshuoComment = { loadComment: loadLivere }
        : window.loadOtherComment = loadLivere
      return
    }
    if ('!{use[0]}' === 'Livere' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere)
    else loadLivere()
    } else {
      window.loadOtherComment = loadLivere
  }
-  })()
+  else {
    function loadOtherComment () {
      loadLivere()
    }
  }
--- a/layout/includes/third-party/comments/remark42.pug
+++ b/layout/includes/third-party/comments/remark42.pug
@@ -1,78 +1,68 @@
 - const { host, siteId, option } = theme.remark42
 script.
-  (() => {
+  var remark_config = Object.assign({
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    host: '!{host}',
-    const options = !{JSON.stringify(option)}
+    site_id: '!{siteId}',
    components: ['embed'],
    theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  },!{JSON.stringify(option)})
-    const loadScript = src => {
+  function addRemark42(){
-      const script = document.createElement('script')
+    for (let i = 0; i < remark_config.components.length; i++) {
-      script.src = src
+      const s = document.createElement('script')
-      script.defer = true
+      s.src = remark_config.host + '/web/' + remark_config.components[i] + '.js'
-      document.head.appendChild(script)
+      s.defer = true
      document.head.appendChild(s)
    }
  }
-    const addRemark42 = () => loadScript('!{host}/web/embed.js')
+  function initRemark42() {
    const getCount = () => document.querySelector('.remark42__counter') && loadScript('!{host}/web/count.js')
    const destroyRemark42 = () => window.remark42Instance && window.remark42Instance.destroy()
    const initRemark42 = remark_config => {
    if (window.REMARK42) {
-        destroyRemark42()
+      if (this.remark42Instance) {
-        window.remark42Instance = window.REMARK42.createInstance({
+        this.remark42Instance.destroy()
      }
      this.remark42Instance = window.REMARK42.createInstance({
        ...remark_config
      })
    }
  }
-    const loadRemark42 = (el, path) => {
+  function getCount () {
-      if (isShuoshuo) {
+    const ele = document.querySelector('.remark42__counter')
-        window.shuoshuoComment.destroyRemark42 = () => {
+    if (ele) {
-          destroyRemark42()
+      const s = document.createElement('script')
-          if (el.children.length) {
+      s.src = remark_config.host + '/web/counter.js'
-            el.innerHTML = ''
+      s.defer = true
-            el.classList.add('no-comment')
+      document.head.appendChild(s)
          }
    }
  }
-      window.remark_config = {
+  function loadRemark42 () {
        host: '!{host}',
        site_id: '!{siteId}',
        theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light',
        ...options,
        url: isShuoshuo ? window.location.origin + path : (options && options.url) || window.location.origin + window.location.pathname
      }
    if (window.REMARK42) {
-        initRemark42(remark_config)
+      this.initRemark42()
      getCount()
    } else {
      addRemark42()
      window.addEventListener('REMARK42::ready', () => {
-          initRemark42(remark_config)
+        this.initRemark42()
        getCount()
      })
    }
  }
-    const remarkChangeMode = theme => window.REMARK42 && window.REMARK42.changeTheme(theme)
+  function remarkChangeMode (theme) {
-
+    if (!window.REMARK42) return
-    btf.addGlobalFn('themeChange', remarkChangeMode, 'remark42')
+    window.REMARK42.changeTheme(theme)
    if (isShuoshuo) {
      '!{theme.comments.use[0]}' === 'Remark42'
        ? window.shuoshuoComment = { loadComment: loadRemark42 }
        : window.loadOtherComment = loadRemark42
      return
  }
  btf.addModeChange('remark42', remarkChangeMode)
  if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)
    else loadRemark42()
  } else {
-      window.loadOtherComment = loadRemark42
+    function loadOtherComment () {
      loadRemark42()
    }
  }
  })()
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/layout/includes/third-party/comments/twikoo.pug
@@ -3,8 +3,16 @@
 script.
  (()=>{
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    const init = () => {
-    const option = !{JSON.stringify(option)}
+      twikoo.init(Object.assign({
        el: '#twikoo-wrap',
        envId: '!{envId}',
        region: '!{region}',
        onCommentLoaded: function () {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
        }
      }, !{JSON.stringify(option)}))
    }
    const getCount = () => {
      const countELement = document.getElementById('twikoo-count')
@@ -14,51 +22,32 @@ script.
        region: '!{region}',
        urls: [window.location.pathname],
        includeReply: false
-      }).then(res => {
+      }).then(function (res) {
        countELement.textContent = res[0].count
-      }).catch(err => {
+      }).catch(function (err) {
-        console.error(err)
+        console.error(err);
-      })
+      });
    }
-    const init = (el = document, path = location.pathname) => {
+    const runFn = () => {
-      twikoo.init({
+      init()
-        el: el.querySelector('#twikoo-wrap'),
+      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
        envId: '!{envId}',
        region: '!{region}',
        onCommentLoaded: () => {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
        },
        ...option,
        path: isShuoshuo ? path : (option && option.path) || path
      })
      !{count ? `GLOBAL_CONFIG_SITE.pageType === 'post' && getCount()` : ''}
      isShuoshuo && (window.shuoshuoComment.destroyTwikoo = () => {
        if (el.children.length) {
          el.innerHTML = ''
          el.classList.add('no-comment')
        }
      })
    }
-    const loadTwikoo = (el, path) => {
+    const loadTwikoo = () => {
-      if (typeof twikoo === 'object') setTimeout(() => init(el, path), 0)
+      if (typeof twikoo === 'object') {
-      else btf.getScript('!{url_for(theme.asset.twikoo)}').then(() => init(el, path))
+        setTimeout(runFn,0)
    }
    if (isShuoshuo) {
      '!{use[0]}' === 'Twikoo'
        ? window.shuoshuoComment = { loadComment: loadTwikoo }
        : window.loadOtherComment = loadTwikoo
        return
      } 
      getScript('!{url_for(theme.asset.twikoo)}').then(runFn)
    }
    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
      else loadTwikoo()
    } else {
-      window.loadOtherComment = loadTwikoo
+      window.loadOtherComment = () => {
        loadTwikoo()
      }
    }
  })()
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/layout/includes/third-party/comments/utterances.pug
@@ -1,63 +1,36 @@
 - const { use, lazyload } = theme.comments
 - const { repo, issue_term, light_theme, dark_theme, js, option } = theme.utterances
 - const utterancesUrl = js || 'https://utteranc.es/client.js'
 - const utterancesOriginUrl = new URL(utterancesUrl).origin
 script.
-  (() => {
+  function loadUtterances () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    let ele = document.createElement('script')
-    const option = !{JSON.stringify(option)}
+    ele.setAttribute('id', 'utterances_comment')
-    const getUtterancesTheme = theme => theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+    ele.setAttribute('src', 'https://utteranc.es/client.js')
-
+    ele.setAttribute('repo', '!{theme.utterances.repo}')
-    const loadUtterances = (el = document, key) => {
+    ele.setAttribute('issue-term', '!{theme.utterances.issue_term}')
-      if (isShuoshuo) {
+    let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
-        window.shuoshuoComment.destroyUtterances = () => {
+    ele.setAttribute('theme', nowTheme)
-          if (el.children.length) {
+    ele.setAttribute('crossorigin', 'anonymous')
-            el.innerHTML = ''
+    ele.setAttribute('async', 'true')
-            el.classList.add('no-comment')
+    document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
          }
        }
  }
-      const config = {
+  function utterancesTheme (theme) {
-        src: '!{utterancesUrl}',
+    const iframe = document.querySelector('.utterances-frame')
        repo: '!{repo}',
        theme: getUtterancesTheme(document.documentElement.getAttribute('data-theme')),
        crossorigin: 'anonymous',
        async: true,
        ...option,
        'issue-term': isShuoshuo ? key : (option && option['issue-term']) || '!{issue_term}'
      }
      const ele = document.createElement('script')
      Object.entries(config).forEach(([key, value]) => ele.setAttribute(key, value))
      el.querySelector('#utterances-wrap').appendChild(ele)
    }
    const changeUtterancesTheme = theme => {
      const iframe = document.querySelector('#utterances-wrap iframe')
    if (iframe) {
      const theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
      const message = {
        type: 'set-theme',
-          theme: getUtterancesTheme(theme)
+        theme: theme
      };
-        iframe.contentWindow.postMessage(message, '!{utterancesOriginUrl}')
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
    }
  }
-    btf.addGlobalFn('themeChange', changeUtterancesTheme, 'utterances')
+  btf.addModeChange('utterances', utterancesTheme)
-    if (isShuoshuo) {
+  if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
-      '!{use[0]}' === 'Utterances'
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
        ? window.shuoshuoComment = { loadComment: loadUtterances }
        : window.loadOtherComment = loadUtterances
      return
    }
    if ('!{use[0]}' === 'Utterances' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
    else loadUtterances()
  } else {
-      window.loadOtherComment = loadUtterances
+    function loadOtherComment () {
      loadUtterances()
    }
  }
  })()
--- a/layout/includes/third-party/comments/valine.pug
+++ b/layout/includes/third-party/comments/valine.pug
@@ -1,60 +1,33 @@
 - const { use, lazyload } = theme.comments
 - const { appId, appKey, avatar, serverURLs, visitor, option } = theme.valine
 - let emojiMaps = '""'
 if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)
 script.
-  (() => {
+  function loadValine () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+    function initValine () {
-    const option = !{JSON.stringify(option)}
+      const valine = new Valine(Object.assign({
    const initValine = (el, path) => {
      if (isShuoshuo) {
        window.shuoshuoComment.destroyValine = () => {
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
      const valineConfig = {
        el: '#vcomment',
-        appId: '#{appId}',
+        appId: '#{theme.valine.appId}',
-        appKey: '#{appKey}',
+        appKey: '#{theme.valine.appKey}',
-        avatar: '#{avatar}',
+        avatar: '#{theme.valine.avatar}',
-        serverURLs: '#{serverURLs}',
+        serverURLs: '#{theme.valine.serverURLs}',
        emojiMaps: !{emojiMaps},
-        visitor: #{visitor},
+        path: window.location.pathname,
-        ...option,
+        visitor: #{theme.valine.visitor}
-        path: isShuoshuo ? path : (option && option.path) || window.location.pathname
+      }, !{JSON.stringify(theme.valine.option)}))
    }
-      new Valine(valineConfig)
+    if (typeof Valine === 'function') initValine() 
    else getScript('!{url_for(theme.asset.valine)}').then(initValine)
  }
-    const loadValine = async (el, path) => {
+  if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-      if (typeof Valine === 'function') {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
        initValine(el, path)
      } else {
        await btf.getScript('!{url_for(theme.asset.valine)}')
        initValine(el, path)
      }
    }
    if (isShuoshuo) {
      '!{use[0]}' === 'Valine'
        ? window.shuoshuoComment = { loadComment: loadValine }
        : window.loadOtherComment = loadValine
      return
    }
    if ('!{use[0]}' === 'Valine' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
    else setTimeout(loadValine, 0)
  } else {
-      window.loadOtherComment = loadValine
+    function loadOtherComment () {
      loadValine()
    }
-  })()
+  }
--- a/layout/includes/third-party/comments/waline.pug
+++ b/layout/includes/third-party/comments/waline.pug
@@ -2,60 +2,33 @@
 - const { lazyload, count, use } = theme.comments
 script.
-  (() => {
+  function loadWaline () {
-    let initFn = window.walineFn || null
+    function initWaline () {
-    const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
+      const waline = Waline.init(Object.assign({
-    const option = !{JSON.stringify(option)}
+        el: '#waline-wrap',
    const destroyWaline = ele => ele.destroy()
    const initWaline = (Fn, el = document, path = window.location.pathname) => {
      const waline = Fn({
        el: el.querySelector('#waline-wrap'),
        serverURL: '!{serverURL}',
        pageview: !{lazyload ? false : pageview},
        dark: 'html[data-theme="dark"]',
        path: window.location.pathname,
        comment: !{lazyload ? false : count},
-        ...option,
+      }, !{JSON.stringify(option)}))
        path: isShuoshuo ? path : (option && option.path) || path
      })
      if (isShuoshuo) {
        window.shuoshuoComment.destroyWaline = () => {
          destroyWaline(waline)
          if (el.children.length) {
            el.innerHTML = ''
            el.classList.add('no-comment')
          }
        }
      }
    }
-    const loadWaline = (el, path) => {
+    if (typeof Waline === 'object') initWaline()
      if (initFn) initWaline(initFn, el, path)
    else {
-        btf.getCSS('!{url_for(theme.asset.waline_css)}')
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
-          .then(() => import('!{url_for(theme.asset.waline_js)}'))
+        getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
          .then(({ init }) => {
            initFn = init || Waline.init
            initWaline(initFn, el, path)
            window.walineFn = initFn
      })
    }
  }
    if (isShuoshuo) {
      '!{use[0]}' === 'Waline'
        ? window.shuoshuoComment = { loadComment: loadWaline } 
        : window.loadOtherComment = loadWaline
      return
    }
  if ('!{use[0]}' === 'Waline' || !!{lazyload}) {
    if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
    else setTimeout(loadWaline, 0)
  } else {
-      window.loadOtherComment = loadWaline
+    function loadOtherComment () {
      loadWaline()
    }
  }
-  })()
+  
--- a/layout/includes/third-party/effect.pug
+++ b/layout/includes/third-party/effect.pug
@@ -24,12 +24,12 @@ if theme.activate_power_mode.enable
 if theme.click_heart && theme.click_heart.enable
  script#click-heart(src=url_for(theme.asset.click_heart) async mobile=`${theme.click_heart.mobile}`)
-if theme.clickShowText && theme.clickShowText.enable
+if theme.ClickShowText && theme.ClickShowText.enable
  script#click-show-text(
-    src= url_for(theme.asset.clickShowText)
+    src= url_for(theme.asset.ClickShowText)
-    data-mobile= `${theme.clickShowText.mobile}`
+    data-mobile= `${theme.ClickShowText.mobile}`
-    data-text= theme.clickShowText.text.join(",")
+    data-text= theme.ClickShowText.text.join(",")
-    data-fontsize= theme.clickShowText.fontSize
+    data-fontsize= theme.ClickShowText.fontSize
-    data-random= `${theme.clickShowText.random}`
+    data-random= `${theme.ClickShowText.random}`
    async
  )
--- a/layout/includes/third-party/math/chartjs.pug
+++ b/layout/includes/third-party/math/chartjs.pug
@@ -1,91 +0,0 @@
 - const { fontColor, borderColor, scale_ticks_backdropColor } = theme.chartjs
 script.
  (() => {
    const applyThemeDefaultsConfig = theme => {
      if (theme === 'dark-mode') {
        Chart.defaults.color = "!{fontColor.dark}"
        Chart.defaults.borderColor = "!{borderColor.dark}"
        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.dark}"
      } else {
        Chart.defaults.color = "!{fontColor.light}"
        Chart.defaults.borderColor = "!{borderColor.light}"
        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.light}"
      }
    }
    // Recursively traverse the config object and automatically apply theme-specific color schemes
    const applyThemeConfig = (obj, theme) => {
      if (typeof obj !== 'object' || obj === null) return
      Object.keys(obj).forEach(key => {
        const value = obj[key]
        // If the property is an object and has theme-specific options, apply them
        if (typeof value === 'object' && value !== null) {
          if (value[theme]) {
            obj[key] = value[theme] // Apply the value for the current theme
          } else {
            // Recursively process child objects
            applyThemeConfig(value, theme)
          }
        }
      })
    }
    const runChartJS = ele => {
      window.loadChartJS = true
      Array.from(ele).forEach((item, index) => {
        const chartSrc = item.firstElementChild
        const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
        const width = item.getAttribute('data-width')
        const existingCanvas = document.getElementById(chartID)
        // If a canvas already exists, remove it to avoid rendering duplicates
        if (existingCanvas) {
            existingCanvas.parentNode.remove()
        }
        const chartDefinition = chartSrc.textContent
        const canvas = document.createElement('canvas')
        canvas.id = chartID
        const div = document.createElement('div')
        div.className = 'chartjs-wrap'
        if (width) {
          div.style.width = width
        }
        div.appendChild(canvas)
        chartSrc.insertAdjacentElement('afterend', div)
        const ctx = document.getElementById(chartID).getContext('2d')
        const config = JSON.parse(chartDefinition)
        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
        // Set default styles (initial setup)
        applyThemeDefaultsConfig(theme)
        // Automatically traverse the config and apply dual-mode color schemes
        applyThemeConfig(config, theme)
        new Chart(ctx, config)
      })
    }
    const loadChartJS = () => {
      const chartJSEle = document.querySelectorAll('#article-container .chartjs-container')
      if (chartJSEle.length === 0) return
      window.loadChartJS ? runChartJS(chartJSEle) : btf.getScript('!{url_for(theme.asset.chartjs)}').then(() => runChartJS(chartJSEle))
    }
    // Listen for theme change events
    btf.addGlobalFn('themeChange', loadChartJS, 'chartjs')
    btf.addGlobalFn('encrypt', loadChartJS, 'chartjs')
    window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
  })()
--- a/layout/includes/third-party/math/index.pug
+++ b/layout/includes/third-party/math/index.pug
@@ -1,14 +1,18 @@
-case theme.math.use
+if theme.mathjax && theme.mathjax.enable
-  when 'mathjax'
+  if theme.mathjax.per_page
-    if (theme.math.per_page && (['post','page'].includes(globalPageType))) || page.mathjax
+    if is_post() || is_page()
      include ./mathjax.pug
  else
    if page.mathjax
      include ./mathjax.pug
-  when 'katex'
+if theme.katex && theme.katex.enable
-    if (theme.math.per_page && (['post','page'].includes(globalPageType))) || page.katex
+  if theme.katex.per_page
    if is_post() || is_page()
      include ./katex.pug
  else
    if page.katex
      include ./katex.pug
 if theme.mermaid.enable
  include ./mermaid.pug
 if theme.chartjs.enable
  include ./chartjs.pug
--- a/layout/includes/third-party/math/katex.pug
+++ b/layout/includes/third-party/math/katex.pug
@@ -1,16 +1,9 @@
 link(rel="stylesheet" type="text/css" href=url_for(theme.asset.katex))
 script(src=url_for(theme.asset.katex_copytex))
 script.
-  (async () => {
+  (() => {
-    const showKatex = () => {
+    document.querySelectorAll('#article-container span.katex-display').forEach(item => {
-      document.querySelectorAll('#article-container .katex').forEach(el => el.classList.add('katex-show'))
+      btf.wrap(item, 'div', { class: 'katex-wrap'})
-    }
+    })
    if (!window.katex_js_css) {
      window.katex_js_css = true
      await btf.getCSS('!{url_for(theme.asset.katex)}')
      if (!{theme.math.katex.copy_tex}) {
        await btf.getScript('!{url_for(theme.asset.katex_copytex)}')
      }
    }
    showKatex()
  })()
--- a/layout/includes/third-party/math/mathjax.pug
+++ b/layout/includes/third-party/math/mathjax.pug
@@ -1,50 +1,15 @@
-//- Mathjax 4/5
+//- Mathjax 3
 - 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}',
+        tags: 'ams'
            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"]')) {
@@ -71,8 +36,3 @@ script.
    MathJax.texReset()
    MathJax.typesetPromise()
  }
    }
    btf.addGlobalFn('encrypt', loadMathjax, 'mathjax')
    window.pjax ? loadMathjax() : window.addEventListener('load', loadMathjax)
  })()
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/layout/includes/third-party/math/mermaid.pug
@@ -1,323 +1,38 @@
 script.
  (() => {
-    const parseViewBox = viewBox => {
+    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
-      if (!viewBox) return null
+    if ($mermaid.length === 0) return
-      const parts = viewBox.trim().split(/[\s,]+/).map(n => Number(n))
+    const runMermaid = () => {
      if (parts.length !== 4 || parts.some(n => Number.isNaN(n))) return null
      return parts
    }
    const getSvgViewBox = svg => {
      const attr = parseViewBox(svg.getAttribute('viewBox'))
      if (attr) return attr
      // Fallback: use bbox to build a viewBox
      try {
        const bbox = svg.getBBox()
        if (bbox && bbox.width && bbox.height) return [bbox.x, bbox.y, bbox.width, bbox.height]
      } catch (e) {
        // getBBox may fail on some edge cases; ignore
      }
      const w = Number(svg.getAttribute('width')) || 0
      const h = Number(svg.getAttribute('height')) || 0
      if (w > 0 && h > 0) return [0, 0, w, h]
      return [0, 0, 100, 100]
    }
    const setSvgViewBox = (svg, vb) => {
      svg.setAttribute('viewBox', `${vb[0]} ${vb[1]} ${vb[2]} ${vb[3]}`)
    }
    const clamp = (v, min, max) => Math.max(min, Math.min(max, v))
    const openSvgInNewTab = ({ source, initViewBox }) => {
      const getClonedSvg = () => {
        if (typeof source === 'string') {
          const template = document.createElement('template')
          template.innerHTML = source.trim()
          const svg = template.content.querySelector('svg')
          return svg ? svg.cloneNode(true) : null
        }
        if (source && typeof source.cloneNode === 'function') {
          return source.cloneNode(true)
        }
        return null
      }
      const clone = getClonedSvg()
      if (!clone) return
      if (initViewBox && initViewBox.length === 4) {
        clone.setAttribute('viewBox', initViewBox.join(' '))
      }
      if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
      if (!clone.getAttribute('xmlns:xlink') && clone.outerHTML.includes('xlink:')) {
        clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
      }
      // inject background to match current theme
      const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
      const bg = getComputedStyle(document.body).backgroundColor || (isDark ? '#1e1e1e' : '#ffffff')
      if (!clone.style.background) clone.style.background = bg
      const serializer = new XMLSerializer()
      const svgSource = serializer.serializeToString(clone)
      const htmlSource = `<!doctype html><html><head><meta charset="utf-8" />
        <style>
          html, body { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background: ${bg}; }
          svg { max-width: 100%; max-height: 100%; height: auto; width: auto; }
        </style>
        </head><body>${svgSource}</body></html>`
      const blob = new Blob([htmlSource], { type: 'text/html;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      window.open(url, '_blank', 'noopener')
      setTimeout(() => URL.revokeObjectURL(url), 30000)
    }
    const attachMermaidViewerButton = wrap => {
      let btn = wrap.querySelector('.mermaid-open-btn')
      if (!btn) {
        btn = document.createElement('button')
        btn.type = 'button'
        btn.className = 'mermaid-open-btn'
        wrap.appendChild(btn)
      }
      btn.innerHTML = '<i class="fa fa-search fa-fw" aria-hidden="true"></i>'
      if (!btn.__mermaidViewerBound) {
        btn.addEventListener('click', e => {
          e.preventDefault()
          e.stopPropagation()
          const svg = wrap.__mermaidOriginalSvg || wrap.querySelector('svg')
          if (!svg) return
          const initViewBox = wrap.__mermaidInitViewBox
          if (typeof svg === 'string') {
            openSvgInNewTab({ source: svg, initViewBox })
            return
          }
          openSvgInNewTab({ source: svg, initViewBox })
        })
        btn.__mermaidViewerBound = true
      }
    }
    // Zoom around a point (px, py) in the SVG viewport (in viewBox coordinates)
    const zoomAtPoint = (vb, factor, px, py) => {
      const w = vb[2] * factor
      const h = vb[3] * factor
      const nx = px - (px - vb[0]) * factor
      const ny = py - (py - vb[1]) * factor
      return [nx, ny, w, h]
    }
    const initMermaidGestures = wrap => {
      const svg = wrap.querySelector('svg')
      if (!svg) return
      // Ensure viewBox exists so gestures always work
      const initVb = getSvgViewBox(svg)
      wrap.__mermaidInitViewBox = initVb
      wrap.__mermaidCurViewBox = initVb.slice()
      setSvgViewBox(svg, initVb)
      // Avoid binding multiple times on themeChange/pjax
      if (wrap.__mermaidGestureBound) return
      wrap.__mermaidGestureBound = true
      // Helper: map client (viewport) coordinate -> viewBox coordinate
      const clientToViewBox = (clientX, clientY) => {
        const rect = svg.getBoundingClientRect()
        const vb = wrap.__mermaidCurViewBox || getSvgViewBox(svg)
        const x = vb[0] + (clientX - rect.left) * (vb[2] / rect.width)
        const y = vb[1] + (clientY - rect.top) * (vb[3] / rect.height)
        return { x, y, rect, vb }
      }
      const state = {
        pointers: new Map(),
        startVb: null,
        startDist: 0,
        startCenter: null
      }
      const clampVb = vb => {
        const init = wrap.__mermaidInitViewBox || vb
        const minW = init[2] * 0.1
        const maxW = init[2] * 10
        const minH = init[3] * 0.1
        const maxH = init[3] * 10
        vb[2] = clamp(vb[2], minW, maxW)
        vb[3] = clamp(vb[3], minH, maxH)
        return vb
      }
      const setCurVb = vb => {
        vb = clampVb(vb)
        wrap.__mermaidCurViewBox = vb
        setSvgViewBox(svg, vb)
      }
      const onPointerDown = e => {
        // Allow only primary button for mouse
        if (e.pointerType === 'mouse' && e.button !== 0) return
        svg.setPointerCapture(e.pointerId)
        state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
        if (state.pointers.size === 1) {
          state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
        } else if (state.pointers.size === 2) {
          const pts = [...state.pointers.values()]
          const dx = pts[0].x - pts[1].x
          const dy = pts[0].y - pts[1].y
          state.startDist = Math.hypot(dx, dy)
          state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
          state.startCenter = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }
        }
      }
      const onPointerMove = e => {
        if (!state.pointers.has(e.pointerId)) return
        state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
        // Pan with 1 pointer
        if (state.pointers.size === 1 && state.startVb) {
          const p = [...state.pointers.values()][0]
          const prev = { x: e.clientX - e.movementX, y: e.clientY - e.movementY }
          // movementX/Y unreliable on touch, compute from stored last position
          const last = wrap.__mermaidLastSinglePointer || p
          const dxClient = p.x - last.x
          const dyClient = p.y - last.y
          wrap.__mermaidLastSinglePointer = p
          const { rect } = clientToViewBox(p.x, p.y)
          const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
          const dx = dxClient * (vb[2] / rect.width)
          const dy = dyClient * (vb[3] / rect.height)
          setCurVb([vb[0] - dx, vb[1] - dy, vb[2], vb[3]])
          return
        }
        // Pinch zoom with 2 pointers
        if (state.pointers.size === 2 && state.startVb && state.startDist > 0) {
          const pts = [...state.pointers.values()]
          const dx = pts[0].x - pts[1].x
          const dy = pts[0].y - pts[1].y
          const dist = Math.hypot(dx, dy)
          if (!dist) return
          const factor = state.startDist / dist // dist bigger => zoom in (viewBox smaller)
          const cx = (pts[0].x + pts[1].x) / 2
          const cy = (pts[0].y + pts[1].y) / 2
          const centerClient = { x: cx, y: cy }
          const pxy = clientToViewBox(centerClient.x, centerClient.y)
          const cpx = pxy.x
          const cpy = pxy.y
          const vb = zoomAtPoint(state.startVb, factor, cpx, cpy)
          setCurVb(vb)
        }
      }
      const onPointerUpOrCancel = e => {
        state.pointers.delete(e.pointerId)
        if (state.pointers.size === 0) {
          state.startVb = null
          state.startDist = 0
          state.startCenter = null
          wrap.__mermaidLastSinglePointer = null
        } else if (state.pointers.size === 1) {
          // reset single pointer baseline to avoid jump
          wrap.__mermaidLastSinglePointer = [...state.pointers.values()][0]
        }
      }
      // Wheel zoom (mouse/trackpad)
      const onWheel = e => {
        // ctrlKey on mac trackpad pinch; we treat both as zoom
        e.preventDefault()
        const delta = e.deltaY
        const zoomFactor = delta > 0 ? 1.1 : 0.9
        const { x, y } = clientToViewBox(e.clientX, e.clientY)
        const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
        setCurVb(zoomAtPoint(vb, zoomFactor, x, y))
      }
      const onDblClick = () => {
        const init = wrap.__mermaidInitViewBox
        if (!init) return
        wrap.__mermaidCurViewBox = init.slice()
        setSvgViewBox(svg, init)
      }
      svg.addEventListener('pointerdown', onPointerDown)
      svg.addEventListener('pointermove', onPointerMove)
      svg.addEventListener('pointerup', onPointerUpOrCancel)
      svg.addEventListener('pointercancel', onPointerUpOrCancel)
      svg.addEventListener('wheel', onWheel, { passive: false })
      svg.addEventListener('dblclick', onDblClick)
    }
    const runMermaid = ele => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
-      ele.forEach((item, index) => {
+      Array.from($mermaid).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
-
+        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
-        // Clear old render (themeChange/pjax will rerun)
+        const mermaidID = 'mermaid-' + index
        const oldSvg = item.querySelector('svg')
        if (oldSvg) oldSvg.remove()
        item.__mermaidGestureBound = false
        const config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {}
        if (!config.theme) {
          config.theme = theme
        }
        const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n`
        const mermaidID = `mermaid-${index}`
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
-        const renderMermaid = svg => {
+
        const renderV10 = () => {
          renderFn.then(({svg}) => {
            mermaidSrc.insertAdjacentHTML('afterend', svg)
          if (!{theme.mermaid.zoom_pan}) initMermaidGestures(item)
          item.__mermaidOriginalSvg = svg
          if (!{theme.mermaid.open_in_new_tab}) attachMermaidViewerButton(item)
        }
        // mermaid v9 and v10 compatibility
        typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
          })
        }
-    const codeToMermaid = () => {
+        const renderV9 = svg => {
-      const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
+          mermaidSrc.insertAdjacentHTML('afterend', svg)
-      if (codeMermaidEle.length === 0) return
+        }
-      codeMermaidEle.forEach(ele => {
+        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
        const preEle = document.createElement('pre')
        preEle.className = 'mermaid-src'
        preEle.hidden = true
        preEle.textContent = ele.textContent
        const newEle = document.createElement('div')
        newEle.className = 'mermaid-wrap'
        newEle.appendChild(preEle)
        ele.parentNode.replaceWith(newEle)
      })
    }
    const loadMermaid = () => {
-      if (!{theme.mermaid.code_write}) codeToMermaid()
+      window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
      const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
      if ($mermaid.length === 0) return
      const runMermaidFn = () => runMermaid($mermaid)
      btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid')
      window.loadMermaid ? runMermaidFn() : btf.getScript('!{url_for(theme.asset.mermaid)}').then(runMermaidFn)
    }
-    btf.addGlobalFn('encrypt', loadMermaid, 'mermaid')
+    btf.addModeChange('mermaid', runMermaid)
    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  })()
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/layout/includes/third-party/newest-comments/artalk.pug
@@ -1,67 +1,110 @@
 - const { server, site, option } = theme.artalk
- const avatarCdn = (option !== null && option.gravatar && option.gravatar.mirror) || ''
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
- const avatarDefault = (option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)) || ''
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'artalk-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const getAvatarValue = async () => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      const predefinedAvatarCdn = '!{avatarCdn}'
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
-      const predefinedAvatarDefault = '!{avatarDefault}'
+      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
-      const avatarDefaultFormat = e => e.startsWith('d=') ? e : `d=${e}`
+      if (content.length > 150) {
-
+        content = content.substring(0,150) + '...'
-      if (predefinedAvatarCdn && predefinedAvatarDefault) {
+      }
-        return { avatarCdn: predefinedAvatarCdn, avatarDefault: avatarDefaultFormat(predefinedAvatarDefault) }
+      return content
    }
    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const getSetting = async () => {
      try {
-        const res = await fetch('!{server}/api/v2/conf')
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
-        const result = await res.json()
+        return await res.json()
        const { mirror, params, default: defaults } = result.frontend_conf.gravatar
        const avatarCdn = predefinedAvatarCdn || mirror
        let avatarDefault = avatarDefaultFormat(predefinedAvatarDefault || params || defaults)
        return { avatarCdn, avatarDefault}
      } catch (e) {
-        console.error(e)
+        console.log(e)
        return { avatarCdn: predefinedAvatarCdn, avatarDefault: avatarDefaultFormat(predefinedAvatarDefault) }
      }
    }
-    const searchParams = new URLSearchParams({
+    const headerList = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Origin': window.location.origin
      },
      body: new URLSearchParams({
        'site_name': '!{site}',
-      'limit': '!{newestCommentsLimit * 2}', // Fetch more comments to filter pending comments
+        'limit': '!{theme.newest_comments.limit}',
        'type':'latest_comments'
      })
    }
-    const getComment = async (ele) => {
+    const getComment = async () => {
      try {
-        const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`)
+        const res = await fetch('!{server}/api/stat', headerList)
        const result = await res.json()
-        const { avatarCdn, avatarDefault } = await getAvatarValue()
+        const avatarStr = await getSetting()
-        const artalk = result.data
+        const { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar
-          .filter(e => !e.is_pending) // Filter pending comments
+        const avatarCdn = !{avatarCdn} || mirror
-          .slice(0, !{newestCommentsLimit}) // Limit the number of comments
+        let avatarDefault = !{avatarDefault} || params || defaults
-          .map(e => {
+        avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
-            const avatar = avatarCdn && e.email_encrypted ? `${avatarCdn}${e.email_encrypted}?${avatarDefault}` : ''
+        const artalk = result.data.map(function (e) {
          return {
-              'avatar': avatar,
+            'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
            'content': changeContent(e.content_marked),
            'nick': e.nick,
            'url': e.page_url,
            'date': e.date,
          }
        })
-        btf.saveToLocal.set(keyName, JSON.stringify(artalk), !{theme.aside.card_newest_comments.storage}/(60*24))
+        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
-        generateHtml(artalk, ele)
+        generateHtml(artalk)
      } catch (e) {
        console.log(e)
-        ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
      }
    }
-    run(keyName, getComment)
+    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('artalk-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/common.pug
+++ b/layout/includes/third-party/newest-comments/common.pug
@@ -1,61 +0,0 @@
 script.
  window.newestComments = {
    changeContent: content => {
      if (content === '') return content
      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<code>.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g, "") // remove html tag
      if (content.length > 150) {
        content = content.substring(0, 150) + '...'
      }
      return content
    },
    generateHtml: (array, ele) => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class="aside-list-item">'
          if (!{theme.aside.card_newest_comments.avatar} && array[i].avatar) {
            const imgAttr = '!{theme.lazyload.enable && !theme.lazyload.native ? "data-lazy-src" : "src"}'
            const lazyloadNative = '!{theme.lazyload.enable && theme.lazyload.native ? "loading=\"lazy\"" : ""}'
            result += `<a href="${array[i].url}" class="thumbnail"><img ${imgAttr}="${array[i].avatar}" alt="${array[i].nick}" ${lazyloadNative}></a>`
          }
          result += `<div class="content">
          <a class="comment" href="${array[i].url}" title="${array[i].content}">${array[i].content}</a>
          <div class="name"><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      ele.innerHTML = result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh(ele)
    },
    newestCommentInit: (name, getComment) => {
      const $dom = document.querySelector('#card-newest-comments .aside-list')
      if ($dom) {
        const data = btf.saveToLocal.get(name)
        if (data) {
          newestComments.generateHtml(JSON.parse(data), $dom)
        } else {
          getComment($dom)
        }
      }
    },
    run: (name, getComment) => {
      newestComments.newestCommentInit(name, getComment)
      btf.addGlobalFn('pjaxComplete', () => newestComments.newestCommentInit(name, getComment), name)
    }
  }
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -1,12 +1,21 @@
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'disqus-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const getComment = ele => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{newestCommentsLimit}&api_key=!{apiKey}')
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<code>.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const getComment = () => {
      fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{apiKey}')
        .then(response => response.json())
        .then(data => {
          const disqusArray = data.response.map(item => {
@@ -19,15 +28,54 @@ script.
            }
          })
-          btf.saveToLocal.set(keyName, JSON.stringify(disqusArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(disqusArray, ele)
+          generateHtml(disqusArray)
        }).catch(e => {
-          console.error(e)
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }
-    run(keyName, getComment)
+    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('disqus-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -1,17 +1,23 @@
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'github-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const findTrueUrl = (array, ele) => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const findTrueUrl = (array) => {
      Promise.all(array.map(item =>
        fetch(item.url).then(resp => resp.json()).then(data => {
-          let urlArray = data.body ? data.body.match(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig) : []
+          const urlArray = data.body.match(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig)
          if (!Array.isArray(urlArray) || urlArray.length === 0) {
            urlArray = [`${data.html_url}`]
          }
          if (data.user.login === 'utterances-bot') {
            return urlArray.pop()
          } else {
@@ -26,13 +32,13 @@ script.
            }
          })
-          btf.saveToLocal.set(keyName, JSON.stringify(array), !{theme.aside.card_newest_comments.storage}/(60*24))
+          saveToLocal.set('github-newest-comments', JSON.stringify(array), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(array, ele)
+          generateHtml(array)
      });
    }
-    const getComment = ele => {
+    const getComment = () => {
-      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{newestCommentsLimit}&page=1',{
+      fetch('https://api.github.com/repos/!{userRepo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
        "headers": {
          Accept: 'application/vnd.github.v3.html+json'
        }
@@ -42,19 +48,60 @@ script.
          const githubArray = data.map(item => {
            return {
              'avatar': item.user.avatar_url,
-              'content': changeContent(item.body_html || item.body),
+              'content': changeContent(item.body_html),
              'nick': item.user.login,
              'url': item.issue_url,
-              'date': item.updated_at
+              'date': item.updated_at,
              'githubUrl': item.html_url
            }
          })
-          findTrueUrl(githubArray, ele)
+          findTrueUrl(githubArray)
        }).catch(e => {
-          console.error(e)
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }
-    run(keyName, getComment)
+
    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('github-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/index.pug
+++ b/layout/includes/third-party/newest-comments/index.pug
@@ -1,11 +1,7 @@
 - let { use } = theme.comments
 if use
-  -
+  - let forum,apiKey,userRepo
    let forum,apiKey,userRepo
    let { limit:newestCommentsLimit } = theme.aside.card_newest_comments
    if (newestCommentsLimit > 10 || newestCommentsLimit < 1) newestCommentsLimit = 6
  case use[0]
    when 'Valine'
      include ./valine.pug
--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/layout/includes/third-party/newest-comments/remark42.pug
@@ -1,16 +1,53 @@
 - const { host, siteId } = theme.remark42
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'remark42-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const getComment = ele => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
-      fetch('!{host}/api/v1/last/!{newestCommentsLimit}?site=!{siteId}')
+      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const getComment = () => {
      fetch('!{host}/api/v1/last/!{theme.newest_comments.limit}?site=!{siteId}')
        .then(response => response.json())
        .then(data => {
-          const remark42 = data.map(e => {
+          const remark42 = data.map(function (e) {
            return {
              'avatar': e.user.picture,
              'content': changeContent(e.text),
@@ -19,13 +56,25 @@ script.
              'date': e.time,
            }
          })
-          btf.saveToLocal.set(keyName, JSON.stringify(remark42), !{theme.aside.card_newest_comments.storage}/(60*24))
+          saveToLocal.set('remark42-newest-comments', JSON.stringify(remark42), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(remark42, ele)
+          generateHtml(remark42)
        }).catch(e => {
-          console.error(e)
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
    }
-    run(keyName, getComment)
+    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('remark42-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -1,18 +1,27 @@
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'twikoo-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const getComment = ele => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const getComment = () => {
      const runTwikoo = () => {
        twikoo.getRecentComments({
          envId: '!{theme.twikoo.envId}',
          region: '!{theme.twikoo.region}',
-          pageSize: !{newestCommentsLimit},
+          pageSize: !{theme.newest_comments.limit},
          includeReply: true
-        }).then(res => {
+        }).then(function (res) {
          const twikooArray = res.map(e => {
            return {
              'content': changeContent(e.comment),
@@ -23,22 +32,61 @@ script.
            }
          })
-          btf.saveToLocal.set(keyName, JSON.stringify(twikooArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(twikooArray, ele)
+          generateHtml(twikooArray)
-        }).catch(err => {
+        }).catch(function (err) {
-          console.error(err)
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        })
      }
      if (typeof twikoo === 'object') {
        runTwikoo()
      } else {
-        btf.getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
+        getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
      }
    }
-    run(keyName, getComment)
+    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('twikoo-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -1,12 +1,21 @@
 - let default_avatar = theme.valine.avatar
 script(src=url_for(theme.asset.blueimp_md5))
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'valine-newest-comments'
+    const changeContent = (content) => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const getIcon = (icon, mail) => {
      if (icon) return icon
@@ -15,7 +24,34 @@ script.
      return iconUrl
    }
-    const getComment = ele => {
+    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const getComment = () => {
      const serverURL = '!{theme.valine.serverURLs || `https://${theme.valine.appId.substring(0,8)}.api.lncldglobal.com` }'
      var settings = {
@@ -27,10 +63,10 @@ script.
        },
      }
-      fetch(`${serverURL}/1.1/classes/Comment?limit=!{newestCommentsLimit}&order=-createdAt`,settings)
+      fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,settings)
        .then(response => response.json())
        .then(data => {
-          const valineArray = data.results.map(e => {
+          const valineArray = data.results.map(function (e) {
            return {
              'avatar': getIcon(e.QQAvatar, e.mail),
              'content': changeContent(e.comment),
@@ -39,13 +75,25 @@ script.
              'date': e.updatedAt,
            }
          })
-          btf.saveToLocal.set(keyName, JSON.stringify(valineArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+          saveToLocal.set('valine-newest-comments', JSON.stringify(valineArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(valineArray, ele)
+          generateHtml(valineArray)
        }).catch(e => {
-          console.error(e)
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
        }) 
    }
-    run(keyName, getComment)
+    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('valine-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -1,15 +1,49 @@
 - const serverURL = theme.waline.serverURL.replace(/\/$/, '')
 != partial("includes/third-party/newest-comments/common.pug", {}, { cache: true })
 script.
  window.addEventListener('load', () => {
-    const keyName = 'waline-newest-comments'
+    const changeContent = content => {
-    const { changeContent, generateHtml, run } = window.newestComments
+      if (content === '') return content
-    const getComment = async (ele) => {
+      content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
      content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
      content = content.replace(/<pre><code>.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
      content = content.replace(/<[^>]+>/g,"") // remove html tag
      if (content.length > 150) {
        content = content.substring(0,150) + '...'
      }
      return content
    }
    const generateHtml = array => {
      let result = ''
      if (array.length) {
        for (let i = 0; i < array.length; i++) {
          result += '<div class=\'aside-list-item\'>'
          if (!{theme.newest_comments.avatar}) {
            const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
          }
          result += `<div class='content'>
          <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
          <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
          </div></div>`
        }
      } else {
        result += '!{_p("aside.card_newest_comments.zero")}'
      }
      let $dom = document.querySelector('#card-newest-comments .aside-list')
      $dom.innerHTML= result
      window.lazyLoadInstance && window.lazyLoadInstance.update()
      window.pjax && window.pjax.refresh($dom)
    }
    const getComment = async () => {
      try {
-        const res = await fetch('!{serverURL}/api/comment?type=recent&count=!{newestCommentsLimit}')
+        const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
        const result = await res.json()
        const walineArray = result.data.map(e => {
          return {
@@ -20,13 +54,26 @@ script.
            'date': e.time || e.insertedAt
          }
        })
-        btf.saveToLocal.set(keyName, JSON.stringify(walineArray), !{theme.aside.card_newest_comments.storage}/(60*24))
+        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
-        generateHtml(walineArray, ele)
+        generateHtml(walineArray)
      } catch (err) {
        console.error(err)
-        ele.textContent= "!{_p('aside.card_newest_comments.error')}"
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
      }
    }
-    run(keyName, getComment)
+    const newestCommentInit = () => {
      if (document.querySelector('#card-newest-comments .aside-list')) {
        const data = saveToLocal.get('waline-newest-comments')
        if (data) {
          generateHtml(JSON.parse(data))
        } else {
          getComment()
        }
      }
    }
    newestCommentInit()
    document.addEventListener('pjax:complete', newestCommentInit)
  })
--- a/layout/includes/third-party/pangu.pug
+++ b/layout/includes/third-party/pangu.pug
@@ -0,0 +1,20 @@
 script.
  function panguFn () {
    if (typeof pangu === 'object') pangu.autoSpacingPage()
    else {
      getScript('!{url_for(theme.asset.pangu)}')
        .then(() => {
          pangu.autoSpacingPage()
        })
    }
  }
  function panguInit () {
    if (!{theme.pangu.field === 'post'}){
      GLOBAL_CONFIG_SITE.isPost && panguFn()
    } else {
      panguFn()
    }
  }
  document.addEventListener('DOMContentLoaded', panguInit)
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -1,25 +1,22 @@
 - var pjaxExclude = 'a:not([target="_blank"])'
 if theme.pjax.exclude
  each val in theme.pjax.exclude
-    - pjaxExclude += `:not([href="${val}"])`
+    - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
 - let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
 - let choose = theme.comments.use
 if choose
-  if choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus')
+  if theme.Open_Graph_meta.enable && (choose.includes('Livere') || choose.includes('Utterances') || choose.includes('Giscus'))
    - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
  if choose.includes('Utterances') || choose.includes('Giscus')
    - pjaxSelectors.unshift('link[rel="canonical"]')
    if theme.Open_Graph_meta.enable
      - pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]', 'meta[property="og:description"]')
    else
      - pjaxSelectors.unshift('meta[name="description"]')
-script(src=url_for(theme.asset.pjax) defer)
+script(src=url_for(theme.asset.pjax))
 script.
-  document.addEventListener('DOMContentLoaded', () => {
+  let pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
    const pjaxSelectors = !{JSON.stringify(pjaxSelectors)}
-    window.pjax = new Pjax({
+  var pjax = new Pjax({
    elements: '!{pjaxExclude}',
    selectors: pjaxSelectors,
    cacheBust: false,
@@ -27,31 +24,34 @@ script.
    scrollRestoration: false
  })
-    const triggerPjaxFn = (val) => {
+  document.addEventListener('pjax:send', function () {
-      if (!val) return
+
-      Object.values(val).forEach(fn => {
+    // removeEventListener scroll 
-        try {
+    window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
-          fn()
+    window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
-        } catch (err) {
+
-          console.debug('Pjax callback failed:', err)
+    document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
    if (window.aplayers) {
      for (let i = 0; i < window.aplayers.length; i++) {
        if (!window.aplayers[i].options.fixed) {
          window.aplayers[i].destroy()
        }
      }
      })
    }
-    document.addEventListener('pjax:send', () => {
+    typeof typed === 'object' && typed.destroy()
      // removeEventListener
      btf.removeGlobalFnEvent('pjaxSendOnce')
      btf.removeGlobalFnEvent('themeChange')
    //reset readmode
    const $bodyClassList = document.body.classList
-      if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')
+    $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
-      triggerPjaxFn(window.globalFn.pjaxSend)
+    typeof disqusjs === 'object' && disqusjs.destroy()
  })
-    document.addEventListener('pjax:complete', () => {
+  document.addEventListener('pjax:complete', function () {
-      btf.removeGlobalFnEvent('pjaxCompleteOnce')
+    window.refreshFn()
    document.querySelectorAll('script[data-pjax]').forEach(item => {
      const newScript = document.createElement('script')
      const content = item.text || item.textContent || item.innerHTML || ""
@@ -60,14 +60,24 @@ script.
      item.parentNode.replaceChild(newScript, item)
    })
-      triggerPjaxFn(window.globalFn.pjaxComplete)
+    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
    typeof panguInit === 'function' && panguInit()
    // google analytics
    typeof gtag === 'function' && gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
    // baidu analytics
    typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
    // prismjs
    typeof Prism === 'object' && Prism.highlightAll()
  })
-    document.addEventListener('pjax:error', e => {
+  document.addEventListener('pjax:error', (e) => {
    if (e.request.status === 404) {
-        !{theme.error_404 && theme.error_404.enable}
+      pjax.loadUrl('/404.html')
          ? pjax.loadUrl('!{url_for("/404.html")}')
          : window.location.href = e.request.responseURL
    }
  })
  })
--- a/layout/includes/third-party/prismjs.pug
+++ b/layout/includes/third-party/prismjs.pug
@@ -1,23 +1,5 @@
- const { prismjs_js, prismjs_autoloader, prismjs_lineNumber_js } = theme.asset
+if config.prismjs && config.prismjs.enable && !config.prismjs.preprocess
- const { prismjs, syntax_highlighter } = config
+  script(src=url_for(theme.asset.prismjs_js))
- const { enable, preprocess, line_number } = prismjs
+  script(src=url_for(theme.asset.prismjs_autoloader))
-
+  if config.prismjs.line_number
-if (syntax_highlighter === 'prismjs' || enable) && !preprocess
+    script(src=url_for(theme.asset.prismjs_lineNumber_js))
  script.
    (() => {
      window.Prism = window.Prism || {}
      window.Prism.manual = true
      const highlightAll = () => {
        window.Prism.highlightAll()
      }
      window.addEventListener('load', highlightAll)
      btf.addGlobalFn('pjaxComplete', highlightAll, 'prismjs')
      btf.addGlobalFn('encrypt', highlightAll, 'prismjs')
    })()
  script(src=url_for(prismjs_js) defer)
  script(src=url_for(prismjs_autoloader) defer)
  if (line_number)
    script(src=url_for(prismjs_lineNumber_js) defer)
--- a/layout/includes/third-party/search/algolia.pug
+++ b/layout/includes/third-party/search/algolia.pug
@@ -2,33 +2,21 @@
  .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
      .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-hits-empty(style="display:none;")
+        #algolia-pagination
          .ais-Hits(style="display:none;")
            ol.ais-Hits-list
        #algolia-pagination.ais-Pagination(style="display:none;")
          ul.ais-Pagination-list
        #algolia-info
-          span.ais-Stats-text
+          .algolia-stats
-          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")
+          .algolia-poweredBy
            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))
--- a/layout/includes/third-party/search/docsearch.pug
+++ b/layout/includes/third-party/search/docsearch.pug
@@ -1,4 +1,4 @@
- const { placeholder, docsearch: { appId, apiKey, indexName, option } } = theme.search
+- const { appId, apiKey, indexName, option } = theme.docsearch
 .docsearch-wrap
  #docsearch(style="display:none")
@@ -11,15 +11,13 @@
        apiKey: '!{apiKey}',
        indexName: '!{indexName}',
        container: '#docsearch',
        placeholder: '!{ placeholder || _p("search.input_placeholder")}',
      }, !{JSON.stringify(option)}))
      const handleClick = () => {
        document.querySelector('.DocSearch-Button').click()
      }
      const searchClickFn = () => {
-        btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', handleClick)
+        document.querySelector('#search-button > .search').addEventListener('click', () => {
          document.querySelector('.DocSearch-Button').click()
        })
      }
      searchClickFn()
--- a/layout/includes/third-party/search/index.pug
+++ b/layout/includes/third-party/search/index.pug
@@ -1,7 +1,6 @@
-case theme.search.use
+if theme.algolia_search.enable
  when 'algolia_search'
  include ./algolia.pug
-  when 'local_search'
+else if theme.local_search.enable
  include ./local-search.pug
-  when 'docsearch'
+else if theme.docsearch.enable
  include ./docsearch.pug
--- a/Show More
+++ b/Show More
`@@ -1,2 +1,2 @@`
	`#article-container.container`	`#article-container`
	`!= page.content`	`!= page.content`
`@@ -1,2 +1,2 @@`
	`.tag-cloud-list.text-center`	`.tag-cloud-list.is-center`
	`!=cloudTags({source: site.tags, orderby: page.orderby \|\| 'random', order: page.order \|\| 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em', custom_colors: page.custom_colors})`	`!=cloudTags({source: site.tags, orderby: page.orderby \|\| 'random', order: page.order \|\| 1, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})`