Butterfly主题安装文档

点开查看开发记录

开发记录

2024-01-13

主要参考内容

语言

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

1	language: zh-CN

导航菜单

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

# Menu 目錄
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
  关于: /about/ || fas fa-heart

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

代码

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

代码高亮主题

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

default
darker
pale night
light
ocean
mac
mac light

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

1	highlight_theme: light

代码复制

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

代码展开/关闭

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

true 全部代码框不展开，需点击 > 打开
false 代码狂展开，有 > 点击按钮
none 不显示 > 按钮

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

1	highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码换行

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

1	code_word_wrap: true

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

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

顶部图

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

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

如果不要显示顶部图，可直接配置 disable_top_img: true。

page页

当具体 url 时

主页的顶部图可以在主题配置文件中设置 index_img

1	index_img: https://bing.img.run/1920x1080.php # 必应每日更新图片

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)

1	npm install hexo-generator-index-pin-top

如果使用 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

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

文章页相关配置

文章meta显示

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

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：

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 单独设置

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：

reward:
  enable: true
  QR_code:
    - img: /image/wechat.jpg
      link:
      text: 微信
    - img: /image/alipay.jpg
      link:
      text: 支付宝

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

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

文章锚点

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

1	anchor: true

复制相关配置

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

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

项目年份

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

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：

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

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。
修改主题配置文件_config.butterfly.yml：

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

访问人数

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

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

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

runtimeshow:
  enable: true
  publish_date: 1/1/2024 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

Gallery 相册图库

增加图库

图库页面只是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

然后使用标签外挂 galleryGroup ,具体用法如下所示：

<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>

增加图库子页面

子页面也是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

然后使用标签外挂 gallery,具体用法如下所示：

