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
@@ -1,117 +1,193 @@
|
||||
<div align="right">
|
||||
<a title="Chinese" href="/README_CN.md">中文</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
<img src="./source/img/butterfly-icon.png" width="150" height="150" />
|
||||
|
||||
# hexo-theme-butterfly
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
📢 Demo: [Butterfly](https://butterfly.js.org/) / [CrazyWong](https://blog.crazywong.com/)
|
||||
|
||||
📖 Docs: [English](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) / [Chinese](https://butterfly.js.org/posts/21cfbf15/)
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 💻 Installation
|
||||
|
||||
### GIT
|
||||
|
||||
> If you are in Mainland China, you can download in [Gitee](https://gitee.com/immyw/hexo-theme-butterfly.git)
|
||||
|
||||
Stable branch [recommend]:
|
||||
|
||||
```
|
||||
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
|
||||
```
|
||||
|
||||
Dev branch:
|
||||
|
||||
```
|
||||
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
|
||||
```
|
||||
|
||||
### NPM
|
||||
|
||||
> It supports Hexo 5.0.0 or later
|
||||
|
||||
In Hexo site root directory
|
||||
|
||||
```powershell
|
||||
npm i hexo-theme-butterfly
|
||||
```
|
||||
|
||||
## ⚙ Configuration
|
||||
|
||||
Set theme in the hexo work folder's root config file `_config.yml`:
|
||||
|
||||
> theme: butterfly
|
||||
|
||||
If you don't have pug & stylus renderer, try this:
|
||||
|
||||
> npm install hexo-renderer-pug hexo-renderer-stylus
|
||||
|
||||
## 🎉 Features
|
||||
|
||||
- [x] Card UI Design
|
||||
- [x] Rounded Design/Squared Design
|
||||
- [X] Support sub-menu
|
||||
- [x] Two-column layout
|
||||
- [x] Responsive Web Design
|
||||
- [x] Dark Mode
|
||||
- [x] Pjax
|
||||
- [x] Read Mode
|
||||
- [x] Conversion between Traditional and Simplified Chinese
|
||||
- [X] TOC catalog is available for both computers and mobile phones
|
||||
- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean), also support customization
|
||||
- [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
|
||||
- [X] Disable copy/Add a Copyright Notice to the Copied Text
|
||||
- [X] Search (Algolia Search/Local Search)
|
||||
- [x] Mathjax and Katex
|
||||
- [x] Built-in 404 page
|
||||
- [x] WordCount
|
||||
- [x] Related articles
|
||||
- [x] Displays outdated notice for a post
|
||||
- [x] Share (Sharejs/Addtoany)
|
||||
- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk)
|
||||
- [x] Multiple Comment System Support
|
||||
- [x] Online Chats (Chatra/Tidio/Crisp)
|
||||
- [x] Web analytics
|
||||
- [x] Google AdSense
|
||||
- [x] Webmaster Verification
|
||||
- [x] Change website colour scheme
|
||||
- [x] Typewriter Effect: activate_power_mode
|
||||
- [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest)
|
||||
- [x] Mouse click effects (Fireworks/Heart/Text)
|
||||
- [x] Preloader/Loading Animation/pace.js
|
||||
- [x] Busuanzi visitor counter
|
||||
- [x] Medium Zoom/Fancybox
|
||||
- [x] Mermaid
|
||||
- [x] Chart.js
|
||||
- [x] Justified Gallery
|
||||
- [x] Lazyload images
|
||||
- [x] Instantpage/Snackbar notification toast/PWA......
|
||||
|
||||
## ✨ Contributors
|
||||
|
||||
<a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />
|
||||
</a>
|
||||
|
||||
## 📷 Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div align="right">
|
||||
<a title="中文" 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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
📢 **Demo**: [Butterfly Official](https://butterfly.js.org/) | [CrazyWong's Blog](https://blog.crazywong.com/)
|
||||
|
||||
📖 **Documentation**: [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) | [中文文档](https://butterfly.js.org/posts/21cfbf15/)
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### 💾 Installation
|
||||
|
||||
#### Method 1: Git Installation (Recommended)
|
||||
|
||||
> 💡 **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
|
||||
# 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
|
||||
|
||||
> ⚠️ **Note**: NPM installation only supports Hexo 5.0.0 and above
|
||||
|
||||
```bash
|
||||
npm install hexo-theme-butterfly
|
||||
```
|
||||
|
||||
### ⚙️ Theme Configuration
|
||||
|
||||
1. **Enable Theme**: Modify your Hexo configuration file `_config.yml`:
|
||||
|
||||
```yaml
|
||||
theme: butterfly
|
||||
```
|
||||
|
||||
2. **Install Dependencies**: If you haven't installed pug and stylus renderers, please run:
|
||||
|
||||
```bash
|
||||
npm install hexo-renderer-pug hexo-renderer-stylus --save
|
||||
```
|
||||
|
||||
## ✨ Theme Features
|
||||
|
||||
### 🎨 Design Style
|
||||
- [x] **Card-based Design** - Modern card-style layout
|
||||
- [x] **Rounded/Square Design** - Customizable border styles
|
||||
- [x] **Responsive Design** - Perfect adaptation to all screen sizes
|
||||
- [x] **Two-column Layout** - Optimized reading experience
|
||||
- [x] **Dark Mode** - Eye-friendly night mode
|
||||
|
||||
### 📝 Content Features
|
||||
- [x] **Multi-level Menu** - Support for secondary navigation menus
|
||||
- [x] **Reading Mode** - Focused article reading experience
|
||||
- [x] **TOC Navigation** - Desktop and mobile TOC support
|
||||
- [x] **Word Count** - Display article word count and reading time
|
||||
- [x] **Related Articles** - Smart recommendation of related content
|
||||
- [x] **Outdated Reminder** - Automatic article update status alerts
|
||||
- [x] **Traditional/Simplified Chinese** - Support for Traditional and Simplified Chinese switching
|
||||
- [x] **Tag Plugins** - Rich tag plugin support
|
||||
|
||||
### 🔍 Search & Navigation
|
||||
- [x] **Multiple Search Options** - Algolia Search / Local Search / Docsearch
|
||||
- [x] **Built-in 404** - Beautiful 404 error page
|
||||
- [x] **Pjax Support** - Smooth page transition experience
|
||||
|
||||
### 🎨 Code Display
|
||||
- [x] **Syntax Highlighting** - Built-in multiple themes (darker/pale night/light/ocean)
|
||||
- [x] **Code Features** - Language display/fold expand/copy button/auto-wrap
|
||||
- [x] **Math Formulas** - Support for Mathjax and Katex
|
||||
|
||||
### 💬 Social Interaction
|
||||
- [x] **Multiple Comment Systems** - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk etc.
|
||||
- [x] **Dual Comments Support** - Enable two comment systems simultaneously
|
||||
- [x] **Share Features** - Sharejs/Addtoany sharing components
|
||||
- [x] **Live Chat** - Chatra/Tidio/Crisp instant messaging
|
||||
|
||||
### 📊 Analytics & Statistics
|
||||
- [x] **Visit Statistics** - Busuanzi counter
|
||||
- [x] **Site Analytics** - Google Analytics/Baidu Analytics/Cloudflare Analytics/Microsoft Clarity/Umami
|
||||
- [x] **Webmaster Verification** - Major search engine verification
|
||||
- [x] **Ad Support** - Google AdSense/custom ad slots
|
||||
|
||||
### 🎪 Visual Effects
|
||||
- [x] **Typing Effects** - activate_power_mode animations
|
||||
- [x] **Background Effects** - Static ribbons/dynamic ribbons/floating ribbons/Canvas Nest
|
||||
- [x] **Mouse Effects** - Fireworks/hearts/text click effects
|
||||
- [x] **Loading Animations** - Preloader and pace.js progress bars
|
||||
- [x] **Image Effects** - Medium Zoom/Fancybox image lightbox
|
||||
- [x] **Lazy Loading** - Image lazy loading optimization
|
||||
|
||||
### 🛠️ Advanced Features
|
||||
- [x] **PWA Support** - Progressive Web App
|
||||
- [x] **Copy Protection** - Disable text copying/copyright info append
|
||||
- [x] **Theme Customization** - Custom site color schemes
|
||||
- [x] **Chart Support** - Mermaid flowcharts/Chart.js data charts
|
||||
- [x] **Music Notation** - ABCJS music notation support
|
||||
- [x] **Music Player** - APlayer/Meting music playback
|
||||
- [x] **Article Series** - Series article organization
|
||||
- [x] **Instantpage** - Page preloading acceleration
|
||||
- [x] **Snackbar** - Elegant notification messages
|
||||
|
||||
## 🤝 Contributors
|
||||
|
||||
Thanks to all the developers who have contributed to the Butterfly theme!
|
||||
|
||||
[](https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors)
|
||||
|
||||
## 📸 Screenshots
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## ⭐ Star History
|
||||
|
||||
[](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>
|
||||
|
||||
Reference in New Issue
Block a user