安装butterfly主题

首先，在hexo的根目录下使用如下命令下载主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

npm安装pug 和 stylus 渲染器。不然会报错

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

修改项目根目录下的_config.yml文件（称为站点配置文件），开启主题。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

【建议】

为了减少升级/修改主题带来的不便，可以将主题目录下（/blog/theme）的配置文件 _config.yml 重命名为 _config.butterfly.yml，复制到 Hexo 根目录下与_config.yml同级。

Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中，比如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中，那么在将来你想换一个主题是很方便的。

导航栏菜单

修改主题配置文件 _config.butterfly.yml

menu:
  主页: / || fas fa-home
  博文 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    归档: /archives/ || fa fa-folder-open
  生活 || fas fa-list:
    分享: /shuoshuo/ || fa fa-comments-o
    相册: /photos/ || fa fa-camera-retro
    音乐: /music/ || fa fa-music
    影视: /movies/ || fas fa-video
  友链: /links/ || fa fa-link
  留言板: /comment/ || fa fa-paper-plane
  #留言板: /messageboard/ || fa fa-paper-plane
  关于笔者: /about/ || fas fa-heart

代码块显示

在_config.butterfly.yml配置文件中可以配置如下功能。

highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: false #代码自动换行，关闭滚动条

同时将站点默认配置文件_config.yml的highlight设置为false。

highlight:
  enable: false
  line_number: false
  auto_detect: false

本地搜索功能

如果要使用本地搜索功能，需要安装 hexo-generator-search 插件

npm install hexo-generator-search --save

修改_config.butterfly.yml 配置文件：

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

修改副标题

修改主题配置文件 _config.butterfly.yml:

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - 从来没有真正的绝境，只有心灵的迷途
    - Never really desperate，only the lost of the soul
    - 没有选择会是唯一的路
    - No choice will be the only way

图片设置

图片可以用云链接或者本地路径：/themes/butterfly/source/img。修改主题配置文件_config.butterfly.yml：

网站图标

# Favicon（网站图）
favicon: /img/favicon.png

头像

avatar:
  img: /img/avatar.jpg #图片路径
  effect: false #头像会一直转圈

主页封面图片

# The banner image of home page
index_img: /img/background.jpg

文章详情页顶部图片

当没有在front-matter设置top_img和cover的情况下会显示该图

# If the banner of page not setting, it will show the top_img
default_top_img: /img/default_top_img.jpg

归档页底部图片

#归档子标签页图片
# The banner image of archive page
archive_img: /img/archive.jpg

tag页顶部图片

#tag页（标签页）
tag_img: /img/tag_img.jpg

category页顶部图片

#category页
category_img: /img/category_img.jpg

统一文章封面

cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
    # 当配置多张图片时，会随机选择一张作为 cover. 此时写法为
    - https:
    - http:
    - http:
    - http:
    - http:
    - http:

如果需要为每一篇文章设置不同的封面，可以在文章的md文件中添加配置。

---
title: Hello World        # 标题
tags: [hello]             # 标签
categories:               # 分类
description: hello word~  # 描述
top_img: /img/hello-1.png # 顶部背景图
cover: /img/hello-1.png   # 文章封面
---

错误页面

配置了该属性后会替换无法展示的图片

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

图片懒加载

新增hexo-lazyload-image模块

npm install hexo-lazyload-image --save

在主目录配置文件_config.yml增加配置

lazyload:
  enable: true
  loadingImg: /img/loading.gif

这个就是图片没加载出来的时候，出现一个动图转转转的文章页样式

图片放大查看

修改主题配置文件_config.butterfly.yml

medium_zoom: false
fancybox: true

版权样式

修改主题配置文件_config.butterfly.yml

复制的内容后面加上版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: false  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

文章版权信息

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

侧边栏样式

修改主题配置文件_config.butterfly.yml

调整侧边栏出现位置

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right

个人信息

social:
   fab fa-github: https://github.com/ || Github
   fa fa-book-open: https://blog.csdn.net/mjh1667002013 || CSDN
   fab fa-qq:  tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQ
   fas fa-envelope-open-text: mailto:1976083684@qq.com || Email

公告栏设置

修改主题配置文件_config.butterfly.yml

card_announcement:
    enable: true
    content: This is my Blog #修改公告栏信息

TOC目录

修改主题配置文件_config.butterfly.yml

# toc (目錄)
toc:
  post: true
  page: false
  number: false
  expand: true # 是否展开
  style_simple: false # for post
  scroll_percent: true

背景美化

修改主题配置文件 _config.butterfly.yml

鼠标点击效果

有冒光特效、烟火特效、爱心特效、文字特效，选择其中一个将enable设置为true就可以。

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false

# Mouse click effects: fireworks (鼠标点击效果:萤火特效)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠标点击效果: 文字)
ClickShowText:
  enable: false
  text:
     - 富强
     - 民主
     - 文明
     - 和谐
     - 平等
     - 公正
     - 法治
     - 爱国
     - 敬业
     - 诚信
     - 友善
  fontSize: 15px
  random: true
  mobile: true

打字效果

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: true

背景特效

# Background effects (背景特效)
# canvas_ribbon (静止彩带)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false
# Fluttering Ribbon (动态彩带)
canvas_fluttering_ribbon:
  enable: false
  mobile: false
#星空特效
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

自定义背景主题色

可以修改部分的UI颜色，没测试过

# theme_color:
#   enable: true
#   main: "#49B1F5"
#   paginator: "#00c4b6"
#   button_hover: "#FF7242"
#   text_selection: "#00c4b6"
#   link_color: "#99a9bf"
#   meta_color: "#858585"
#   hr_color: "#A4D8FA"
#   code_foreground: "#F47466"
#   code_background: "rgba(27, 31, 35, .05)"
#   toc_color: "#00c4b6"
#   blockquote_padding_color: "#49b1f5"
#   blockquote_background_color: "#49b1f5"

