前言

本博客搭建参考于大佬hexo-theme-Fomalhaut:的开源项目,此文档主要用来自己熟悉hexo搭建和一些基本用法。

目录

  1. hexo 博客搭建
  2. hexo 博客配置
  3. hexo+butterfly 博客主题 ⇦您当前在此位置🪂
  4. hexo+butterfly 主题魔改
  5. hexo 基础语法和外挂标签
  6. hexo 生成文章统计图
  7. hexo 添加百度统计
  8. hexo 使用git将Hexo博客部署到服务器

安装主题

  • 使用npm或者GitHub安装 hexo-theme-butterfly
1
npm i hexo-theme-butterfly
1
git clone -b 4.5.0 https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

应用主题

  1. 修改站点配置文件_config.yml,把主题改为butterfly
1
theme: butterfly


2. 如果你没有pug以及stylus的渲染器,请下载安装

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

为了减少升级主题后带来的不便,请使用以下方法(建议,可以不做,高度魔改的一般都不会升级主题了,不然魔改的会被覆盖掉)
把主题文件夹中的 _config.yml 复制到 Hexo 根目录里,同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置即可生效。
Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度较高。

3. 输入命令并访问Hexo

1
hexo cl; hexo s
  1. 切换主题成功

主题基础配置

404页面(butterfly主题)

  1. _config.butterfly.yml 文件中,放开404配置
1
2
3
4
5
# A simple 404 page  
error_404:
enable: true
subtitle: "页面沒有找到"
background:


2. 执行命令查看效果

修改网站资料

  • 修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改站点配置文件_config.yml
参数 描述
title 网站标题
subtitle 描述
description 网站描述
keywords 网站的关键词。支持多个关键词
author 您的名字
language 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai

导航菜单

  1. 修改主题配置文件_config.butterfly.yml
  • 必须是 /xxx/,后面||分开,然后写图标名,如果不想显示图标,图标名可不写
  • 若主题版本大于 v4.0.0,可以直接在子目录里添加 hide 隐藏子目录,如下面的List
1
2
3
4
5
6
7
8
9
10
11
menu:  
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fa fa-heartbeat:
音乐: /music/ || fas fa-music
照片: /Gallery/ || fas fa-images
电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

代码配置

1
2
3
4
5
6
highlight_theme: mac # 代码高亮主题 -  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # 代码复制 copy button
highlight_lang: true # show the code language
highlight_shrink: false # 代码框展开/关闭 true 全部代码框不展开,需点击>打开 / false 代码框展开,有>点击按钮 | none 不显示>按钮
highlight_height_limit: 230 # 代码高度限制 单位是px,直接添加数字,如 200
code_word_wrap: false # 代码换行

社交图标

1
2
3
social:  
fab fa-github: https://github.com/xxxxx || Github
fas fa-envelope: mailto:xxxxxx@gmail.com || Email

顶部图

  • 如果不要显示顶部图,可直接配置 disable_top_img: true
配置 解释
index_img 主页的 top_img
default_top_img 默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag子页面 的 默认 top_img
tag_per_img tag子页面的 top_img,可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img,可配置每个 category 的 top_img
  • 修改主题配置文件_config.butterfly.yml
1
index_img: xxx.png
  • 其它页面 (tags/categories/自建页面)和文章页的top_img,请到对应的 md 页面设置front-matter中的top_img

文章置顶与封面

  1. 你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大,置顶的优先级越大。
  2. 文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。如果不配置cover,可以设置显示默认的cover;如果不想在首页显示cover,可以设置为false
    修改主题配置文件_config.butterfly.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
cover:  
# 是否显示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示
# 当配置多张图片时,会随机选择一张作为cover,此时写法应为:
default_cover:
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

文章meta显示

  • post_meta这个属性用于显示文章的相关信息的,修改主题配置文件_config.butterfly.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:  
page:
date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 主页是否显示分类
tags: true # true or false 主页是否显示标签
label: true # true or false 显示描述性文字
post:
date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 文章页是否显示分类
tags: true # true or false 文章页是否显示标签
label: true # true or false 显示描述性文字

文章版权和协议许可

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

1
2
3
4
5
6
post_copyright:  
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章打赏

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

1
2
3
4
5
6
7
8
9
reward:  
enable: false
QR_code:
- img: /img/wechat.jpg
link:
text: wechat
- img: /img/alipay.jpg
link:
text: alipay

文章目录TOC

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

1
2
3
4
5
6
toc:  
post: true # 文章页是否显示 TOC
page: false # 普通页面是否显示 TOC
number: true # 是否显示章节数
expand: false # 是否展开 TOC
style_simple: false # for post 简洁模式(侧边栏只显示 TOC, 只对文章页有效 )

相关文章推荐

