butterfly主题的官方文档地址为：

Butterfly 安裝文檔(一) 快速開始 | Butterfly

一、前置条件

没有 pug 以及 stylus 的渲染器，使用npm命令下载安装

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

二、下载主题

butterfly的主题下载地址为：

https://github.com/jerryc127/hexo-theme-butterfly.git

下载后放到hexo根目录下的themes目录下，修改hexo的主题即可

三、主题配置修改

主题的详细配置，具体看官方文档，这里只说常用的修改

butterfly主题配置修改是修改下载下来的butterfly文件夹下的_config.yml文件

3.1、导航栏

修改导航栏左侧

默认导航栏只有一个Hexo，如下：

image-20231228153652232

在_config.yml文件中，找到nav属性，可以做如下修改

1
2
3
4
nav:
  logo: # image 导航栏左侧展示的logo图片
  display_title: true	# 是否显示网址标题
  fixed: true # fixed navigation bar 是否固定状态栏

要注意，如果是要修改标题、副标题等，需要在hexo根目录的_config.yml文件里修改，而不是在butterfly的_config.yml里修改

直接修改，hexo根目录的_config.yml文件，如下：

1
2
3
4
5
6
7
title: Hawaii
subtitle: 'Hawaii’s blog'
description: 'Hawaii’s blog'
keywords: ''
author: 华宜威
language: zh-cn
timezone: ''

image-20231228160309607

导航栏右侧增加菜单

在butterfly的_config.yml里找到menu属性，进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  # Home: / || fas fa-home
  首页: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  分类: /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

image-20231228161556617

在butterfly的_config.yml里找到favicon属性，进行修改：

1
favicon: /imgs/logo.jpg

image-20231228164556175

注：我的图片都在hexo根目录下/source/imgs里

3.3 修改头像

在butterfly的_config.yml里找到avatar属性，进行修改：

1
2
3
4
# Avatar (頭像)
avatar:
  img: /imgs/avatar.jpg
  effect: false  # 设置为true头像会一直转圈

image-20231228170248631

3.4 修改背景图片

在butterfly的_config.yml里找到index_img属性，进行修改：

1
index_img: /imgs/avatar.jpg

image-20231228170523150

3.5 侧边栏

找到aside属性，可以隐藏公告、关注我等信息

3.6 文章封面

找到cover属性，可以添加多个文章的封面的图片

image-20231229103924806

image-20231229103947048

3.7 文章底部分享

找到sharejs属性，进行修改，如下：

1
2
3
sharejs:
  enable: false
  sites: facebook,twitter,wechat,weibo,qq

3.8 副标题

找到subtitle属性，进行修改，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
  - 路漫漫其修远兮，吾将上下而求索
  - 万花凋落尽，一梅独傲霜

效果如下：
image-20231229120045746