랭킹으로 돌아가기

jerryc127/hexo-theme-butterfly

JavaScriptbutterfly.js.org

🦋 A Hexo Theme: Butterfly

hexohexo-themethemebutterflypug
스타 성장
스타
8.3k
포크
1.4k
주간 성장
이슈
1
5k
2019년 6월2021년 10월2024년 3월2026년 7월
아티팩트npmnpm install hexo-theme-butterfly
README
Butterfly Logo

hexo-theme-butterfly

A modern, elegant and feature-rich theme for Hexo

master version dev version npm version hexo version license GitHub stars

📢 Demo: Butterfly Official | CrazyWong's Blog

📖 Documentation: English Docs | 中文文档

Butterfly Theme Preview


🚀 Quick Start

💾 Installation

Method 1: Git Installation (Recommended)

💡 Tip: If GitHub access is slow in mainland China, you can use the Gitee Mirror

Execute in your Hexo blog root directory:

# Install stable version (recommended)
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# 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

npm install hexo-theme-butterfly

⚙️ Theme Configuration

  1. Enable Theme: Modify your Hexo configuration file _config.yml:
theme: butterfly
  1. Install Dependencies: If you haven't installed pug and stylus renderers, please run:
npm install hexo-renderer-pug hexo-renderer-stylus --save

✨ Theme Features

🎨 Design Style

  • Card-based Design - Modern card-style layout
  • Rounded/Square Design - Customizable border styles
  • Responsive Design - Perfect adaptation to all screen sizes
  • Two-column Layout - Optimized reading experience
  • Dark Mode - Eye-friendly night mode

📝 Content Features

  • Multi-level Menu - Support for secondary navigation menus
  • Reading Mode - Focused article reading experience
  • TOC Navigation - Desktop and mobile TOC support
  • Word Count - Display article word count and reading time
  • Related Articles - Smart recommendation of related content
  • Outdated Reminder - Automatic article update status alerts
  • Traditional/Simplified Chinese - Support for Traditional and Simplified Chinese switching
  • Tag Plugins - Rich tag plugin support

🔍 Search & Navigation

  • Multiple Search Options - Algolia Search / Local Search / Docsearch
  • Built-in 404 - Beautiful 404 error page
  • Pjax Support - Smooth page transition experience

🎨 Code Display

  • Syntax Highlighting - Built-in multiple themes (darker/pale night/light/ocean)
  • Code Features - Language display/fold expand/copy button/auto-wrap
  • Math Formulas - Support for Mathjax and Katex

💬 Social Interaction

  • Multiple Comment Systems - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk etc.
  • Dual Comments Support - Enable two comment systems simultaneously
  • Share Features - Sharejs/Addtoany sharing components
  • Live Chat - Chatra/Tidio/Crisp instant messaging

📊 Analytics & Statistics

  • Visit Statistics - Busuanzi counter
  • Site Analytics - Google Analytics/Baidu Analytics/Cloudflare Analytics/Microsoft Clarity/Umami
  • Webmaster Verification - Major search engine verification
  • Ad Support - Google AdSense/custom ad slots

🎪 Visual Effects

  • Typing Effects - activate_power_mode animations
  • Background Effects - Static ribbons/dynamic ribbons/floating ribbons/Canvas Nest
  • Mouse Effects - Fireworks/hearts/text click effects
  • Loading Animations - Preloader and pace.js progress bars
  • Image Effects - Medium Zoom/Fancybox image lightbox
  • Lazy Loading - Image lazy loading optimization

🛠️ Advanced Features

  • PWA Support - Progressive Web App
  • Copy Protection - Disable text copying/copyright info append
  • Theme Customization - Custom site color schemes
  • Chart Support - Mermaid flowcharts/Chart.js data charts
  • Music Notation - ABCJS music notation support
  • Music Player - APlayer/Meting music playback
  • Article Series - Series article organization
  • Instantpage - Page preloading acceleration
  • Snackbar - Elegant notification messages

🤝 Contributors

Thanks to all the developers who have contributed to the Butterfly theme!

Contributors

📸 Screenshots

Theme Demo

Theme Demo

Theme Demo

Theme Demo

⭐ Star History

Star History Chart

🤝 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

🎯 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 - Support long-term development

📄 License

This project is licensed under the Apache 2.0 License.

🙏 Acknowledgments

This theme is developed based on 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.


✨ If this theme helps you, please give us a ⭐ Star! ✨

관련 저장소
hexojs/hexo

A fast, simple & powerful blog framework, powered by Node.js.

TypeScriptnpmMIT Licensehexojavascript
hexo.io
41.8k27
iissnan/hexo-theme-next

Elegant theme for Hexo.

JavaScriptnpmMIT Licensehexohexo-theme
notes.iissnan.com
15.8k3.5k
litten/hexo-theme-yilia

一个简洁优雅的hexo主题 A simple and elegant theme for hexo.

JavaScriptnpmhexohexo-theme
litten.me
8.4k2.3k
theme-next/hexo-theme-next

Elegant and powerful theme for Hexo.

StylusOtherhexohexo-theme
theme-next.org
8.3k2k
fluid-dev/hexo-theme-fluid

:ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo

JavaScriptnpmGNU General Public License v3.0hexo-themematerial-design
hexo.fluid-dev.com
8.2k1.1k
ppoffice/hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.

JavaScriptnpmMIT Licensehexohexo-theme
ppoffice.github.io/hexo-theme-icarus/
6.7k1.5k
iblh/hexo-theme-material

Material Design theme for hexo.

CSSnpmGNU General Public License v3.0themehexo
iblh.github.io/material-demo/
4k541
probberechts/hexo-theme-cactus

:cactus: A responsive, clean and simple theme for Hexo.

StylusMIT Licensehexotheme
probberechts.github.io/hexo-theme-cactus/
3.5k816
yscoder/hexo-theme-indigo

一个Material Design风格的Hexo主题。 https://imys.net/    备用:

CSSnpmThe Unlicensehexotheme
yscoder.github.io
2.8k527
next-theme/hexo-theme-next

🎉 Elegant and powerful theme for Hexo.

JavaScriptnpmOtherhexohexo-theme
theme-next.js.org
2.8k493
anzhiyu-c/hexo-theme-anzhiyu

安知鱼主题,这是一个简洁美丽的hexo主题。

StylusGNU General Public License v3.0anzhiyuhexo
2.5k388
twikoojs/twikoo

💬 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system.

JavaScriptnpmMIT Licensecloudbasehexo
twikoo.js.org
2.2k508