Hexo + Butterfly 搭建个人博客
1. 环境准备
在正式建站之前，你需要准备以下工具或账号，具体的安装步骤网上有很多，这里不再赘述，你可以参考这篇文章Hexo博客搭建基础教程(一)。
GitNodeGithub账号HexoVS Code个人域名
VS Code 工具是非必须的，但它能更好的帮助你进行项目管理，它可以很方便的书写 MARKDOWN 文档，提供Git的可视化工具，你也可以使用 Typroa 工具来编辑 MARKDOWN 文档，但此工具目前是收费的，对白嫖玩家来说就又增加了项找破解版的步骤，故不太推荐。 关于 VS Code 和 Git 工具的使用可参考这篇文章VScode 结合git的全面使用流程
2. Hexo初始化
在电脑任意路径下新建一个空的文件夹，建议以项目名命名，使用 VS Code 打开该文件夹，在 VS Code 中打开 Git Bash 终端，输入以下命令:1
2hexo init
npm install
3. Butterfly主题安装
在该项目文件夹下，打开 Git Bash 终端，输入:1
npm i hexo-theme-butterfly
更新:1
npm update hexo-theme-butterfly
3.1. 应用主题
为防止后续更新主题，导致自定义配置失效，将主题文件夹themes/下的_config.yml复制到项目文件夹目录下，并重命名为_config.butterfly.yml，后续主题配置的修改将在该文件上进行，主题文件夹下的_config.yml应保留，后续改动出错后，可参照进行回滚。
修改项目文件夹下的_config.yml站点配置文件，进行如下修改:1
theme: butterfly
3.2. 安装主题渲染器
如果没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包:1
npm install hexo-renderer-pug hexo-renderer-stylus --save
3.3 修改主题CDN
主题所使用的一些js脚本的资源站，可能国内访问较慢，导致网站渲染的结果与实际不符，遇到渲染与教程中不同时，需要查看网页源码，看是不是渲染的脚本请求超时导致的，以下为从Fomalhaut的开源项目中拷贝来的配置，请务必修改修改 _config.butterfly.yml 中的参数如下:
1 | # CDN |
4. 创建文章或页面
4.1 模板
在项目文件夹下有一个名为 scaffolds 的文件夹，该文件夹用于存放创建新页面或文章的模板 MARKDOWN 文件，在使用 hexo new [page] tags 指令创建新页面或文章时，使其 Front-matter 部分参照模板的样式进行创建。
e.g. 创建标签页
scaffolds/page.md 文件内容如下:1
2
3
4
5---
title: {{title}}
date: {{date}}
type:
---
新建tags页面，输入:1
hexo new page tags
则会在项目文件夹下的 source/ 文件夹下生成一个带有 index.md 文件的 tags/ 文件夹
其内容为:1
2
3
4
5---
title: tags
date: 2023-06-26 20:00:00
type:
---
- 若要使用该页面作为标签页，则在type 项中填入 “tags”
- 若要使用该页面作为分类页，则在type 项中填入 “categories”
- 若要使用该页面作为友情链接页，则在type 项中填入 “link”
- 其余类型页面可不用填写
4.2. Front-matter
Front-matter 是 MARKDOWN 文件最上方以 —- 分隔的区域，用于指定页面或文章的页面配置。
4.2.1. Page Front-matter
1 |
|
4.2.2. Post Front-matter
1 |
|
5. 主题配置
5.1. 网站资料配置
网站资料的配置在项目文件夹下的站点配置文件 _config.yml 中，其主要参数如下:
1 | title: # 网站标题 |
5.2. 导航栏配置
导航栏的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18# 左上角图标
nav:
logo: # 网站logo，支持图片，直接填入图片链接
display_title: # 是否显示网站标题
fixed: # 是否固定导航栏
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: || hide:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart
# 多级按钮参数格式: 多级按钮名称(可自定义) || 图标(可自定义) || hide:(无此项则不隐藏子按钮)
# 跳转按钮参数格式: 导航按钮名称(可自定义): 导航跳转页面对应的路径 || 图标(可自定义)
| 跳转路径必須是 /xxx/， 图标名可不写，不写则不显示图标 |
5.3. 文章封面配置
文章封面的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6
7
8cover:
index_enable: # 主页是否显示文章封面图
aside_enable: # 侧栏是否显示文章封面图
archives_enable: # 归档页面是否显示文章封面图
position: # 封面顯示的位置，三個值可配置 left , right , both(一左一右)
default_cover: # 默认封面，若文章页在Front-matter中配置了cover，则使用文章页中的配置项
- /xxxxx # 配置多项，则随机为其中一项
- /xxxxxxxxxxxxxx
5.4. 文章meta配置
文章meta的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17post_meta: # 页面meta显示
page: # Home Page
date_type: # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: # date/relative 顯示日期還是相對日期
categories: # true or false 主頁是否顯示分類
tags: # true or false 主頁是否顯示標籤
label: # true or false 顯示描述性文字
post:
date_type: # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: # date/relative 顯示日期還是相對日期
categories: # true or false 文章頁是否顯示分類
tags: # true or false 文章頁是否顯示標籤
label: # true or false 顯示描述性文字
index_post_content: # 主页显示文章节选
method: # 1:显示描述；2:自动；3:截取一部分正文 false:不显示描述
length: # 截取文章前多少个字
5.5. 顶部图片配置
顶部图片的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6
7
8
9
10
11
12# 页面顶图配置
# category_per_img和tag_per_img，可配置多张，每次会随机取一张
# format:
# - category name: xxxxx
disable_top_img: # 全站不显示顶部图片
index_img: # 首页的顶部图片
default_top_img: # 默认的顶部图片
archive_img: # 归档页顶部图片
tag_img: # 标签页顶部图片
tag_per_img: # 每个标签页的顶部图片，可配置多张
category_img: # 分类页顶部图片
category_per_img: # 每个分类页的顶部图片，可配置多张
5.6. 文章内容配置
文章内容的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下: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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59noticeOutdate: # 文章过期提醒，可设置是否显示文章过期提醒，以更新时间为基准。会在文章最上面提示一个弹出框说明过期信息
enable: # 是否启用该功能
style: # style: simple/flat
limit_day: # 距离更新时间多少天才显示文章过期提醒
position: # position: top/bottom
message_prev: # 天数之前的文字
message_next: # 天数之后的文字
post_edit: # 文章是否可以编辑，在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接
enable: # 是否启用该功能
url: # 编辑该文章的链接
toc: # 文章目录配置
post: # 文章页是否显示目录
page: # 普通页面是否显示目录
number: # 是否显示章节数
expand: # 是否展开 TOC
style_simple: # 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
scroll_percent: # 是否显示滚动进度百分比
copy: # 复制配置，开启后复制内容后会加入版权信息
enable: # 是否启用该功能
copyright:
enable: # 是否添加版权信息
limit_count: # 复制行数多于此行数配置时会默认添加版本信息
post_copyright: # 版权配置
enable: # 是否启用该功能
decode: # true来显示中文网址
author_href: # 作者链接地址
license: # 版权声明
license_url: # 版权声明链接
# 可在每个文章页的 Front-matter 中进行单独配置
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
reward: # 文章底部的打赏功能
enable: # 是否启用该功能
QR_code: # 可配置多个打赏二维码图片
- /xxxx
post_pagination: # 推送文章分页，1表示左侧推送上一篇，2表示左侧推送上一篇
sharejs: # 文章分享设置
enable: true
sites: # 参数为:facebook,twitter,wechat,weibo,qq
addtoany: # 文章分享设置，和上述分享设置二选一
enable: false
item: # 参数为:facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
related_post: # 推荐文章设置
enable:
limit: # 显示推荐文章数目
date_type: # created or updated 文章日期显示创建日或者更新日
photofigcaption: # 是否显示图片的描述，优先显示图片的title属性，然后是alt属性
5.7. 代码样式配置
文章内容的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6highlight_theme: # 代码高亮：darker、light、ocean、mac、pale night、mac light
highlight_copy: # 代码支持复制
highlight_shrink: # 代码框是否默认展开，true表示不展开，需点击 '>' 打开，可选值还有none，不显示 '>'
highlight_lang: # 是否显示语言
code_word_wrap: # 代码自动换行，不会出现滚动条
highlight_height_limit: # unit: px，代码高度配置，超出部分会隐藏
5.8. 社交图标配置
社交图标的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4social:
# formal:
# icon: link || the description || color
# [icon]为图标的样式 [link]为图标点击后跳转的链接 [description]为该图标的描述 [color] 为该图标的颜色
5.9. 页脚配置
页脚的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下:1
2
3
4
5
6footer:
owner:
enable:
since: # 网站的建站时间
custom_text: # 自定义文本，支持HTML
copyright: # 显示博客的框架和主题
5.10. 侧边栏配置
侧边栏的配置在项目文件夹下的主题配置文件 _config.butterfly.yml 中，其主要参数如下: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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50aside:
enable: # 启用侧边栏
hide: # 是否隐藏
button: # 是否显示右下角的按钮
mobile: # 是否在手机上显示
position: # 侧边栏的位置，left or right
display:
archive: # 是否展示文章信息
tag: # 是否展示标签信息
category: # 是否展示分类信息
card_author:
enable: # 是否显示作者栏卡片
description:
button:
enable: # 是否显示作者链接按钮
icon: # 图标
text: # 文字
link: # 链接
card_announcement:
enable: # 是否显示公告栏
content: # 支持HTML
card_recent_post:
enable: # 是否显示最新文章卡片
limit: # 显示数量，如果为0，则显示全部
sort: # 根据创建时间或更新时间排序
sort_order:
card_categories:
enable: # 是否显示分类卡片
limit:
expand:
sort_order:
card_tags:
enable: # 是否显示标签卡片
limit:
color: # 是否使用色彩区分
orderby:
order:
sort_order:
card_archives:
enable: # 是否显示归档卡片
type:
format:
order:
limit:
sort_order:
card_webinfo:
enable: # 是否显示网站信息
post_count: # 文是否显示章数量
last_push_date: # 是否显示最后提交时间
sort_order:
6. 主题优化
6.1 背景一图流配置
主题背景一图流配置需要将页头和页脚加上透明遮罩，使得配置的背景图铺满整个网页
在项目文件夹下的 source/ 文件夹下，新建一个CSS文件夹，并新建一个CSS文件 background, 其内容如下:
1 | /* 页脚与头图透明 */ |
在主题中引用该CSS文件, 同时需要关闭主页顶部图片和页脚图片，修改主题配置文件 _config.butterfly.yml1
2
3
4
5
6
7
8disable_top_img: false # 设置为false
index_img: # 留空
background: # 设置为自己想要的背景图 e.g. url(/assets/pixiv/736461.png)
footer_bg: false # 设置为false
inject:
head:
- <link rel="stylesheet" href="/css/background.css">
6.2. 搜索功能
使用本地搜索，详情: https://github.com/next-theme/hexo-generator-searchdb
安装 hexo-generator-searchdb1
npm install hexo-generator-searchdb
修改配置文件 _config.yml1
2
3
4
5search:
path: search.xml
field: post
content: true
format: html
修改主题配置文件 _config.butterfly.yml1
2
3
4
5
6local_search:
enable: true
preload: false
top_n_per_article: 1
unescape: false
CDN:
6.3. 字数统计
安装 hexo-wordcount1
npm install hexo-wordcount --save
修改主题配置文件 _config.butterfly.yml1
2
3
4
5wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
6.4. 外挂标签
安装 npm install hexo-butterfly-tag-plugins-plus1
npm install hexo-butterfly-tag-plugins-plus --save
hexo 自带的 markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，替换成 hexo-renderer-kramed1
2npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
修改主题配置文件 _config.butterfly.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 # 过滤器优先权
issues: false # issues标签依赖注入开关
link:
placeholder: # link_card标签默认的图标图片
CDN:
anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: https://at.alicdn.com/t/c/font_4135249_g47qq00zjf.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
6.5. 每页单独配置背景
在需要配置的文章页或其他页的Markdown文件中加入一下配置样式1
2
3
4
5
6
7
8
9
10
11{% raw %}
<style>
#web_bg{
background: url(/img/newbg.png)!important;
/*重新定义background会导致原有定位属性失效，所以也需要再声明一次加权的定位属性*/
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
</style>
{% endraw %}
微信
支付宝
