Hexo-Butterfly 主题

本文讲述如何搭建 Butterfly 主题并快速美化我们的个人博客，好看的样式所产生的观感会让我们在阅读时有一种心情愉悦的感觉。这里，我们介绍一些简单的配置，更多的配置可以跟着官方配置的方法。许多你需要解决的问题都可以在 (Butterfly 主题官网)[https://butterfly.js.org/]找到解决方案。

导航目录

# _config.butterfly.yml
menu:
  首页: / || fas fa-home
  目录 || fas fa-list:
    归档: /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
  工具: /tools/ || fas fa-screwdriver-wrench
  关于: /about/ || fas fa-heart

说明：

• /xxx/ 为菜单链接格式，xxx 为页面路径（项目 source 目录下的文件夹名称）
• fas fa-home 为 Font Awesome 图标，可以根据自己的需求更换图标
• || 为菜单链接和图标分隔符

CDN 内容源

为 Butterfly 提供图标源的 jsdelivr 在国内寄了，因此需要将 CDN 改为本地并按提示安装 hexo-butterfly-extjs

• 全文搜索 CND 快速定位
• CDN.third_part_probider = jsdelivr

# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: jsdelivr                                        # 改为 local

npm install hexo-butterfly-extjs  # 安装 hexo-butterfly-extjs

代码块

代码块中的所有功能只能用 Hexo 自带的代码渲染，如果使用第三方的渲染器，不一定有效。

• code_blocks.theme：Butterfly 支持 6 种代码高亮样式，darker、pale night、light、ocean、macStyle、false
• code_blocks.code_word_wrap：在默认情况下，Hexo 不会执行代码软换行，如果您不希望在代码块里有横向滚动条的话，则可以考虑使用这个功能 code_word_wrap: true
• code_blocks.highlight_height_limit：单位是 px，直接添加数字，如 200，实际限制高度为 highlight_height_limit + 30 px，多增加 30px 限制，目的是避免代码高度只超出 highlight_height_limit 一点时，出现展开按钮，展开没内容

代码块高度限制，超出的部分会隐藏，并显示展开按钮。

code_blocks.height_limit: false # unit px

单位是 px，直接添加数字，如 200。

社交图标

Butterfly 支持 Font Awesome 图标，在可以根据自己的需求更换图标，在 _config.buttefly.yml 中，格式为 图标名: url || 描述性文字 || color

social:
	fab fa-github: https://github.com/xxxxxx || Github || "#hdhfbb"
	fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#00000"

文章页

Page/Post Front-matter

Front-matter 翻译成中文是 【前页（指扉页、版权页、目次等）】，它位于 Markdown 文件的头部，遵循 YAML 语法的一块区域。

• Page Front-matter 用于主页文章卡片配置
• Post Front matter 用于 文章页 配置

在每篇博文的 markdown 文档顶部加上分割线 ---，中间写上该文档的性质。具体写法：

---
title:
date:
updated:
---

• Page Front-matter 参数解释

参数	解释	参数	解释
title	【必选】页面标题	data	【必选】页面创建日期
type	【必选】标签、分类和友情链接三个页面需要配置	updated	页面更新日期
description	页面描述	keywords	页面关键字
comments	显示页面评论模块（默认为 true）	top_img	页面顶部图片
mathjax	当 mathjax.per_pag=false 时，才需要设置	katex	当 katex.per_page=false 时，才需要设置
aside	显示侧边栏（默认为 true）	aplayer	在需要的页面加载 aplayer 的 js 和 css
highlight_shrink	配置代码框是否展开（默认为设置中 highlight_shrink 的配置）	random	配置友情链接是否随机排序
limit	配置说说显示数量	limit.type	配置说说显示数量的类型（date 或 num）
limit.value	配置说说显示数量的值

• Post Front-matter 参数解释

参数	解释	参数	解释
title	【必选】文章标题	data	【必选】文章创建日期
updated	文章更新日期	tags	文章标签
categories	文章分类	keywords	文章关键字
description	文章描述	top_img	文章顶部图片
cover	文章缩略图（如果没有设置 top_img，文章页顶部将显示缩略图，可设为 false/图片地址/留空）	comments	显示文章评论模块
toc	显示文章 TOC（默认为设置中 toc 的 enable 设置）	toc_number	显示 toc_number（默认为设置中 toc 的 number 设置）
toc_style_simple	显示 toc 简洁模式	copyright	显示文章版权模块
copyright_author	文章版权模块的文章作者	copyright_author_href	文章版权模块的文章作者链接
copyright_url	文章版权模块的文章连接链接	copyright_info	文章版权模块的版权声明文字
mathjax	当 mathjax.per_pag=false 时，才需要设置	katex	当 katex.per_page=false 时，才需要设置
aside	显示侧边栏（默认为 true）	aplayer	在需要的页面加载 aplayer 的 js 和 css
highlight_shrink	配置代码框是否展开（默认为设置中 highlight_shrink 的配置）	abcjs	当设置 abcjs.per_page=false 时，才需要配置
noticeOutdate	文章过期提醒（默认为设置中 noticeOutdate 的 enable 设置）

TOC 目录

在侧边栏显示 TOX（文章目录）：

• toc.post：文章页是否显示 TOC
• toc.page：普通页面是否显示 TOC
• toc.number：是否显示章节数
• toc.expand：是否展开 TOC
• toc.style_simple：简洁模式（侧边栏只显示 TOC，只对文章页有效）
• toc.scroll_percent：是否显示滚动进度百分比

在你的文章 md 文件的头部，加入 toc_number 和 toc，并配置 true 或者 false 即可。主题会优先判断文章 Markdown 的 Front-matter 是否有配置，如有，则以 Front-matter 的配置为主。否则，以主题配置文件中的配置为主。

文章编辑按钮

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

相关文章

当文章封面设置为 false 时，或者没有获取到封面配置，相关文章背景将会显示主题色

相关文章推荐的原理是根据文章 tags 的比重来推荐

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

新建页面

• source 中的每一个目录就是一个页面，_prots、_draft 除外

• 目录包含的页面

  需要本地填写

• 内建页面不需要在本地创建任何目录，它由 Butterfly 自动生成；

• 普通页面 直接使用 hexo new page 新建即可，普通页面的名称、内容不受约束；

• 关联页面 则需要使用 hexo new page 新建，必须是 Butterfly 支持的页面，需要添加头部 YAML，文章不可包含内容

hexo new page "tags"
hexo new page "categories"

tags/index.md

---
title: 标签
date: 2022-02-05 18:29:52
type: "tags"
layout: "tags"
---

Search 搜索

安装 hexo-generator-search 用于本地搜索

npm install hexo-generator-search --save

全文搜索 # search 快速定位，设置 local_search.enable = true，该配置需要 hexo clean

渐变色设置

在 source 目录下新建一个 styles 文件夹，层级如下：

在 styles 目录下新建一个 main.css 文件：

/* 鱼塘固定宽度 */
canvas:not(#ribbon-canvas), #web_bg {
    margin-bottom: -0.5rem;
    display: block;
    width: 100%;
    height: 160px
}
 
/* 鱼塘渐变色 */
body{
 overflow-x: hidden;
}
#footer {
 height:160px;
 background: linear-gradient(
  135deg,
  rgba(23, 23, 116, 0.2),
  rgba(28, 181, 224, 0.2)
 );
}
#footer #footer-wrap,
#footer-wrap a {
 color: #000;
}
#footer #footer-wrap {
 z-index: 1;
}
 
