本文适用于没有Hexo基础的童鞋，这里我会介绍我主题配置文件所有的修改

准备工作

首先是下载butterfly主题，在博客根目录下

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

如果出现克隆失败，把上面的https改成git即可，克隆完成之后根目录下的/themes中就会出现butterfly的主题文件夹，然后要把博客根目录下的_config.yml中的theme属性改成butterfly,注意要有一个空格缩进，改完之后：

1
2
3
hexo clean
hexo g
hexo s

在本地打开是否主题，这里很容易出现一大串数字没有界面这种情况需要安装pug以及 stylus 的渲染器，回到博客根目录下输入；

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

安装完成之后再次重复上面的那三个操作，然后出现下面这个图就表示主题配置成功了

这里强烈建议把主题下面的配置文件放到根目录下面，即把/themes/butterfly下的_config.yml文件改名为_config.butterfly.yml.这样主要是为了防止升级以后主题配置文件会被更换，当然如果不升级的话可以忽略,并且当他和博客的主题配置文件都存在时，主题配置文件优先级会更高

修改记录

当我们的主题更换好之后，除了写文章之外我们还会关心网站的样式，因为现在连导航栏都还没有，因此需要先了解hexo博客的一些必要概念：首先是首页菜单栏的添加，找到主题配置文件中最上方的menu属性，#在markdown文件中属于注释，把前面#删除进行修改：

1
2
3
4
5
6
7
8
9
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

其中/xxx/表示该页面的路径，后面的为Font Awesome的小图标，可以自己DIY，分享我修改后的文件为：

1
2
3
4
5
6
7
8
9
10
11
12
menu:
   首页: / || fas fa-home
   文章||fas fa-book:
    时间轴: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
   生活||fas fa-frog:
    音乐: /music/ || fas fa-music
    自言自语: /shuoshuo/ || fas fa-bug
    留言板: /message/ || fas fa-sms
   友链: /link/ || fas fa-link
   关于我: /about/ || fas fa-heart

修改完之后记得要创建对应的界面：根目录下hexo new page xxx,xxx为你这里要添加的页面名称，修改menu最好复制，自己手写容易出错.md文件缩进很重要,

代码样式

依然是主题配置文件

1
highlight_theme: mac

代码复制

依然是主题配置文件

1
highlight_copy: true

代码块默认展开/关闭

依然是主题配置文件

1
highlight_shrink: false

代码换行

依然是主题配置文件

1
code_word_wrap: true

代码高度限制

依然是主题配置文件

1
highlight_height_limit: 200

社交图标

这里我没有选择使用Font Awesome的小图标，如果想要使用它里面的小图标，直接在主题配置文件找到social进行修改即可，但是它里面的小图标数量有限，所以我选择了阿里巴巴矢量库来引用小图标，效果展示：

修改方法为:->引用阿里巴巴矢量库iconfont修改社交图标

顶部图

我的顶部图设置情况，依然是主题配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# The banner image of home page
index_img: /img/background.jpg

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

# The banner image of archive page
archive_img: /img/about.jpg

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:  'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:  'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:  'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:  'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

emm这里就不展示具体的图了 总之修改顶部图可以在这里修改 图片路径可以为本地路径也可以是网络路径或者是这种渐变色的写法

可以看到我的页脚是可以自由飞舞的小鱼，这个设置主要是参考了花猪老哥的博客，但是他有一些小细节没有处理好，所以我又单独写了一份，应该是比较完善的。
指路:->页脚设置游动的小鱼

评论

评论区域的添加耽误了我不少的时间，一开始设置的时候出现了各种问题，后来多方百度搜索最终决定使用valine,效果如图：

修改方法：->添加valine评论

在线聊天

我使用的是daovoice工具，也踩了不少坑，效果如图：

修改方法：->添加在线聊天工具Daovoice

本地搜索

  1. 根目录下输入npm install hexo-generator-search下载需要的插件
  2. 修改主题配置文件：
    1
    2
    local_search:
      enable: true
    这样就可以看到菜单栏多了一个搜索可以进行本地搜索：

鼠标点击效果

直接修改主题配置文件即可

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

效果：

标题前的小图标

修改主题配置文件

1
2
3
4
5
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f717'
  title-prefix-icon-color: "#F47466"

field表示在全站（site）还是文章页（post）生效
title-prefix-icon为你想要修改的图标样式，可以在Font Awesome中找到喜欢的小图标,例如进行修改即可
title-prefix-icon-color为小图标的样式
效果：

网站副标题

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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: 1
  # 如果有英文逗號' , ',請使用轉義字元 ,
  # 如果有英文雙引號' " ',請使用轉義字元 "
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
   - 脑子是个好东西，希望你也有一个，但如果你胸大没有也行。
   - 早睡早起身体好，不是一句口号，而是三个愿望
   - 如果连我的情绪，都要我亲口告诉你，那和考试抄答案有什么区别？
   - 我尝试着做一个有趣的人，后来却跑偏了，成了一个逗逼。
   - 感情和头发一样，时间长了，都会分叉。

会先显示source里的内容，然后再展示sub中自己编辑的内容

效果：

snackbar弹窗

修改主题配置文件

1
2
3
4
5
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景

其实只是在边上显示了 开不开都无所谓

Pjax

据说是可以复加载相同的资源（css/js）， 从而提升网页的加载速度。我修改的页面为：

1
2
3
4
pjax:
  enable: true
  exclude:
    - /shuoshuo/

网站图标

主题配置文件的修改：

1
2
# Favicon（網站圖標）
favicon: https://cdn.jsdelivr.net/gh/code-anan/image/蜘蛛网万圣节.png

友链魔改

这里我参考的花猪的文章:->传送门

添加说说

这里我参考了小嘉的部落格->传送门

留言板

同样参考了小嘉的部落格->传送门

写在最后

该文章只是展示了我的博客修改了哪些内容，当然还有一些很琐碎的东西像头像修改啦之类的没有详细说明，如果你想都详细的改的话可以参考官方文档,我的很多也都是参考他的文档，最后有任何问题欢迎在评论区告诉我(^▽^)