前言
博客主题已更新至3.8.4
本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改；
一些直接修改主题配置文件的功能，请移步Hexo-theme-butterfly开源仓库，参阅官方文档，这里就不做赘述。
此文不涉及源码的修改，源码修改部分请参照Hexo-Butterfly主题修改记录-2
Front-matter
markdown文件最上方以---分隔的区域
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments：
cover:
toc:
toc_number:
auto_open:
copyright:
mathjax:
katex:
aplayer：
highlight_shrink：
---写法 | 说明 |
|---|---|
title | 【必需】文章标题 |
date | 【必需】文章创建日期 |
updated | 【可选】文章更新日期 |
tags | 【可选】文章标籤 |
categories | 【可选】文章分类 |
keywords | 【可选】文章关键字 |
description | 【可选】文章描述 |
top_img | 【可选】文章顶部图片 |
cover | 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空) |
comments | 【可选】显示文章评论模块(默认 true) |
toc | 【可选】显示文章TOC(默认为设置中toc的enable配置) |
toc_number | 【可选】显示toc_number(默认为设置中toc的number配置) |
auto_open | 【可选】是否自动打开TOC(默认为设置中toc的auto_open配置) |
copyright | 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置) |
mathjax | 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false) |
katex | 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false) |
aplayer | 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 |
highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置) |
主页文章节选(自动节选和文章页description)
因为主题UI的关係，主页文章节选只支持自动节选和文章页description。
在butterfly里，有四种可供选择
- description： 只显示description
- both： 优先选择description，如果没有配置description，则显示自动节选的内容
- auto_excerpt：只显示自动节选
- false： 不显示文章内容
修改主题配置文件：
代码语言：javascript复制index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to configdescription在front-matter里添加
代码语言：javascript复制title: Hexo-Butterfly主题修改记录（持续更新）
date: 2020-7-20 17:25:00
categories:
- 记录分享
- 网站搭建
description: 这里填写展示在首页的预览文字内容
tags:
- Hexo新建页面
代码语言：javascript复制hexo new page "pagename"代码换行
配置butterfly.yml
代码语言：javascript复制code_word_wrap: true找到HEXO根目录配置文件，將line_number改成false:
代码语言：javascript复制highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:文章置顶
首先安裝插件(hexo-generator-index-pin-top 或者 hexo-generator-indexed)
如果使用hexo-generator-index-pin-top, 需要先卸载掉hexo-generator-index，然後在文章的front-matter区域添加top: true屬性來把這篇文章置頂
如果使用hexo-generator-indexed, 需要先卸载掉hexo-generator-index，然后在文章的front-matter区域添加sticky: 1。数值越大，置頂的优先越大。
顶部图
page页直接在主题配置文件中修改，post页可在front-matter中设置top_img属性，即top_img: 图片地址
文章封面
在Front-matter中添加cover: 图片地址，同时在主题配置文件中修改封面配置。
标签外挂
Note
代码语言：javascript复制note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0用法：
代码语言：javascript复制{%note [class] [no-icon] %}
Any content (support inline tags too.io).
{%endnote %}
[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.
All parameters are optional.示例：
代码语言：javascript复制{%note default %}
default 提示
{%endnote %}
{%note primary no-icon %}
primary 提示
{%endnote %}
{%note success %}
success 提示
{%endnote %}
{%note info %}
info 提示
{%endnote %}
{%note warning %}
warning 提示
{%endnote %}
{%note danger %}
danger 提示
{%endnote %}default 提示
primary 提示
success 提示
info 提示
warning 提示
danger 提示
相册图库
示例：
代码语言：javascript复制<div class="gallery-group-main">
{%galleryGroup 'Pixiv' '收藏的一些插画' '/photo/pixiv' https://s.ahzoo.cn/img/pixiv/07.jpg %}
{%galleryGroup 'CG' '永远的7日之都' '/photo/forever7' https://s.ahzoo.cn/img/forever7/05.jpg %}
</div>
Pixiv
收藏的一些插画
CG
永远的7日之都
相册
示例：
代码语言：javascript复制{%gallery %}
{%endgallery %}
Tabs
使用方法:
代码语言：javascript复制
{%tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{%endtabs %}
Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.示例：
代码语言：javascript复制{%tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}- test1 1
- test1 2
- test1 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
代码语言：javascript复制{%tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}- test2 1
- test2 2
- test2 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
代码语言：javascript复制{%tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{%endtabs %}- test3 1
- test3 2
- test3 3
This is Tab 1.
This is Tab 2.
This is Tab 3.
自定义 Tab 名 只有 icon icon 和 Tab 名：
代码语言：javascript复制{%tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->
<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->
<!-- tab 炸彈@fas fa-bomb -->
**名字 icon**
<!-- endtab -->
{%endtabs %}- 第一個Tab
- 炸彈
tab名字為第一個Tab
只有圖標 沒有Tab名字
名字 icon
tag-hide
tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 Toc 的滚动出现异常。
- Inline
- Block
- Toggle
inline 在文本里面添加按钮隐藏内容，只限文字
代码语言：javascript复制{%hideInline content,display,bg,color %}content: 文本内容 display: 按钮显示的文字 (可选) bg: 按钮的背景颜色 (可选) color: 按钮文字的颜色 (可选) ( content 不能包含英文逗号，可用 ‚)
示例：
代码语言：javascript复制