渐变背景

默认显示白色，可设置图片或者颜色
修改主题配置文件_config.butterfly.yml：

background:

设置渐变色步骤：

在\Butterfly\source\css\目录下创建css文件 background.css：

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

修改配置文件_config.butterfly.yml的引入方式

# Inject
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
     - <link rel="stylesheet" href="/css/background.css">
  bottom:
    # - <script src="xxxx"></script>

如果背景色不生效，设置_config.butterfly.yml

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

footer 的背景，当设置 false 时，将与主题色一致。修改主题配置文件_config.butterfly.yml

# footer是否显示图片背景(与top_img一致)
footer_bg: true

字数统计

安装统计组件

npm install hexo-wordcount --save or yarn add hexo-wordcount

修改主题配置文件_config.butterfly.yml

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

添加音乐播放器

插件安装与配置

安装 hexo-tag-aplayer 这款插件。执行如下指令：

npm install --save hexo-tag-aplayer

插件配置方式为修改Hexo 的配置文件中进行如下修改。就是你的Hexo根目录下的_config.yml文件。

这块直接搜，没有在Hexo目录下的_config.yml文件中找到，将如下内容添加：

aplayer:
  meting: true
  asset_inject: false

主题配置文件_config.butterfly.yml中开启aplayerInject：

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

下面介绍两种常见的用法：

普通页面播放器

在博客音乐播放页面（/source/music/index.md）中添加如下：

{% meting "8872308188" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

常用的选项如下所示:

server可选：netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。建议网易云

type可选：song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。添加单曲选的歌曲，歌单选择playlist，可以自行尝试。

id获取示例: 打开网易云音乐，选择喜欢的歌单，在网页版打开，获取歌单list，填入即可。使用的时候将上边的ID号换为自己喜欢的歌单即可。注意歌单中不能包括VIP音乐，否则无法解析。建议单独建立一个歌单，以后有喜欢的音乐添加进去，网页也会自动同步添加。

lrcType设置为 -1默认显示歌词，放在fixed模式下比较合适。

全局吸底Aplayer模式

把 aplayer代码插入到主题配置文件_config.butterfly.yml的 inject.bottom 即可。

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7422861869" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div>

需要修改的参数就只有data-id、data-server、data-type、data-autoplay=”true”、data-lrcType=”-1”一些常用的参数，可以自行根据需要修改。

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的 pjax 设为 true即可。

pjax:
 enable: ture
 exclude:

创建主题图库

执行如下命令，创建photos页面

hexo n page photos     #创建你的页面

在index.md文件的 Front-matter 中添加如下内容（不现实侧边栏和评论区）

添加图库集合页

图库集合页面就是普通的页面，比如上面创建的/photos/index.md页面，下面将其设置成一个图库集合页面！设置图库集合页面是使用外挂标签来实现的，书写格式如下：

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

这里面每个galleryGroup中设置的内容如下：

name：图库名字
description：图库描述
link：链接到对应相册地址
img-url：图库封面地址

如下所示：

<div class="gallery-group-main">
{% galleryGroup '壁紙' '收藏的一些壁纸，侵删' '/album/wallpaper' https://www.czblogs.cn/album/wallpaper.jpeg %}
{% galleryGroup '风景' '相册是我快乐过的证据' '/album/life' https://www.czblogs.cn/album/life.jpeg %}
</div>

这样设置后，页面就变成了这样

图库子页面

此时，点击任何一个图集，都会重定向到 404 页！这是因为我们还没有创建相应的子页面！这里我以《生活》这个相册为例来创建它的子页面！

第一步：打开终端，切换到本地 Hexo 博客的根目录下，执行如下命令

hexo new page life

然后会在博客根目录下的/source目录下生成名为life的文件夹，并在其中生成一个名为index.md的文件，这个文件就对应着《生活》这个子页面！

但是此时图库子页面/source/life/index.md跟相册首页/source/photos/index.md是平级的：

第二步：将life整个文件夹都移动到album文件夹中：

第三步：此时打开/source/photos/life/index.md文件，修改如下：

第四步：然后在子页面（也就是/source/photos/life/index.md）中使用标签外挂挂上自己的照片，写法如下：

{% gallery %}
![]()
{% endgallery %}

比如我下面这样，填写很多个自己的图片（图片路径需要自己填充）：

{% gallery %}
![](https://w.wallhaven.cc/full/72/wallhaven-72yzje.jpg)
![](https://w.wallhaven.cc/full/l8/wallhaven-l8v3ey.png)
![](https://w.wallhaven.cc/full/1p/wallhaven-1poo61.jpg)
![](https://w.wallhaven.cc/full/kx/wallhaven-kxj3l1.jpg)
![](https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png)
{% endgallery %}

留言板

具体实现可参考：https://fe32.top/articles/hexo1611/

自定义博客主题相关设置

安装butterfly主题

导航栏菜单

代码块显示

本地搜索功能

修改副标题

图片设置

网站图标

头像

主页封面图片

文章详情页顶部图片

归档页底部图片

tag页顶部图片

category页顶部图片

统一文章封面

错误页面

图片懒加载

图片放大查看

版权样式

侧边栏样式

公告栏设置

TOC目录

背景美化

鼠标点击效果

打字效果

背景特效

自定义背景主题色

渐变背景

footer背景

字数统计

添加音乐播放器

插件安装与配置

普通页面播放器

全局吸底Aplayer模式

创建主题图库

留言板