📖 本文章的常规配置的都是基于Butterfly官方进行配置
🦋 Butterfly Version 3.0.0-rc2
Butterfly

语言

修改站点配置文件 _config.yml

默认语言是en

Butterfly主题支持三种语言 如下:

  • default(en)
  • zh-CN (簡體中文)
  • zh-TW (繁體中文)

网站资料

修改博客各种信息,例如标题、副标题和邮箱等个人信息,请修改博客根目录的 _config.yml

Butterfly

导航菜单

配置 butterfly.yml

menu:
首页: / || fa fa-home
时间轴: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
分类: /categories/ || fa fa-folder-open
清单||fa fa-heartbeat:
- 读书 || /books/ || fa fa-book
- 图库 || /Gallery/ || fa-fw fas fa-images
- 电影 || /movies/ || fa fa-film
友链: /link/ || fa fa-link
关于: /about/ || fa fa-heart

效果如图:

Butterfly

代码

代码高亮

Butterfly 有六种 高亮配置

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

效果如图:

Butterfly

代码复制

配置 butterfly.yml

highlight_copy: true

效果如图:

复制

Butterfly

代码展开/关闭

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

  • true 全部代码框不展开,需点击 > 打开
  • false 代码展开,有 > 点击按钮
  • none 不显示 > 按钮
highlight_shrink: true #代码框不展开,需点击 '>' 打开

效果如图:

Butterfly

图标

font-awesome v5 图标

Butterfly支持 font-awesome v5 图标

请参照 font-awesome v5 文档的写法

如图所示:

Butterfly

示例:

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

阿里图标 iconfont

由于 Font Awesome V5 是国外的图标网站对国内的一些图标不支持,所以需要需要可以使用阿里图标 iconfont

注册账号

打开 iconfont 的网站,点击导航栏的人像图标,会跳出注册界面,按要求注册账号。

Butterfly

新建项目

点击资源管理下拉菜单里面的,我的项目, 点击新建项目,填入相应的项目信息就行。

Butterfly

Butterfly

Butterfly

添加图标入库

选择自己需要的图标,把鼠标移到图标上,会显示三个按钮(依次是添加入库、收藏和下载),而我们需要的是把图标添加入库

Butterfly

添加入库后,你可以看到网站右上角购物车图标显示了1字,代表图标已经添加入库,点击购物车图标,会弹出侧边栏显示详情。

Butterfly

已选择的图标会显示在上面,你可以重复上面的操作,把需要的图标添加入库,然后点击添加到项目,接下来会要求选择项目名称。

生成 CSS 链接

在添加到项目之后,会跳到项目的详情界面,点击Font class,然后再点击暂无代码,点击生成文字,网站会自动生成 CSS 链接,我们只需要复制链接就行。

Butterfly

添加链接进主题配置文件

打开主题配置文件Butterfly.yml ,找到 inject 配置,按要求把链接填入

Butterfly

在我们需要使用的地方填入 icon,例如 Menu,图片使用格式为 iconfont icon名字

Butterfly

运行 Butterfly 之后,你就可以看到 menu 的图标生效了。

顶部图

主页顶部图

index_img: /image/index/index.png

效果如图:
Butterfly

归档页顶部图

archive_img: /image/archive/archive.png

page页顶部图

其他page页的顶部图可以在各自的 md 页面设置front-matter中的top_img

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

示例: 友链页面

Butterfly

效果如图:

Butterfly

post页顶部图

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

示例:Hexo——Butterfly主题配置

Butterfly

效果如图:

Butterfly

文章封面

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

如果不配置cover,则会默认显示主题配置文件中的default_cover

如果不想在首页显示cover, 可以设置为 false

cover:
# 是否显示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示
default_cover:

当配置多张图片时,会随机选择一张作为 cover. 此时写法应为

default_cover:
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

设置封面位置:both

效果如图:

Butterfly

主页文章节选

Butterfly主题支持自动节选文章页description

  1. description 只显示 description
  2. both 优先选择 description,如果没有配置 description,则显示自动节选的内容
  3. auto_excerpt 只显示自动节选
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config

descriptionfront-matter中配置

效果如图:

Butterfly

文章相关配置

这个模块主要配置首页以及文章页面展示的信息

修改主题配置文件

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 显示描述性文字

主页

效果如图:

Butterfly

文章页顶部

date_type: 显示创建时间和更新时间

categories: 显示分类

Butterfly

文章页底部

tags:显示标签

Butterfly

设置进入文章页面时,关闭TOC

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

toc:
enable: true
number: true
auto_open: false # auto open the sidebar

也可以在指定文章中的Front-matter中用true和false来配置

toc_number: true
toc: true
auto_open: true
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 单独设置

copyright: true

效果如图:

Butterfly

设置文章打赏

建议去看一下底部打赏图片的尺寸

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

效果如图:

Butterfly

开启文章推荐,并设置推荐为3篇
 
相关文章推荐的原理是根据文章 tags(标签) 的比重来推荐

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

Butterfly

关闭文章锚点

# anchor
# when you scroll in post , the url will update according to header id.
anchor: false

个人信息

头像

配置

头像描述

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

名字+icon