jerryc127/hexo-theme-butterfly

๐Ÿฆ‹ A Hexo Theme: Butterfly

JavaScript

8,365

701 commits

updated Oct 8, 2026

See the code

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

๐Ÿ’ก 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
  • 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! โœจ

butterfly
hexo
hexo-theme
pug
theme

jerryc127/hexo-theme-butterfly

๐Ÿฆ‹ A Hexo Theme: Butterfly

JavaScript

8,365

701 commits

updated Oct 8, 2026

See the code

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

๐Ÿ’ก 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
  • 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! โœจ

butterfly
hexo
hexo-theme
pug
theme

Project health

Overall

4.3/10

Maintained

10/10

Code review

1/10
OpenSSF Scorecard

Latest release

5.7.0 ยท Aug 4, 2026

Releases this year

7

Significant stargazers

Wei Kang

160 followers ยท starred Aug 2024

Nadeshiko Manju

1,942 followers ยท starred Oct 2024

Rainman

158 followers ยท starred Aug 2021

VampireAchao

125 followers ยท starred Feb 2026