相关文章推荐的原理是根据文章tags的比重来推荐,修改主题配置文件_config.butterfly.yml

1
2
3
4
related_post:  
enable: true
limit: 6 # 显示推荐文章数目
date_type: created # or created or updated 文章日期显示创建日或者更新日

文章锚点

开启文章锚点后,当你在文章页进行滚动时,文章链接会根据标题ID进行替换。
注意: 每替换一次,会留下一个歷史记录。所以如果一篇文章有很多锚点的话,网页的歷史记录会很多。
修改主题配置文件_config.butterfly.yml

1
2
3
# anchor  
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可设置是否显示文章过期提醒,以更新时间为基准。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)  
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
position: top # position: top/bottom
message_prev: It has been # 天数之前的文字
message_next: days since the last update, the content of the article may be outdated. # 天数之后的文字

文章分页按钮

1
2
3
4
5
6
# post_pagination (分页)  
# value: 1 || 2 || false # false:为关闭分页按钮;1:下一篇显示的是旧文章;2:下一篇显示的是新文章
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

文章内容复制相关配置

1
2
3
4
5
6
7
# copy settings  
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
enable: true # 是否开启网站复制权限
copyright: # 复制的内容后面加上版权信息
enable: true # 是否开启复制版权信息添加
limit_count: 50 # 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息

头像

1
2
3
avatar:  
img: /assets/head.jpg
effect: false # true则会一直转圈
1
2
3
4
5
6
footer:  
owner:
enable: true
since: 2022 # 站点起始时间
custom_text: # 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等,支持 HTML。
copyright: false # Copyright of theme and framework

右下角按钮

简繁转换

1
2
3
4
5
6
7
8
9
10
11
12
13
translate:  
enable: false
# 默认按钮显示文字(网站是简体,应设置为'default: 繁')
default: 繁
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese)
# 网站默认语言,1: 繁体中文, 2: 简体中文
defaultEncoding: 2
# Time delay 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
translateDelay: 0
# 当文字是简体时,按钮显示的文字
msgToTraditionalChinese: '繁'
# 当文字是繁体时,按钮显示的文字
msgToSimplifiedChinese: '簡'

夜间模式

1
2
3
4
5
6
7
8
9
10
# dark mode  
darkmode:
enable: false
# dark 和 light 两种模式切换按钮
button: true
# Switch dark/light mode automatically (自動切換 dark mode和 light mode)
# autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
# autoChangeMode: 2 Switch dark mode between 6 pm to 6 am
# autoChangeMode: false
autoChangeMode: false

v2.0.0 开始增加一个选项,可开启自动切换light mode 和 dark mode。

  • autoChangeMode: 1 跟随系统而变化,不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode。
  • autoChangeMode: 2只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode。
  • autoChangeMode: false 取消自动切换。

阅读模式

1
readmode: true

侧边栏设置

排版

可自行决定哪个项目需要显示,可决定位置,也可以设置不显示侧边栏

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
aside:  
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: # fab fa-github
text: 🛴前往小家...
link: https://github.com/fomalhaut1998
card_announcement:
enable: true
content: <center>主域名:<br><a href="https://www.fomal.cc"><b><font color="#5ea6e5">fomal.cc</font></b></a>&nbsp;|&nbsp;<a href="https://www.fomal.cn"><b><font color="#5ea6e5">fomal.cn</font></b></a><br>备用域名:<br><a href="https://blog.fomal.cc"><b><font color="#5ea6e5">blog.fomal.cc</font></b></a><br><a href="https://aa.fomal.cc"><b><font color="#5ea6e5">aa.fomal.cc</font></b></a><br><a href="https://bb.fomal.cc"><b><font color="#5ea6e5">bb.fomal.cc</font></b></a><br><a href="mailto:admin@fomal.cn">📬:<b><font color="#a591e0">admin@fomal.cn</font></b></a></center>
card_recent_post:
enable: false
limit: 3 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: false
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: false
limit: 20 # if set 0 will show all
color: true
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: false
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works
card_weibo:
enable: true

访问人数(UV 和 PV)

1
2
3
4
busuanzi:  
site_uv: true # 本站总访客数
site_pv: true # 本站总访问量
page_pv: true # 本文总阅读量

运行时间

1
2
3
4
5
6
7
8
# Time difference between publish date and now (網頁運行時間)  
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: false
publish_date: 8/9/2022 00:00:00
##网页开通时间
#格式: 月/日/年 时间
#也可以写成 年/月/日 时间

网站背景

