butterfly主题是我用的最多的一个主题
一，安装butterfly主题
1.在博客的根目录下执行以下命令
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
2.下载 pug 以及 stylus 的渲染器，否则在项目运行时会报错：
npm install hexo-renderer-pug hexo-renderer-stylus --save
3.修改项目根目录下的_config.yml文件（称为站点配置文件），开启主题
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ #theme: landscape theme: butterfly
二，基础配置
主目录下 _config.yml.这里主目录指的是自己的博客目录
# Site title: Java学习笔记本 # 博客名 subtitle: '' description: '好好学习天天向上' # 签名 keywords: author: libinbin language: zh-CN timezone: 'Asia/Shanghai'
博主踩过的坑：如果出现乱码，记得看一看自己编辑器使用的是不是utf-8.
在进行配置时可以配置完某一个，立马在本地检查一下效果。再进行下一个配置，这样可以及时发现错误。
三，导航栏配置
1.打开主题下的_config.yml文件进行配置，我的目录：D:\bolg\themes\butterfly，命令执行在博客目录下就行
menu: 首页: / || fa fa-home 归档: /archives/ || fa fa-archive 标签: /tags/ || fa fa-tags 分类: /categories/ || fa fa-folder-open 留言板: /messageboard/ || fa fa-paper-plane 友链: /link/ || fa fa-link 日志: /timeline/ || fa fa-bell 菜单 || fa fa-list: - about || /about/ || fa fa-sitemap - myself || /myself/ || fa fa-id-card - butterfly || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart
接下来对导航栏进行详细配置
归档
这个页面自带无需进行配置
标签
1、执行命令新建标签页面hexo new page tags 执行后会在博客的source目录下生成对应的文件夹
2、修改：source/tags/index.md
--- title: 标签 date: 2022-07-30 08:45:06 type: tags ---
3、以后上传文章的md文件中，可以在标题头中加入tags，包含 标签 文章的例子：
--- title: 学习 java 这一篇就够了 tag: - 后端 ---
分类
与上面类似：
hexo new page categories
title: 分类 date: 2022-07-30 08:54:29 type: categories
以后上传文章：
--- title: 学习 Java 这一篇就够了 tag: - 后端 categories: - 后端框架 ---
留言板
hexo new page messageboard
--- title: 留言板 date: 2022-07-30 08:58:20 type: messageboard ---
友链
hexo new page link
title: 友链 date: 2022-07-30 09:00:05 type: link
在Hexo目录中的source目录下新建文件夹_data，创建一个文件link.yml，内容如下
class: class_name: 友情链接 link_list: 1: name: 姓名 link: 链接 avatar: 图片 descr: 签名 2: name: 姓名 link: 链接 avatar: 图片 descr: 签名
日志
hexo new page timeline
title: 日志 date: 2022-07-30 09:02:25 type: timeline
关于
title: This is me date: 2022-07-30 09:04:02 type: myself
四，副标题配置
修改 bufferfly下的 _config.yml
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 # 如果有英文逗号' , ',请使用转义字元 , # 如果有英文双引号' " ',请使用转义字元 " # 开头不允許转义字元，如需要，请把整個句子用双引号包住 # 如果关闭打字效果，subtitle只会现示sub的第一行文字 sub: - 你在抱怨什么呢 - 为明天到来的事，说人生像是没有意义 - 没有选择会是唯一的路 - 这不是你自己的问题，人终归要好好去生活
副标题字体大小颜色
在\themes\butterfly\source\css_layout中的head.styl:中修改，这里就不作演示了。
五，图片设置
图片可以用云图片链接或者放在本地文件夹位置：/themes/butterfly/source/img.以下代码在主题的配置文件中修改
1、网站图标
# Favicon（网站图标） favicon: /img/favicon.png • 1 • 2
2、头像
avatar: img: /img/avatar.jpg #图片路径 effect: false #头像会一直转圈
3、主页封面图片
# The banner image of home page index_img: /img/background.jpg
4、文章详情页的顶部图片
当没有在front-matter设置top_img和cover的情况下会显示该图
修改主题配置文件_config.butterfly.yml：
# If the banner of page not setting, it will show the top_img default_top_img: /img/default_top_img.jpg #我设置的本地图片
5、归档页顶部图片
#归档子标签页图片 # The banner image of archive page archive_img: /img/archive.jpg
6、tag页顶部图
#tag页（标签页） # If the banner of tag page not setting, it will show the top_img # note: tag page, not tags page (子標籤頁面的 top_img) tag_img: /img/tag_img.jpg
7、文章封面
每篇文章都可以设置一张封面，可以为每篇文章设置默认封面
也可以修改每个md文件的front-matter的cover属性，会覆盖上面的默认封面。修改主题配置文件_config.butterfly.yml：
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:
8、错误页面
配置了该属性后会替换无法展示的图片
# Replace Broken Images (替換無法顯示的圖片) error_img: flink: /img/friend_404.gif post_page: /img/404.jpg
9、category页顶部图
#category页 # If the banner of category page not setting, it will show the top_img # note: category page, not categories page (子分類頁面的 top_img) category_img: /img/category_img.jpg
六，图片懒加载
1.新增hexo-lazyload-image模块
npm install hexo-lazyload-image --save • 1
2.在主目录配置文件_config.yml增加配置
lazyload: enable: true loadingImg: /img/loading.gif
这个就是图片没加载出来的时候，出现一个动图转转转的文章页样式
七，图片大图查看
修改主题配置文件_config.butterfly.yml
# Lightbox (圖片大圖查看模式) # -------------------------------------- # You can only choose one, or neither (只能選擇一個 或者 兩個都不選) # medium-zoom # https://github.com/francoischalifour/medium-zoom medium_zoom: false # fancybox # http://fancyapps.com/fancybox/3/ fancybox: true