#footer .container {
 line-height: 0;
 position: relative;
 height: 100%;
 width: 100vw;
}
 
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content>.card-widget.card-info{
    background: linear-gradient(-45deg, rgba(255, 183, 197, 0.8), 
    rgba(255, 223, 186, 0.8), 
    rgba(186, 255, 201, 0.8), 
    rgba(186, 225, 255, 0.8));
}
[data-theme=dark] #aside-content>.card-widget.card-info {
    background: linear-gradient(-45deg, rgba(45, 45, 45, 0.8), 
    rgba(60, 60, 60, 0.8), 
    rgba(75, 75, 75, 0.8), 
    rgba(90, 90, 90, 0.8));
}
/* 侧边栏公告栏卡片渐变色 */
#aside-content>.card-widget.card-announcement{
    background: linear-gradient(-45deg, rgba(255, 183, 197, 0.8), 
    rgba(255, 223, 186, 0.8), 
    rgba(186, 255, 201, 0.8), 
    rgba(186, 225, 255, 0.8));
}
[data-theme=dark] #aside-content>.card-widget.card-announcement {
    background: linear-gradient(-45deg, rgba(45, 45, 45, 0.8), 
    rgba(60, 60, 60, 0.8), 
    rgba(75, 75, 75, 0.8), 
    rgba(90, 90, 90, 0.8));
}
/* 侧边栏目录最新文章卡片渐变色 */
#aside-content>.sticky_layout>.card-widget{
    background: linear-gradient(-45deg, rgba(255, 183, 197, 0.8), 
    rgba(255, 223, 186, 0.8), 
    rgba(186, 255, 201, 0.8), 
    rgba(186, 225, 255, 0.8));
}
[data-theme=dark] #aside-content>.sticky_layout>.card-widget{
    background: linear-gradient(-45deg, rgba(45, 45, 45, 0.8), 
    rgba(60, 60, 60, 0.8), 
    rgba(75, 75, 75, 0.8), 
    rgba(90, 90, 90, 0.8));
}
/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
    background-color: #3eb8be;
    border-radius: 8px;
}
/*文章页面*/
/* .layout>#post {
    background: linear-gradient(-45deg, rgba(255, 183, 197, 0.8), 
    rgba(255, 223, 186, 0.8), 
    rgba(186, 255, 201, 0.8), 
    rgba(186, 225, 255, 0.8));
}

[data-theme=dark] .layout>#post {
    background: linear-gradient(-45deg, rgba(45, 45, 45, 0.8), 
    rgba(60, 60, 60, 0.8), 
    rgba(75, 75, 75, 0.8), 
    rgba(90, 90, 90, 0.8));
} */
/*主页文章预览页面*/
#recent-posts>.recent-post-items>.recent-post-item{
    background: linear-gradient(-45deg, rgba(255, 235, 238, 0.8), 
    rgba(255, 245, 235, 0.8), 
    rgba(235, 255, 245, 0.8), 
    rgba(235, 245, 255, 0.8));
}
[data-theme=dark] #recent-posts>.recent-post-items>.recent-post-item{
    background: linear-gradient(-45deg, rgba(45, 45, 45, 0.8), 
    rgba(60, 60, 60, 0.8), 
    rgba(75, 75, 75, 0.8), 
    rgba(90, 90, 90, 0.8));
}
 
