语言

修改项目配置文件 _config.yml
默认语言是 en

1
language: zh-CN

主题支持三种语言：

  1. default(en)
  2. zh-CN (简体中文)
  3. zh-TW (繁体中文)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改项目根目录的_config.yml

导航菜单

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

1
2
3
4
5
6
7
8
9
10
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:
    - Music || /music/ || fas fa-music
    - Movie || /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

必须是 /xxx/，后面 || 分开，然后写图标名支持的图标网。
注意： 导航的文字可自行更改

1
2
3
4
5
6
7
8
9
10
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fas fa-list:
    - 音乐 || /music/ || fas fa-music
    - 电影 || /movies/ || fas fa-video
  友情链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

代码块中的所有功能只适用于 Hexo 默认的 highlight 渲染，如果使用第三方的渲染器，不一定会有效

代码高亮主题

Butterfly 支持 6 种代码高亮样式, 自定义主题请查看自定义主题

  • default
  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

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

1
highlight_theme: light

default

darker

pale night

light

ocean

mac

mac light

代码复制

Butterfly主题支持代码复制功能。
修改主题配置文件_config.butterfly.yml：

1
highlight_copy: true

代码展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 > 可展开代码

  • true 全部代码框不展开，需点击 > 打开
  • false 代码狂展开，有 > 点击按钮
  • none 不显示 > 按钮
    修改主题配置文件_config.butterfly.yml：
    1
    highlight_shrink: true #代码框不展开，需点击 '>' 打开

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代码换行

在默认情况下，hexo-highlight 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。
修改主题配置文件_config.butterfly.yml：

1
code_word_wrap: true

然后找到 Hexo 配置文件_config.yml，将 line_number 改成 false:

1
2
3
4
5
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

社交图标即主页上个性标签下的各种社交账号关联。

书写格式：图标名：url || 描述性文字

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

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

图标名可在这寻找: https://fontawesome.com/icons?from=io
PC端效果展示：

手机端效果展示：

顶部图

顶部图有 2 种配置：具体 url 和（留空，true 和 false，三个效果一样）

page页

当具体 url 时

  • 主页的顶部图可以在主题配置文件中设置 index_img
  • archives 页的顶部图可以在主题配置文件中设置 archive_img
  • 其他 page 页的顶部图可以在各自的 md 页面设置 front-matter 中的 top_img

    页面如果没有设置各自的 top_img，则会显示 default_top_img 图片

留空， true 和 false
主页会显示纯颜色的顶部图，其他 page 的顶部图没有设置时，也会显示纯颜色的顶部图

post页

post 页的顶部图会优先显示各自front-matter中的top_img, 如果没有设置，则会缩略图（即各自 front-matter 中的 cover)，如果没有则会显示显示 default_top_img 图片

文章置顶

