Butterfly 主题

前置教程：hexo搭建个人博客

安装 Butterfly

Butterfly

通过 git 安装 Butterfly - 推荐

下载主题到博客主题页面，在 博客根目录 执行下述命令

1
2
cd themes
git clone "https://github.com/jerryc127/hexo-theme-butterfly.git"

安装后，主题配置文件路径: /themes/hexo-theme-butterfly/_config.yml

通过 npm 安装 Butterfly

1
npm i hexo-theme-butterfly

安装后，主题配置文件路径：/node_modules/hexo-theme-butterfly/_config.yml

修改博客配置文件

修改博客配置文件，使主题生效

  • 博客配置文件为 博客根目录 中的 _config.yml
  • 默认主题为 landscape，修改为 butterfly
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

安装主题所需渲染器

主题需要安装下面渲染器才可以使用：

1
npm install hexo-renderer-pug hexo-renderer-stylus

安装后效果

安装后，显示如下界面即为安装成功：

主题基本配置

更为详细的主题设置见：博客美化篇（挖坑）

顶部菜单

修改 主题配置文件 /hexo-theme-butterfly/_config.yml

  • 三部分构成：[text]: [path] || [icon]
1
2
3
4
5
6
7
8
9
10
menu:
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

背景图

1
2
# The banner image of home page
index_img:

鼠标点击特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 烟火特效
fireworks:
  enable: false     # 开启/关闭
  zIndex: 9999      # -1 or 9999
  mobile: false     # 移动端是否开启

# 爱心特效
click_heart:        
  enable: false     # 开启/关闭
  mobile: false     # 移动端是否开启

# 文字特效：鼠标点击依次显示下方 text 中的文本
ClickShowText:
  enable: false     # 开启/关闭
  text:             # 设置文本: 一行一个，以 - 开头
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px    # 字体大小
  random: false     # 随机展示文字
  mobile: false     # 移动端是否开启