1
2
3
4
# 图片格式 url(http://xxxxxx.com/xxx.jpg)  
# 颜色(HEX值/RGB值/颜色单词/渐变色)
# 留空 不显示背景
background: url(https://source.fomal.cc/img/dm1.webp)

如果你的网站根目录不是'/',使用本地图片时,需加上你的根目录。
例如:网站是 https://yoursite.com/blog,引用一张img/xx.png图片,则设置background为 url(/blog/img/xx.png)

1
2
# footer是否显示图片背景(与top_img一致)  
footer_bg: true
  • 留空/false:显示默认的颜色
  • 图片链接:显示所配置的图片
  • 颜色包括HEX值 - #0000FF | RGB值 - rgb(0,0,255) | 颜色单词 - orange | 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%):对应的颜色
  • true:显示跟 top_img 一样

背景特效

静止彩带

1
2
3
4
5
6
7
canvas_ribbon:  
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false #設置是否每次點擊都更換彩带
mobile: false # false 手機端不顯示 true 手機端顯示

动态彩带

1
2
3
canvas_fluttering_ribbon:  
enable: true
mobile: true # false 手机端不显示 true 手机端显示

canvas_nest

1
2
3
4
5
6
7
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 # false 手機端不顯示 true 手機端顯示

鼠标点击效果

烟花

1
2
3
`zIndex`建议只在`-1`和`9999`上选。  
`-1` 代表烟火效果在底部。
`9999` 代表烟火效果在前面。
1
2
3
4
fireworks:  
enable: true
zIndex: 9999 # -1 or 9999
mobile: false

爱心

1
2
3
4
# 点击出現爱心  
click_heart:
enable: true
mobile: false

文字

1
2
3
4
5
6
7
8
9
10
# 点击出现文字,文字可自行修改  
ClickShowText:
enable: false
text:
- I
- LOVE
- YOU
fontSize: 15px
random: false # 文字随机显示
mobile: false

自定义字体和字体大小

全局字体

修改主题配置文件_config.butterfly.yml中的font-family属性即可,如不需要配置,请留空

1
2
3
4
5
6
7
8
9
10
11
# Global font settings  
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: '15px'
code-font-size: '14px'
# -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
# Wenkai, consolas, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
font-family: var(--global-font), Consolas_1, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
# consolas, ZhuZiAWan_light, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
# Consolas_1, ZhuZiAWan_light, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
code-font-family: Consolas_1, var(--global-font), "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

Blog 标题字体

1
2
3
4
5
6
7
# Font settings for the site title and site subtitle  
# https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
# Titillium Web, 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft JhengHei' , 'Microsoft YaHei' , sans-serif
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family: var(--global-font)

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# the subtitle on homepage (主頁subtitle)  
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) http://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:
- "Welcome to Fomalhaut🥝のTiny Home!🤣🤣🤣"
- "Hope you have a nice day!🍭🍭🍭"

页面加载动画preloader

1
2
3
4
5
preloader:
  enable: true # true|false
  load_color: # '#37474f'
  load_style: heo # default|gear|ironheart|scarecrow|triangles|wizard|image|spincat|heo(新增)
  load_image: # url

字数统计

  1. 安装插件:在你的博客根目录,打开cmd命令窗口执行。
1
npm install hexo-wordcount --save
  1. 开启配置:修改主题配置文件_config.butterfly.yml中的wordcount
1
2
3
4
5
wordcount:  
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

图片大图查看模式

如果你并不想为某张图片添加大图查看模式,你可以使用 html 格式引用图片,并为图片添加 no-lightbox class 名,例如:<img src="xxxx.jpg" class="no-lightbox">

1
2
# fancybox http://fancyapps.com/fancybox/3/  
fancybox: true

Pjax

当用户点击链接,通过 ajax 更新页面需要变化的部分,然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。这样可以不用重复加载相同的资源(css/js), 从而提升网页的加载速度

1
2
3
4
5
6
7
8
9
10
11
# Pjax [Beta]  
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
# 对于一些第三方插件,有些并不支持 pjax 。
# 你可以把网页加入到 exclude 里,这个网页会被 pjax 排除在外。
# 点击该网页会重新加载网站。
exclude:
- /music/
- /no-pjax/

Inject

如想添加额外的 js/css/meta 等等东西,可以在 Inject 里添加,head(</body>标签之前), bottom(</html>标签之前)。

1
2
3
4
5
6
7
8
# Inject  
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/xxx.css">
bottom:
- <script src="xxxx"></script>

本地搜索系统

安装依赖:

1
npm install hexo-generator-search --save

注入配置:修改站点配置文件_config.yml,添加如下代码:

1
2
3
4
search:  
path: search.xml
field: post
content: true

主题中开启搜索:在主题配置文件_config.butterfly.yml中修改以下内容:

1
2
3
local_search:  
- enable: false
+ enable: true

重新编译运行,即可看到效果

1
2
hexo cl && hexo generate  
hexo s -p 8000