【个人博客搭建】butterfly主题配置
目录
参考文档:
- GitHub - jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly
- Butterfly 安裝文檔(三) 主題配置-1
- Butterfly 安裝文檔(四) 主題配置-2
一、基础配置
(一) 模板配置
1. 文章模板
hexo new
创建文章时会使用scaffolds/post.md
文件作为预设文章模板,可编辑其文件内置配置项,使文章更好管理、分类,可按需自行配置
--
title: {{ title }}
date: {{ date }}
tags:
top_img:
categories:
cover:
---
支持的全部参数:
写法 | 说明 |
title* | 文章标题 |
date* | 文章创建日期 |
update | 文章更新日期 |
tags | 文章标签 |
categories | 文章分类 |
keywords | 文章关键字 |
description | 文章描述 |
top_img | 文章顶部图片 |
cover | 文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图,可设为false/图片地址/留空) |
comments | 显示文章评论模块(默认 true) |
toc | 显示文章TOC(默认为设置中toc的enable配置) |
toc_number | 显示toc_number(默认为设置中toc的number配置) |
toc_style_simple | 显示 toc 简洁模式 |
copyright | 显示文章版权模块(默认为设置中post_copyright的enable配置) |
copyright_author | 文章版权模块的文章作者 |
copyright_author_href | 文章版权模块的文章作者链接 |
copyright_url | 文章版权模块的文章连结链接 |
copyright_info | 文章版权模块的版权声明文字 |
mathjax | 显示mathjax(当设置 mathjax 的 per_page: false 时,才需要配置,默认 false ) |
katex | 显示 katex (当设置 katex 的 per_page: false 时,才需要配置,默认 false ) |
aplayer | 在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置 |
highlight_shrink | 配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) |
aside | 显示侧边栏 (默认 true) |
abcjs | 加载 abcjs (当设置 abcjs 的 per_page: false 时,才需要配置,默认 false ) |
2. 页面模板
hexo new page
创建页面时会使用scaffolds/page.md
文件作为预设页面模板,可编辑其文件内置配置项,使页面支持个性化定制,可按需自行配置
---
title: {{ title }}
date: {{ date }}
type:
---
支持的全部参数:
写法 | 说明 |
title* | 页面标题 |
date* | 页面创建日期 |
type* | 标签、分类和友情链接三个页面需要配置 |
update | 页面更新日期 |
description | 页面描述 |
keywords | 页面关键字 |
comments | 显示页面评论模块 (默认 true) |
top_img | 页面顶部图片 |
mathjax | 显示mathjax (当设置mathjax的per_page: false时,才需要配置,默认 false) |
katex | 显示katex (当设置katex的per_page: false时,才需要配置,默认 false) |
aside | 显示侧边栏 (默认 true) |
aplayer | 在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 |
highlight_shrink | 配置代码框是否展开 (true/false) (默认为设置中highlight_shrink的配置) |
random | 配置友情链接是否随机排序(默认为 false) |
(二) 创建页面和文章
1. 标签页【可选】
使文章根据标签分类,将文章聚合在指定标签下,页面效果如下:
在Hexo
根目录下,终端输入:
hexo new page tags
会生成source/tags/index.md
文件,将type
改为tags
---
title: tags
date: 2024-02-03 15:23:21
type: "tags"
---
2. 分类页【可选】
使文章根据类别分类,将文章聚合在指定类别下,页面效果如下:
在Hexo
根目录下,终端输入:
hexo new page categories
会生成source/categories/index.md
文件,将type
改为categories
---
title: categories
date: 2024-02-03 15:48:47
type: "categories"
---
3. 友链页【可选】
配置友情链接,分享有趣,页面效果如下:
在Hexo
根目录下,终端输入:
hexo new page link
会生成source/link/index.md
文件,将type
改为link
---
title: categories
date: 2024-02-03 15:48:47
type: "link"
---
w
在Hexo
根目录的source/_data
(_data文件夹自行创建)目录中创建link.yml
文件。根据指定格式,按需配置链接内容。
- class_name: 友情链接
class_desc: 那些人,那些事
link_list:
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的网志框架
- class_name: 网站
class_desc: 值得推荐的网站
link_list:
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 视频网站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中国最大社交分享平台
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台
4. 404页面【可选】
butterfly
主题内置404页面,可通过编辑配置文件themes/butterfly/_config.yml
开启
# A simple 404 page
error_404:
enable: true
subtitle: "页面没有找到"
background:
5. 文章
创建一篇文章,效果如下
在Hexo
根目录下,终端输入:
hexo new 文章名
会生成source/_posts/文章名.md
文件,按需编写文章内容和设定配置项
---
title: 这是第一篇博客
date: 2024-02-03 15:19:06
tags: test
top_img:
categories: 测试
---
# 这是第一篇博客
(三) 导航栏设置
1. 基础项
编辑配置文件themes/butterfly/_config.yml
nav:
logo: # image
display_title: true
fixed: true # fixed navigation bar
参数 | 说明 |
logo | 网站的 logo,支持图片,直接填入图片链接 |
display_title | 是否显示网站标题,填写 true 或者 false |
fixed | 是否固定状态栏,填写 true 或者 false |
2. 菜单项
编辑配置文件themes/butterfly/_config.yml
menu:
首页: / || fas fa-home
搜索: /search/ || fas fa-search
文档 || fas fa-archive:
标签: /tags/ || fas fa-tags
归档: /categories/ || fas fa-folder-open
格式说明:
导航文字*: /跳转子页面路径/ || 图标名
- 导航文字:按需编写,甚至支持表情 🏠
- 根据实际子页面地址填写
- 图标名:可在此查询:图标库 – Font Awesome 中文网、Find Icons with the Perfect Look & Feel | Font Awesome
(四) 页面设置
1. 代码框设置
# 主题:darker / pale night / light / ocean / mac / mac light / false
highlight_theme: mac light
# 是否支持复制
highlight_copy: true # copy button
# 是否显示代码语言
highlight_lang: true # show the code language
# 是否展开代码块
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
# 代码块高度限制,超出后需手动展开
highlight_height_limit: 200 # unit: px
# 设置代码自动换行
code_word_wrap: false
2. 社交图标设置
填写格式为:图标: 地址 || 说明 || 颜色
social:
fab fa-github: https://github.com/LsWGG || Github || '#24292e'
fas fa-envelope: mailto:lishunwss@163.com || Email || '#4a7dbe'
展示效果:
3. 头像
avatar:
# 头像地址,可以为在线地址或本地相对路径
img: /img/head_img.jpeg
# 头像动画,为true是会一直转圈
effect: false
4. 顶部图
# 设置为true后禁用顶部图片
disable_top_img: false
# 主页面的top_img
index_img: orange
# 默认页面的top_img,如当前页未配置top_img时,则使用该配置
default_top_img:
支持配置的值:
配置值 | 说明 |
留空 | 显示默认的 top_img(如有),否则显示默认的顔色 |
img链接 | 图片的链接,显示所配置的图片 |
顔色( HEX值 - #0000FF RGB值 - rgb(0,0,255) 顔色单词 - orange 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) ) | 对应的顔色 |
transparent | 透明 |
false | 不显示 top_img |
5. 文章封面
文章封面的获取顺序 Front-matter
的 cover
> 配置文件的 default_cover
> false
修改主题配置文件
cover:
# 是否显示文章封面
index_enable: true
# 侧栏是否显示文章封面图
aside_enable: true
# 归档页面是否显示文章封面图
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示,可配置多个
default_cover:
- /img/default_cover1.png
- /img/default_cover2.png
效果展示:
6. 文章基础信息展示
post_meta:
page: # Home Page
date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字
效果展示:
7. 配置文章节选
index_post_content:
method: 2
length: 500 # if you set method to 2 or 3, the length need to config
method参数支持:
- description: 只显示description
- both: 优先选择description,如果没有配置description,则显示自动节选的内容
- auto_excerpt:只显示自动节选
- false: 不显示文章内容
配置 2 或 3 后,需指定文章节选截取长度
配置 1 后,需在文章模板中配置 description 配置项
8. 图片描述
photofigcaption: true
9. 复制权限配置
copy:
# 文章是否可复制
enable: true
copyright:
# 是否开启复制版权信息添加
enable: false
# 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息
limit_count: 50
10. 目录配置
toc:
# 文章页是否显示 TOC
post: true
# 普通页面是否显示 TOC
page: true
# 是否显示章节数
number: true
# 是否展开 TOC
expand: false
# 简洁模式(侧边栏只显示 TOC, 只对文章页有效 )
style_simple: false # for post
# 是否显示滚动进度百分比
scroll_percent: true
11. 配置赞赏
reward:
enable: true
text:
QR_code:
- img: /img/wechat.png
link:
text: 微信
- img: /img/alipay.png
link:
text: 支付宝
二维码美化网站:二维码美化系统_在线自定义排版二维码_草料二维码
12. 配置页脚
footer:
owner:
enable: true
# 站点搭建起始日期
since: 2024
# 自定义文本,可配置ICP信息:<a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号:xxxxxx</span></a>
custom_text:
copyright: true # Copyright of theme and framework
13. 夜间模式
darkmode:
# 是否开启
enable: true
# Toggle Button to switch dark/light mode
# 是否显示按钮
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: true
# Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
start: # 8
end: # 22
二、高级配置
(一) 功能相关
1. 搜索
安装hexo-generator-searchdb
npm install hexo-generator-searchdb
设置配置文件
# Local search
local_search:
# 是否开启本地搜索
enable: true
# 预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件
preload: false
# 匹配的文章结果,默认显示最开始的 1段结果
top_n_per_article: 1
# 将 html 字符串解码为可读字符串
unescape: false
CDN:
效果
2. 分析统计
3. 广告
(二) 页面相关
1. 自定义主题色
自定义修改配置文件
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"
scrollbar_color: "#49b1f5"
meta_theme_color_light: "ffffff"
meta_theme_color_dark: "#0d0d0d"
2. 网站背景
默认显示白色,可设置图片或颜色
自定义修改配置文件
background:
3. Fotter背景
自定义修改配置文件
# true: 显示跟 top_img 一样
# red: 显示指定颜色
# img链接: 显示指定图片
footer_bg: true
4. 背景特效
自定义修改配置文件
静止彩带
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false #设置是否每次点击都更换綵带
mobile: false # false 手机端不显示 true 手机端显示
动态彩带
canvas_fluttering_ribbon:
enable: true
mobile: false # false 手机端不显示 true 手机端显示
5. 鼠标点击效果
自定义修改配置文件
烟花
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false
爱心
click_heart:
enable: true
mobile: false
文字
clickShowText:
enable: true
# 自定义文字
text:
# - I
# - LOVE
# - YOU
fontSize: 15px
random: false
mobile: false