要为文章置顶，你需要安装插件 (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 属性来把这篇文章置顶。数值越大，置顶的优先级越大

文章封面

文章的 markdown 文档上，在 Front-matter 添加cover, 并填上要显示的图片地址。

  • 如果不配置 cover, 可以设置显示默认的 cover。
  • 如果不想在首页显示 cover, 可以设置为 false。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover: # 当配置多张图片时，会随机选择
    - https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg.png
    - https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg2.png
    - https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg3.png

position: both

position: left

position: right

文章页相关配置

文章 meta 显示

这个选项是用来显示文章的相关信息的。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
6
7
8
9
10
11
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标籤
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标籤
    label: true # true or false 显示描述性文字


在文章详情页顶部的资料，date_type: 可设置文章日期显示创建日期 (created) 或者更新日期 (updated) 或者两种都显示 (both)
categories 是否显示分类

tags 是否显示标签

文章版权

为你的博客文章展示文章版权和许可协议。
修改主题配置文件_config.butterfly.yml：

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

如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置

1
copyright: false

从 3.0.0 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置

1
2
3
4
5
copyright: true
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接。用户点击图片就会跳转到链接去。link 可以不写，会默认为图片的链接。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
6
7
8
9
reward:
  enable: true
  QR_code:
    - img: /image/wechat.jpg
      link:
      text: 微信
    - img: /image/alipay.jpg
      link:
      text: 支付宝

文章隐藏

如需要文章隐藏功能，请装插件 hexo-generator-indexed 或者 hexo-hide-posts

TOC目录

在文章页，会有一个目录，用于显示 TOC。

  • enable: 是否显示 TOC
  • number: 是否显示章节数
  • auto_open: 可选择进入文章页面时，是否自动打开 sidebar 显示 TOC

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

1
2
3
4
toc:
  enable: true
  number: true
  auto_open: true # auto open the sidebar

PC端效果展示：

手机端效果展示：

number: true

number: false

为特定的文章配置

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

相关文章

相关文章推荐的原理是根据文章 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
anchor: true

文章过期提醒

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

1
2
3
4
5
6
7
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  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.

limit_day： 距离更新时间多少天才显示文章过期提醒
message_prev： 距离更新时间多少天才显示文章过期提醒
message_next： 天数之后的文字
style: flat

style: simple

头像

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

1
2
3
avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

1
2
3
4
5
copy:
  enable: true # 是否开启网站复制权限
  copyright: # 复制的内容后面加上版权信息
    enable: true # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

添加版权后复制内容：

1
2
3
4
5
6
Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

作者: itchenliang
连结: http://localhost:4000/posts/bd3c650b/#Paragraph
来源: 个人博客
着作权归作者所有。商业转载请联络作者获得授权，非商业转载请註明出处。

Footer 设置

项目年份

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
footer:
  owner:
    enable: true
    since: 2018

页脚自定义文本

custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。
修改主题配置文件_config.butterfly.yml：

1
custom_text: Hi, welcome to my <a href="https://百度.me/">blog</a>! # 也叫自定义文本

ICP

对于部分有备案的域名，可以在 ICP 配置显示。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
  text: 粤ICP备xxxx
  icon: /img/icp.png

右下角按钮

简繁转换

简体繁体互换, 右下角会有简繁转换按钮。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
6
7
8
9
10
11
12
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

夜间模式

右下角会有夜间模式按钮
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。
修改主题配置文件_config.butterfly.yml：

1
readmode: true

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。
修改主题配置文件_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
aside:
  enable: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      icon: fab fa-github
      text: Github
      link: https://github.com/百度127/hexo-theme-butterfly
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    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
  card_webinfo: true

position: left

position: right

card_tags color: false

card_tags color: false

card_tags color: true

访问人数

访问 busuanzi 的官方网站查看更多的介绍。
修改主题配置文件_config.butterfly.yml：

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间
修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
6
runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

标签外挂

Note (Bootstrap Callout)

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

1
2
3
4
5
6
7
8
9
10
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: simple
  icons: false
  border_radius: 3
  light_bg_offset: 0

用法：

1
2
3
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% 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 %}

style: simple

style: modern

style: flat

style: disabled

Gallery 相册图库

一个图库集合。
写法

1
2
3
4
5
<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：连接到对应相册的地址
  • img-url：图库封面的地址

如：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
壁纸

收藏的一些壁纸

漫威

关于漫威的图片

OH MY GIRL

关于OH MY GIRL的图片

Gallery 相册

写法:

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

如：

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}








回答问题 tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个。

success inline

inline 在文本里面添加按钮隐藏内容，只限文字(content不能包含英文逗号，可用 &sbquo;)

1
{% hideInline content,display,bg,color %}
  • content: 文本内容
  • display: 按钮显示的文字 (可选)
  • bg: 按钮的背景颜色 (可选)
  • color: 按钮文字的颜色 (可选)
1
2
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

绘图mermaid（饼状图、柱状图等）

使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 mermaid 文档
修改主题配置文件_config.butterfly.yml：

1
2
3
4
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

写法：

1
2
3
{% mermaid %}
内容
{% endmermaid %}

例如：

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Tabs标签页

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

图标：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Button

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空
1
2
3
4
5
This is my website, click the button {% btn 'http://www.baidu.com',百度 %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,,outline %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}

This is my website, click the button 百度
This is my website, click the button 百度
This is my website, click the button 百度
This is my website, click the button 百度
This is my website, click the button 百度

1
2
3
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block center larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block right outline larger %}
百度 百度 百度 
1
2
3
4
5
6
7
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,blue larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,pink larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,red larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,purple larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,orange larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,green larger %}
百度 百度 百度 百度 百度 百度 百度 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline green larger %}
</div>
百度 百度 百度 百度 百度 百度 百度