/*分类页面*/
.layout>#page {
    background: linear-gradient(-45deg, rgba(225,235,255,.8), 
rgba(225,235,255,.9), 
rgba(225,235,255,.9), 
rgba(225,235,255,.8));
}
[data-theme=dark] .layout>#page {
    background: linear-gradient(-45deg, rgba(24,40,72,.2), 
rgba(35,37,58,.9), 
rgba(35,37,58,.9), 
rgba(24,40,72,.2));
}
 
/*时间轴页面*/
.layout>#archive {
    background: linear-gradient(-45deg, rgba(225,235,255,.8), 
rgba(225,235,255,.9), 
rgba(225,235,255,.9), 
rgba(225,235,255,.8));
}
[data-theme=dark] .layout>#archive {
    background: linear-gradient(-45deg, rgba(24,40,72,.2), 
rgba(35,37,58,.9), 
rgba(35,37,58,.9), 
rgba(24,40,72,.2));
}

在主题配置中引入这个 css 文件

- <link rel="stylesheet" href="/styles/main.css">

位置如下：

文章的侧边栏、首页等页面将出现渐变色。

浏览器图标修改

找一个自己喜欢的图标，格式为 32*32。

在主题配置文件内添加如下代码即可（贴图展示）：

favicon: /image/动物.png

