hexo-butterfly

Install and configure the Hexo Butterfly theme for Hexo blogs.

Updated May 7, 2024
One-click install
npx skills add https://github.com/daojiAnime/DaojiBlog --skill hexo-butterfly
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hexo-butterfly
Source: https://github.com/daojiAnime/DaojiBlog/tree/main/.claude/skills/hexo-butterfly
Command: npx skills add https://github.com/daojiAnime/DaojiBlog --skill hexo-butterfly

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides installation, configuration, and usage guidance for the Hexo Butterfly theme, including advanced features such as tag plugins, theme customization, and troubleshooting.

Core Features & Use Cases

  • Theme Installation: Git and NPM-based installation of the Butterfly theme and required renderers.
  • Configuration & Customization: Guidance for applying and preserving _config.butterfly.yml, nav, visuals, code highlighting, comments, and theme options.
  • Tag Plugins & Advanced Features: Notes, Tabs, Mermaid, Gallery, and other tag plugins to enhance content.
  • Reference Materials: Access to comprehensive references in references/ (getting-started, pages, configuration, tag-plugins, faq, advanced).
  • Troubleshooting: Common issues and debugging steps with practical fixes.

Quick Start

Clone the theme repository and apply to Hexo project; update _config.butterfly.yml; install necessary renderers; start the local server.

Frequently Asked Questions about hexo-butterfly

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install the Hexo Butterfly theme for my blog?

Install Hexo Butterfly by cloning the theme repository into your Hexo themes folder using Git, then update your Hexo _config.yml to set theme: butterfly. Install required renderers (hexo-renderer-marked, hexo-renderer-stylus) via npm, and configure _config.butterfly.yml with your preferences before running hexo server.

Can I customize the navigation, layout, and visual styling in Butterfly?

Butterfly customization happens through _config.butterfly.yml and front-matter. You can modify nav menus, code highlighting, comments, visuals, and theme options directly in configuration files without editing theme source code, preserving changes across theme updates.

What tag plugins does Hexo Butterfly support for content enhancement?

Butterfly includes built-in tag plugins for Notes, Tabs, Timeline, Mermaid diagrams, and Gallery. These plugins let you embed structured content blocks, flowcharts, and image galleries directly in Markdown without external tools, enriching post presentation.

Do I need Git and npm to set up Butterfly, and what Node.js version is required?

Yes, Git or npm is required for theme installation. Butterfly requires Hexo 4.x or higher and Node.js. Verify your Hexo and Node versions before installing to ensure compatibility, as older versions may not support all theme features.

How do I set up tags, categories, and link pages in Butterfly?

Create tags, categories, and link pages by generating scaffold files in Hexo (hexo new page), then set the page layout in front-matter (layout: tags, layout: categories, layout: links). Butterfly renders these automatically with theme-styled templates.

What should I do if Butterfly features aren't rendering or displaying correctly?

Check that required renderers are installed, _config.butterfly.yml is properly formatted YAML, and front-matter syntax is correct. Verify Hexo and Node versions meet requirements, clear the cache (hexo clean), and regenerate (hexo generate) before troubleshooting specific plugin or layout issues.