{% 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：

mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

写法：

1
2
3

{% mermaid %}
内容
{% endmermaid %}

例如：

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Tabs标签页

使用方法：

{% 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.

图标：

{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

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

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

Button

使用方法：

{% 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/留空

例如：

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 %}

百度百度百度

{% 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 %}

百度百度百度百度百度百度百度

<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>

百度百度百度百度百度百度百度

图片设置

站点图标

站点图标又称站点icon(favicon.ico)
修改主题配置文件_config.butterfly.yml

1	favicon: /img/favicon.png # 将图片放入 themes -> Butterfly -> source -> img 里

头像

头像即是首页个人卡片处展示的自己的头像

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

1
2
3

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

主页封面图片

在访问系统首页时，出现的封面图片
修改主题配置文件_config.butterfly.yml：

1	index_img: https://gitee.com/dulily/cdn/raw/master/img/214707-1543326427a764.jpg

文章详情页的顶部图片

当没有在front-matter设置top_img和cover的情况下会显示该图
修改主题配置文件_config.butterfly.yml：

1	default_top_img: http://pic1.win4000.com/wallpaper/2020-08-21/5f3f3d10b054e.jpg

归档页顶部的图片

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

1	archive_img: http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg

标签页顶部的图片

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

1	tag_img: http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg

分类页顶部的图片

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

1	category_img: http://pic.netbian.com/uploads/allimg/170609/123945-14969831856c4d.jpg

文章封面

文章封面
每篇文章都可以设置一张封面，可以为每篇文章设置默认封面
修改主题配置文件_config.butterfly.yml：

cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
    # 当配置多张图片时，会随机选择一张作为 cover. 此时写法为
    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
    - http://pic1.win4000.com/wallpaper/2020-07-08/5f056636a92cf_270_185.jpg
    - http://pic1.win4000.com/wallpaper/2020-08-17/5f39f8e53b026_270_185.png
    - http://pic1.win4000.com/wallpaper/2020-07-23/5f19587122afa_270_185.jpg
    - http://pic1.win4000.com/wallpaper/2020-07-22/5f17b43d50c03_270_185.png
    - http://pic1.win4000.com/wallpaper/2020-08-14/5f363d07a24be_270_185.jpg

也可以修改每个md文件的front-matter的cover属性，会覆盖上面的默认封面。

1	cover: https://cn.bing.com/th?id=OHR.WeinstadelNuernberg_ZH-CN6448054345_1920x1080.jpg # 文章封面图

错误图片

配置了该属性后会替换无法展示的图片
修改主题配置文件_config.butterfly.yml：

1
2
3

error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

字数统计

要为 Butterfly 配上字数统计特性，你需要如下几个步骤:

打开 hexo 工作目录
npm install hexo-wordcount --save or yarn add hexo-wordcount
修改主题配置文件_config.butterfly.yml：

文章节选

主页文章节选，也就是文章摘要
修改主题配置文件_config.butterfly.yml：

1
2
3

index_post_content:
  method: 3
  length: 500 # 节选文章的前500个字

只能选择一个分享服务商

访问 AddThis官网, 找到你的 pub-id

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

1
2
3

addThis:
  enable: true # or false
  pubid: 你的pub-id

sharejs

如果你不知道 sharejs，到官网看看说明吧。
修改主题配置文件_config.butterfly.yml：

1
2
3

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

AddToAny

可以到 AddToAny 查看使用说明。
修改主题配置文件_config.butterfly.yml：

1
2
3

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

美化/特效

自定义主题色

可以修改大部分 UI 颜色
修改主题配置文件_config.butterfly.yml：

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"

网站背景

默认显示白色，可设置图片或者颜色
修改主题配置文件_config.butterfly.yml：

1	background:

留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog, 引用一张 img/xx.png 图片，则设置 background 为 url (/blog/img/xx.png)
background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

footer 的背景会与 top_img 的一致，当设置 false 时，将与主题色一致。
修改主题配置文件_config.butterfly.yml：

1 2	# footer是否显示图片背景(与top_img一致) footer_bg: true

打字效果

打字效果 activate-power-mode
修改主题配置文件_config.butterfly.yml：

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)

背景特效

静止彩带

好看的彩带背景，可设置每次刷新更换彩带，或者每次点击更换彩带
修改主题配置文件_config.butterfly.yml：

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #设置是否每次点击都更换綵带
  mobile: false # false 手机端不显示 true 手机端显示

动态彩带

好看的彩带背景，会飘动
修改主题配置文件_config.butterfly.yml：

1
2
3

canvas_ribbon_piao:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

canvas-nest

好看的星空例子特效，会飘动
修改主题配置文件_config.butterfly.yml：

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 手机端显示

鼠标点击效果

烟花

zIndex 建议只在 -1 和 9999 上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面
修改主题配置文件_config.butterfly.yml：

1
2
3

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999

爱心

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

1 2	# 点击出现爱心 click_heart: true

文字

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

# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px

页面美化

会改变 ol、ul、h1-h5 的样式
field 配置生效的区域

post 只在文章页生效
site 在全站生效
修改主题配置文件_config.butterfly.yml：

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

未开启美化

开启美化

自定义字体和字体大小

全局字体

可自行设置字体的 font-family
如不需要配置，请留空
修改主题配置文件_config.butterfly.yml：

font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog 标题字体

可自行设置字体的 font-family
如不需要配置，请留空
如不需要使用网络字体，只需要把 font_link 留空就行
修改主题配置文件_config.butterfly.yml：

1
2
3

blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。
修改主题配置文件_config.butterfly.yml：

# 主页subtitle
subtitle:
  enable: true
  # 打字效果
  effect: true
  # 循环或者只打字一次
  loop: false
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用搏天api的随机语录（简体） https://api.btstu.cn/
  # source: 2  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 3  调用一句网（简体） http://yijuzhan.com/
  # source: 4  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允许转义字元，如需要，请把整个句子用双引号包住
  # 例如 ”&quotNever put off till tomorrow what you can do today&quot"
  # 如果关闭打字效果，subtitle只会显示sub的第一行文字
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

主页 top_img 显示大小

默认的显示为全屏。site-info 的区域会居中显示
修改主题配置文件_config.butterfly.yml：

# 主页设置
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
index_site_info_top: # 主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height:  #主页top_img高度 例如 300px/300em/300rem  不能使用百分比

注意：index_top_img_height 的值不能使用百分比。

2 个都不填的话，会使用默认值

页面加载动画 preloader

当进入网页时，因为加载速度的问题，可能会导致 top_img 图片出现断层显示，或者网页加载不全而出现等待时间，开启 preloader 后，会显示加载动画，等页面加载完，加载动画会消失。
修改主题配置文件_config.butterfly.yml：

1	preloader: true

图片大图查看模式

fancybox

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

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

medium_zoom

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

1	medium_zoom: true

Snackbar 弹窗

Snackbar 弹窗，根据自己爱好开启
修改主题配置文件_config.butterfly.yml：

snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

Pjax

当用户点击链接，通过 ajax 更新页面需要变化的部分，然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。
这样可以不用重复加载相同的资源（css/js），从而提升网页的加载速度。
修改主题配置文件_config.butterfly.yml：

# 如果你有使用hexo-douban，可配置这个
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

Inject

如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，支持添加到 head ( 标籤之前) 和 bottom ( 标籤之前)。
请注意：以标準的 html 格式添加内容
修改主题配置文件_config.butterfly.yml：

inject:
  head:
  	- <link rel="stylesheet" href="/self.css">
  bottom:
  	- <script src="xxxx"></script>

留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
例如：网站是 https://creammint.cn/, 引用 css/xx.css，则设置为

1	<link rel="stylesheet" href="/blog/css/xx.css">

语言

导航菜单

代码

代码高亮主题

代码复制

代码展开/关闭

代码换行

社交图标

顶部图

page页

post页

文章置顶

文章封面

文章页相关配置

文章meta显示

文章版权

文章打赏

相关文章

文章锚点

复制相关配置

Footer 设置

项目年份

页脚自定义文本

ICP

侧边栏设置

侧边排版

访问人数

运行时间

Gallery 相册图库

增加图库

增加图库子页面

回答问题 tag-hide

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

Tabs标签页

Button

图片设置

站点图标

头像

主页封面图片

文章详情页的顶部图片

归档页顶部的图片

标签页顶部的图片

分类页顶部的图片

文章封面

错误图片

字数统计

文章节选

分享

AddThis

sharejs

AddToAny

广告

谷歌广告

手动广告

美化/特效

自定义主题色

网站背景

footer 背景

打字效果

背景特效

静止彩带

动态彩带

canvas-nest

鼠标点击效果

烟花

爱心

文字

页面美化

自定义字体和字体大小

全局字体

Blog 标题字体

网站副标题

主页 top_img 显示大小

页面加载动画 preloader

图片大图查看模式

fancybox

medium_zoom

Snackbar 弹窗

Pjax

Inject