效果如图所示：

标签外挂

标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能会报错，使用前请留意。

Image 图片

这个在Butterfly 文档（三）主题配置有详细介绍

这里选一部分介绍

• 静止彩带背景

# canvas_ribbon (静止彩带背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: false

• 默认暗黑主题

# Default display mode (网站默认的显示模式)
# light (default) / dark
display_mode: dark

• 首页循环打字

# the subtitle on homepage (主页subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option: loop
  # source 调用第三方服务
  # source: false 关闭调用
  # source: 1  调用一言网的一句话 https://hitokoto.cn/
  # source: 2  调用随机一句话 https://yijuzhan.com/
  # source: 3  调用今日诗词 https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 找点好玩的去~
    - 搞点好吃的去~
    - 遇事不决，埋头就睡。
    - Hey! 你在看什么？

图集

参考链接：https://www.fattymonkey.com/post/10066.html#post-comment

相册集是 Butterfly 主题的一个亮点，能够在博客中展示各种各样的自定义图片。

创建页面

首先新建相册页面

hexo new page gallery

这样就会在 Hexo 博客的根目录下的 /source 下生成 /gallary/index.md 文件，gallery 可以是自定义的任意单词！在 index.md 文件中 Front-matter 中，将侧边栏和评论区设置未 false。

点击首页菜单栏的 相册 即可进入相册首页

可见，此时的相册页面是什么都没有的，只有一个用来展示内容的空白框！

图库集合页面

一个图库集合，图库集合页面就是普通的页面，如上面创建的 /gallery/index.md，写法如下

<div class="gallery-group-main">
{% galleryGroup {name} {description} {link} {img-url %}}
{% galleryGroup {name} {description} {link} {img-url} %}
{% galleryGroup {name} {description} {link} {img-url} %}
</div>

参数	解释
name	图库名字
description	图库描述
link	链接到对应相册的地址
link-url	图库封面的地址

{% galleryGroup '壁纸' '收藏的一些壁纸，侵删' '/album/wallpaper' https://www.czblogs.cn/album/wallpaper.jpeg %}

图库子页面

此时，我们还没有创建相应的子页面，此时点开任何一个图集，都会定向到 404 页面，现在需要为这个相册创建子页面

hexo new page life

然后会在博客根目录下 /source 目录下生成名为 life 的文件夹，并在其中生成一个名为 index.md 的文件，这个文件对应生活这个子页面！

此时图库子页面/source/life/index.md 和相册首页 /source/gallery/index.md 是平级的，需要将 life 整个文件夹移动到 gallery 文件夹中。然后在子页面 /source/gallery/life/index.md 中使用标签外挂挂上自己的照片，写法如下

{% gallery [button] %}
![]()
{% endgallery %}

button：点击按钮加载更多的图片，填写 true/false，默认为 false

注意点：

• 这里使用的是外挂标签，其中的图片就是按照 Markdown 插入图片的格式书写的，这个标签外挂会自动根据图片的尺寸大小来调整图片的大小，我们只需要将图片罗列上去。
• 由于标签外挂 gallery 会实时监测页面尺寸的大小，然后不断地变更图片的尺寸，所以当我们放入图库子页面所有的图片尺寸不一致时，有可能会导致显示图片的页面元素的尺寸不断变化，从视觉上看就是一直在抖动

Tig-hide

如果想把一些文字，内容隐藏起来，并提供按钮让用户点击展示，可以使用这种标签外挂。

inline 在文本里面添加隐藏内容，仅限文字，content 不能包含英文逗号，可用 &sbquo

{% hideInline content,display,bg,color %}

参数	解释
content	文本内容
display	【可选】按钮提示的文字
bg	【可选】按钮的背景颜色
color	【可选】按钮文字的颜色

哪个英文字母最酷？ {% hideInline 因为西装库（C装酷）,查看答案,#FF7242,#FFF %}