mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-06-05 21:01:46 +08:00
feat: 預設關閉 structured_data
feat: 升級一些項目依賴 feat: 重寫 README.md 和 README_CN.md，改進文檔結構和內容 feat: tags 標籤插件夜間模式調整 feat: 加按鈕懸停效果和動畫 fix: 修復右下角箭頭圖標位置沒有居中的 bug feat: 增加右下角箭頭和滾動百分比的切換效果 improvement: 優化 tags 頁標籤雲顯示效果 improvement: 整合部分js到 init.js improvement: 統一 CSS 變數使用，改進主題一致性
This commit is contained in:
Jerry
+149
-73
@@ -4,114 +4,190 @@
|
||||
|
||||
<div align="center">
|
||||
|
||||
<img src="./source/img/butterfly-icon.png" width="150" height="150" />
|
||||
<img src="./source/img/butterfly-icon.png" width="150" height="150" alt="Butterfly Logo" />
|
||||
|
||||
# hexo-theme-butterfly
|
||||
|
||||
一個適用於 Hexo 的現代化、美觀且功能豐富的主題
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
📢 預覽: [Butterfly](https://butterfly.js.org/) / [CrazyWong](https://blog.crazywong.com/)
|
||||
📢 **在線預覽**: [Butterfly 官方](https://butterfly.js.org/) | [CrazyWong 博客](https://blog.crazywong.com/)
|
||||
|
||||
📖 文檔: [中文](https://butterfly.js.org/posts/21cfbf15/) / [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
|
||||
📖 **完整文檔**: [中文文檔](https://butterfly.js.org/posts/21cfbf15/) | [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/)
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 💻 安裝
|
||||
## 🚀 快速開始
|
||||
|
||||
### Git 安裝
|
||||
### 💾 安裝方式
|
||||
|
||||
> 本倉庫同時上傳到 [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
|
||||
#### 方式一：Git 安裝（推薦）
|
||||
|
||||
在博客根目錄裡安裝穩定版【推薦】
|
||||
> 💡 **提示**: 如果您在中國大陸訪問 GitHub 速度較慢，可以使用 [Gitee 鏡像](https://gitee.com/immyw/hexo-theme-butterfly.git)
|
||||
|
||||
```powershell
|
||||
在您的 Hexo 博客根目錄下執行：
|
||||
|
||||
```bash
|
||||
# 安裝穩定版本（推薦）
|
||||
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
|
||||
```
|
||||
|
||||
如果想要安裝比較新的dev分支，可以
|
||||
|
||||
```powershell
|
||||
```bash
|
||||
# 安裝開發版本（搶先體驗新功能）
|
||||
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
|
||||
```
|
||||
|
||||
### npm 安裝
|
||||
#### 方式二：NPM 安裝
|
||||
|
||||
> 此方法只支持Hexo 5.0.0以上版本
|
||||
> ⚠️ **注意**: NPM 安裝方式僅支援 Hexo 5.0.0 及以上版本
|
||||
|
||||
在博客根目錄裡
|
||||
|
||||
```powershell
|
||||
npm i hexo-theme-butterfly
|
||||
```bash
|
||||
npm install hexo-theme-butterfly
|
||||
```
|
||||
|
||||
## ⚙ 應用主題
|
||||
### ⚙️ 主題配置
|
||||
|
||||
修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
|
||||
1. **啟用主題**: 修改您的 Hexo 配置檔案 `_config.yml`：
|
||||
|
||||
```
|
||||
```yaml
|
||||
theme: butterfly
|
||||
```
|
||||
|
||||
>如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save
|
||||
2. **安裝依賴**: 如果您尚未安裝 pug 和 stylus 渲染器，請執行：
|
||||
|
||||
## 🎉 特色
|
||||
```bash
|
||||
npm install hexo-renderer-pug hexo-renderer-stylus --save
|
||||
```
|
||||
|
||||
- [x] 卡片化設計
|
||||
- [x] 圓角化設計/直角化設計
|
||||
- [X] 支持二級目錄
|
||||
- [x] 雙欄設計
|
||||
- [x] 響應式主題
|
||||
- [x] 夜間模式
|
||||
- [x] Pjax
|
||||
- [x] 文章閲讀模式
|
||||
- [x] 簡體和繁體轉換
|
||||
- [X] 電腦和手機都可查看TOC目錄
|
||||
- [X] 內置多種代碼配色（darker/pale night/light/ocean），可自定義代碼配色
|
||||
- [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
|
||||
- [X] 可關閉文字複製/可開啟內容複製增加版權信息）
|
||||
- [X] 兩種搜索（ Algolia 搜索和本地搜索）
|
||||
- [x] Mathjax 和 Katex
|
||||
- [x] 內置404頁面
|
||||
- [x] 顯示字數統計
|
||||
- [x] 顯示相關文章
|
||||
- [x] 過期文章提醒
|
||||
- [x] 多種分享系統（Sharejs/Addtoany）
|
||||
- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk）
|
||||
- [x] 支持雙評論部署
|
||||
- [x] 多種在線聊天（Chatra/Tidio/Crisp）
|
||||
- [x] 多種分析系統
|
||||
- [x] 谷歌廣告/手動廣告位置
|
||||
- [x] 各種站長驗證
|
||||
- [x] 修改網站配色
|
||||
- [x] 打字特效 activate_power_mode
|
||||
- [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
|
||||
- [x] 多種鼠標點擊特效（煙花/文字/愛心）
|
||||
- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
|
||||
- [x] 不蒜子訪問統計
|
||||
- [x] 兩種大圖模式（Medium Zoom/Fancybox）
|
||||
- [x] Mermaid 圖表顯示
|
||||
- [x] Chart.js 圖表顯示
|
||||
- [x] 照片牆
|
||||
- [x] 圖片懶加載
|
||||
- [x] Instantpage/Snackbar彈窗/PWA......
|
||||
## ✨ 主題特色
|
||||
|
||||
## ✨ 貢獻者
|
||||
### 🎨 設計風格
|
||||
- [x] **卡片化設計** - 現代化的卡片式佈局
|
||||
- [x] **圓角/直角設計** - 支援自訂邊框樣式
|
||||
- [x] **響應式設計** - 完美適配各種螢幕尺寸
|
||||
- [x] **雙欄佈局** - 優化的閱讀體驗
|
||||
- [x] **深色模式** - 護眼的夜間模式
|
||||
|
||||
<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
|
||||
</a>
|
||||
### 📝 內容功能
|
||||
- [x] **多級選單** - 支援二級導航選單
|
||||
- [x] **閱讀模式** - 專注的文章閱讀體驗
|
||||
- [x] **目錄導航** - 電腦和手機雙端支援 TOC
|
||||
- [x] **字數統計** - 顯示文章字數和閱讀時間
|
||||
- [x] **相關文章** - 智能推薦相關內容
|
||||
- [x] **過期提醒** - 自動提示文章更新狀態
|
||||
- [x] **簡繁轉換** - 支援繁體中文和簡體中文切換
|
||||
- [x] **標籤外掛** - 豐富的標籤外掛支持
|
||||
|
||||
## 📷 截圖
|
||||
### 🔍 搜尋與導航
|
||||
- [x] **多種搜尋** - Algolia 搜尋 / 本地搜尋 / Docsearch
|
||||
- [x] **內建 404** - 美觀的 404 錯誤頁面
|
||||
- [x] **Pjax 支援** - 流暢的頁面切換體驗
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 🎨 程式碼展示
|
||||
- [x] **語法高亮** - 內建多種主題（darker/pale night/light/ocean）
|
||||
- [x] **程式碼功能** - 語言顯示/摺疊展開/複製按鈕/自動換行
|
||||
- [x] **數學公式** - 支援 Mathjax 和 Katex
|
||||
|
||||
### 💬 社交互動
|
||||
- [x] **多元評論系統** - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk 等
|
||||
- [x] **雙評論支援** - 可同時啟用兩套評論系統
|
||||
- [x] **分享功能** - Sharejs/Addtoany 分享套件
|
||||
- [x] **線上客服** - Chatra/Tidio/Crisp 即時聊天
|
||||
|
||||
### 📊 數據分析
|
||||
- [x] **訪問統計** - 不蒜子計數器
|
||||
- [x] **網站分析** - Google Analytics/百度統計/Cloudflare Analytics/Microsoft Clarity/Umami
|
||||
- [x] **站長驗證** - 各大搜尋引擎驗證
|
||||
- [x] **廣告支援** - Google AdSense/自訂廣告位
|
||||
|
||||
### 🎪 視覺效果
|
||||
- [x] **打字特效** - activate_power_mode 動畫
|
||||
- [x] **背景特效** - 靜態彩帶/動態彩帶/飄帶效果/Canvas Nest
|
||||
- [x] **滑鼠特效** - 煙花/愛心/文字點擊效果
|
||||
- [x] **載入動畫** - Preloader 和 pace.js 進度條
|
||||
- [x] **圖片效果** - Medium Zoom/Fancybox 圖片燈箱
|
||||
- [x] **懶載入** - 圖片延遲載入優化
|
||||
|
||||
### 🛠️ 進階功能
|
||||
- [x] **PWA 支援** - 漸進式網頁應用
|
||||
- [x] **複製保護** - 可關閉文字複製/版權資訊追加
|
||||
- [x] **主題定製** - 自訂網站配色方案
|
||||
- [x] **圖表支援** - Mermaid 流程圖/Chart.js 數據圖表
|
||||
- [x] **音樂符號** - ABCJS 音樂記譜法支援
|
||||
- [x] **音樂播放器** - APlayer/Meting 音樂播放功能
|
||||
- [x] **系列文章** - 系列文章組織功能
|
||||
- [x] **Instantpage** - 頁面預載入加速
|
||||
- [x] **Snackbar** - 優雅的提示訊息
|
||||
|
||||
## 🤝 貢獻者
|
||||
|
||||
感謝所有為 Butterfly 主題做出貢獻的開發者們！
|
||||
|
||||
[](https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors)
|
||||
|
||||
## 📸 主題截圖
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## ⭐ Star 趨勢
|
||||
|
||||
[](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>
|
||||
|
||||
Reference in New Issue
Block a user