语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)

网站资料

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

导航栏设置 (Navigation bar settings)

参数设置

主题配置文件

1
2
3
4
nav:
logo: #image
display_title: true
fixed: false # fixed navigation bar
参数
解释
logo 网站的 logo,支持图片,直接填入图片链接
display_title 是否显示网站标题,填写 true 或者 false
fixed 是否固定状态栏,填写 true 或者 false

菜单/目录

修改 主题配置文件

1
2
3
4
5
6
7
8
9
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/,后面||分开,然后写图标名。

如果不希望显示图标,图标名可不写。

默认子目录是展开的,如果你想要隐藏,在子目录里添加 hide

1
2
3
List||fas fa-list||hide:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video

注意: 导航的文字可自行更改

代码 (Code Blocks)

代码块中的所有功能只适用于 Hexo 自带的代码渲染

如果使用第三方的渲染器,不一定会有效

代码高亮主题

Butterfly 支持6种代码高亮样式:

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

修改 主题配置文件

1
highlight_theme: light

代码复制

主题支持代码复制功能
修改 主题配置文件

1
highlight_copy: light

代码框展开/关闭

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

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

代码换行

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

1
code_word_wrap: true 

代码高度限制

3.7.0 及以上支持

可配置代码高度限制,超出的部分会隐藏,并显示展开按钮。

1
highlight_height_limit: false # unit: px

注意:

  1. 单位是 px,直接添加数字,如 200

  2. 实际限制高度为 highlight_height_limit + 30 px ,多增加 30px 限制,目的是避免代码高度只超出highlight_height_limit 一点时,出现展开按钮,展开没内容。

  3. 不适用于隐藏后的代码块( css 设置 display: none)

社交图标 (Social Settings)

Butterfly支持 font-awesome v6 图标.

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

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

pc:

Mobile:

头像

修改 主题配置文件

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

顶部图

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

顶部图的获取顺序,如果都没有配置,则不显示顶部图。

  1. 页面顶部图的获取顺序:

各自配置的 top_img > 配置文件的 default_top_img

  1. 文章页顶部图的获取顺序:

各自配置的 top_img > cover > 配置文件的 default_top_img

配置中的值:

配置
解释
index_img 主页的 top_img
default_top_img 默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面 的 默认 top_img
tag_per_img tag 子页面的 top_img,可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img,可配置每个 category 的 top_img

其它页面 (tags/categories/自建页面)和 文章页 的 top_img ,请到对应的 md 页面设置front-matter中的top_img

文章封面

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

如果不配置 cover,可以设置显示默认的 cover

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

文章封面的获取顺序 Front-mattercover > 配置文件的 default_cover > false

1
2
3
4
5
6
7
8
9
10
cover:
# 是否显示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示
default_cover:
参数
解释
index_enable 主页是否显示文章封面图
aside_enable 侧栏是否显示文章封面图
archives_enable 归档页面是否显示文章封面图
position 主页卡片文章封面的显示位置
- left:全部显示在左边
+ right:全部显示在右边
- both:封面位置以左右左右轮流显示
default_cover 默认的 cover, 可配置图片链接/顔色/渐变色等

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

1
2
3
4
default_cover:
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png

页面 meta 显示

这个选项是用来显示文章的相关信息的。

修改 主题配置文件

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

主页文章节选(自动节选和文章页description)

因为主题UI的关係,主页文章节选只支持自动节选文章页description

butterfly里,有四种可供选择

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

页面锚点

开启页面锚点后,当你在进行滚动时,页面链接会根据标题ID进行替换
(注意: 每替换一次,会留下一个历史记录。所以如果一篇文章有很多锚点的话,网页的历史记录会很多。)

修改 主题配置文件

1
2
3
4
5
6
7
8
# anchor
# when you scroll in post , the url will update according to header id.
anchor:
button:
enable: false
always_show: false
icon: # the unicode value of Font Awesome icon, such as '\3423'
auto_update: false # when you scroll in post, the URL will update according to header id.

图片描述

可开启图片Figcaption描述文字显示

优先显示图片的 title 属性,然后是 alt 属性

修改 主题配置文件

1
photofigcaption: true

复制相关配置

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

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
enable: true
copyright:
enable: true
limit_count: 50
配置
解释
enable 是否开启网站复制权限
copyright 复制的内容后面加上版权信息
enable 是否开启复制版权信息添加
limit_count 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息

文章页相关配置

文章版权

为你的博客文章展示文章版权和许可协议。

修改 主题配置文件

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

由于Hexo 4.1开始,默认对网址进行解码,以至于如果是中文网址,会被解码,可设置decode: true来显示中文网址。

如果有文章(例如:转载文章)不需要显示版权,可以在文章Front-matter单独设置

1
copyright: false

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

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

文章打赏

在你每篇文章的结尾,可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的,可配置一张软件的icon图片,然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。

link可以不写,会默认为图片的链接。

修改 主题配置文件

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

TOC

在文章页,会有一个目录,用于显示TOC。
修改 主题配置文件

1
2
3
4
5
6
7
toc:
post: true
page: true
number: true
expand: false
style_simple: false # for post
scroll_percent: true
属性
解释
post 文章页是否显示 TOC
page 普通页面是否显示 TOC
number 是否显示章节数
expand 是否展开 TOC
style_simple 简洁模式(侧边栏只显示 TOC, 只对文章页有效 )
scroll_percent 是否显示滚动进度百分比

为特定的文章配置

在你的文章md文件的头部,加入toc_numbertoc,并配置true或者false即可。

主题会优先判断文章Markdown的Front-matter是否有配置,如有,则以Front-matter的配置为准。否则,以主题配置文件中的配置为准

相关文章

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

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

修改 主题配置文件

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

文章分页按钮

当文章封面设置为 false 时,或者没有获取到封面配置,分页背景将会显示主题色。

可设置分页的逻辑,也可以关闭分页显示

1
2
3
4
5
6
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false
参数
解释
post_pagination: false 关闭分页按钮
post_pagination: 1 下一篇显示的是旧文章
post_pagination: 2 下一篇显示的是新文章

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
owner:
enable: true
since: 2023
```

### 页脚自定义文本

`custom_text`是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

修改 `主题配置文件`
``` yml
custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

对于部分人需要写 ICP 的,也可以写在 custom_text

1
custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号:xxxxxx</span></a>

侧边栏设置 (aside)

侧边排版

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

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/xxxxxx
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
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
orderby: random # Order of tags, random/name/length
order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
sort_order: # Don't modify the setting unless you know how it works
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
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works

访问人数 busuanzi (UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
busuanzi:
site_uv: true
site_pv: true
page_pv: true
```

如果需要修改 busuanzi CDN 链接,可通过 `主题配置文件` `CDN` 中的 `option` 进行修改
```yml
CDN:
option:
busuanzi: xxxxxxxxx

运行时间

网页已运行时间

修改 主题配置文件

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

最新评论

3.1.0 起支持

最新评论只会在刷新时才会去读取,并不会实时变化

由于 API 有 访问次数限制,为了避免调用太多,主题默认存取期限为 10 分钟。也就是説,调用后资料会存在 localStorage 里,10分钟内刷新网站只会去 localStorage 读取资料。 10 分钟期限一过,刷新页面时才会去调取 API 读取新的数据。( 3.6.0 新增了 storage 配置,可自行配置缓存时间)

在侧边栏显示最新评论板块

修改 主题配置文件

1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
enable: true
sort_order: # Don't modify the setting unless you know how it works
limit: 6
storage: 10 # unit: mins, save data to localStorage
avatar: true

部分配置解释:

配置
解释
limit 显示的数量
storage 设置缓存时间,单位 分钟
avatar 是否显示头像

自定义添加栏目

右下角按钮 (Bottom right button)

简繁转换
简体繁体互换

右下角会有简繁转换按钮。

修改 主题配置文件

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: "简"

閲读模式

閲读模式下会去掉除文章外的内容,避免干扰閲读。

只会出现在文章页面,右下角会有閲读模式按钮。

修改 主题配置文件

1
readmode: true

夜间模式

右下角会有夜间模式按钮

修改 主题配置文件

1
2
3
4
5
6
7
8
9
# dark mode
darkmode:
enable: true
# dark mode和 light mode切换按钮
button: true
autoChangeMode: false
# Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
start: # 8
end: # 22
参数
解释
button 是否在右下角显示日夜模式切换按钮
autoChangeMode 自动切换的模式
autoChangeMode: 1 跟随系统而变化,不支持的浏览器/系统将按照时间 start 到 end 之间切换为 light mode
autoChangeMode: 2 只按照时间 start 到 end 之间切换为 light mode ,其余时间为 dark mode
autoChangeMode: false 取消自动切换
start light mode 的开始时间
end light mode 的结束时间

滚动状态百分比

修改 主题配置文件

1
2
# show scroll percent in scroll-to-top button
rightside_scroll_percent: true

按钮排序

1
2
3
4
5
6
7
# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
enable: false
hide: # readmode,translate,darkmode,hideAside
show: # toc,chat,comment

标签外挂(Tag Plugins)

标签外挂是Hexo独有的功能,并不是标准的Markdown格式。

以下的写法,只适用于Butterfly主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意

标签外挂虽然能为主题带来一些额外的功能和UI方面的强化,但是,标签外挂也有明显的限制,使用时请留意。

Note (Bootstrap Callout)

移植于next主题,并进行修改。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
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
# 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

iconslight_bg_offset只对方法一生效

Note 标签外挂有两种用法`

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称
用法
class 【可选】标识,不同的标识有不同的配色
( default / primary / success / info / warning / danger )
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
(simple/modern/flat/disabled)

simple

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
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern

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
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

{% note success modern %}
success 提示块标签
{% endnote %}

{% note info modern %}
info 提示块标签
{% endnote %}

{% note warning modern %}
warning 提示块标签
{% endnote %}

{% note danger modern %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

flat

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
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

disabled

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
{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default disabled %}
default 提示块标签
{% endnote %}

{% note primary disabled %}
primary 提示块标签
{% endnote %}

{% note success disabled %}
success 提示块标签
{% endnote %}

{% note info disabled %}
info 提示块标签
{% endnote %}

{% note warning disabled %}
warning 提示块标签
{% endnote %}

{% note danger disabled %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon

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
{% note no-icon %}
默认 提示块标签
{% endnote %}

{% note default no-icon %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success no-icon %}
success 提示块标签
{% endnote %}

{% note info no-icon %}
info 提示块标签
{% endnote %}

{% note warning no-icon %}
warning 提示块标签
{% endnote %}

{% note danger no-icon %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

3.2.0 以上版本支

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称
用法
color 【可选】顔色
(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style
simple/modern/flat/disabled)

simple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

modern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

flat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

disabled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
这是三片呢?还是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢?还是四片?
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

Gallery相册图库

2.2.0以上提供

一个图库集合。
写法

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>

Gallery相册

2.0.0 以上提供

区别于旧版的Gallery相册,新的 Gallery 相册会自动根据图片长度进行排版,书写也更加方便,与 markdown 格式一样。可根据需要插入到相应的 md。

写法:

1
2
3
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}
参数
解释
lazyload 【可选】点击按钮加载更多图片,填写 true/false。默认为 false。
rowHeight 【可选】图片显示的高度,如果需要一行显示更多的图片,可设置更小的数字。默认为 220。
limit 【可选】每次加载多少张照片。默认为 10。

示例

1
2
3
4
5
6
7
8
9
10
11
{% gallery %}
markdown 图片格式
{% endgallery %}

{% gallery true,220,10 %}
markdown 图片格式
{% endgallery %}

{% gallery true,,10 %}
markdown 图片格式
{% endgallery %}

写法:

1
2
{% gallery url,[link],[lazyload],[rowHeight],[limit] %}
{% endgallery %}
参数
解释
url 【必须】 识别词
link 【必须】远程的 json 链接
lazyload 【可选】点击按钮加载更多图片,填写 true/false。默认为 false。
rowHeight 【可选】图片显示的高度,如果需要一行显示更多的图片,可设置更小的数字。默认为 220。
limit 【可选】每次加载多少张照片。默认为 10。

远程链接 Json 的例子
有三个参数,url是必须存在的,alttitle 可有,也可没有。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
{
"url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0556.jpg",
"alt": "IMG_0556.jpg",
"title": "这是title"
},
{
"url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0472.jpg",
"alt": "IMG_0472.jpg"
},
{
"url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0453.jpg",
"alt": ""
},
{
"url": "https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0931.jpg",
"alt": ""
}
]

示例

1
2
3
4
5
6
7
8
{% gallery url,https://xxxx.com/sss.json %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,220,10 %}
{% endgallery %}

{% gallery url,https://xxxx.com/sss.json,true,,10 %}
{% endgallery %}

tag-hide 隐藏标签

2.2.0以上提供

请注意,tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致Toc的滚动出现异常。

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

inline 在文本里面添加按钮隐藏内容,只限文字

( content不能包含英文逗号,可用&sbquo;)

1
{% hideInline content,display,bg,color %}
  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

demo

1
2
3
哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

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

门里站着一个人?

block独立的block隐藏内容,可以隐藏很多内容,包括图片,代码块等等

( display 不能包含英文逗号,可用&sbquo;)

  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子,怎么可能有答案
{% endhideBlock %}

查看答案

傻子,怎么可能有答案

mermaid-绘图

使用mermaid标签可以绘制Flowchart(流程图)Sequence diagram(时序图 )Class Diagram(类别图)State Diagram(状态图)Gantt(甘特图)Pie Chart(圆形图),具体可以查看mermaid文档
修改主题配置文件

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark

写法:

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

移植于next主题

使用方法

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

自定义Tab名 + 只有icon + icon和Tab名

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

3.0以上适用

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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/留空

demo

1
2
3
4
5
6
7
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://blog.luoaicheng.cn/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

inlineImg

主题中的图片都是默认以块级元素显示,如果你想以内联元素显示,可以使用这个标签外挂。

1
2
3
4
{% inlineImg [src] [height] %}

[src] : 图片链接
[height] : 图片高度限制【可选】

demo

1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

你看我长得漂亮不

我觉得很漂亮

label

3.7.5 及以上版本适用
高亮所需的文字

1
{% label text color %}
参数
解释
text 文字
color 【可选】背景颜色,默认为 default
default/blue/pink/red/purple/orange/green

demo

1
2
臣亮言:{% label 先帝 %}创业未半,而{% label 中道崩殂 blue %}。今天下三分,{% label 益州疲敝 pink %},此诚{% label 危急存亡之秋 red %}也!然侍衞之臣,不懈于内;{% label 忠志之士 purple %},忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %},及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。

臣亮言:先帝 创业未半,而中道崩殂 。今天下三分,益州疲敝 ,此诚危急存亡之秋 也!然侍衞之臣,不懈于内;忠志之士 ,忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科 ,及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。

timeline - 时间线

4.0.0 以上支持

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
参数
解释
title 标题/时间线
color timeline 颜色

Demo

1
2
3
4
5
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

这是测试页面

4.1.0 支持

可在任何界面插入类似友情链接列表效果

内容格式与友情链接界面一样,支持 yml 格式

1
2
3
{% flink %}
xxxxxx
{% endflink %}

Demo

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
{% flink %}
- class_name: 友情链接
class_desc: 那些人,那些事
link_list:
- name: JerryC
link: https://jerryc.me/
avatar: https://jerryc.me/img/avatar.png
descr: 今日事,今日毕
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的网志框架

- class_name: 网站
class_desc: 值得推荐的网站
link_list:
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 视频网站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中国最大社交分享平台
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台
{% endflink %}

abcjs 乐谱

在页面上渲染乐谱

修改 主题配置文件

1
2
3
4
5
6
# abcjs (乐谱渲染)
# See https://github.com/paulrosen/abcjs
# ---------------
abcjs:
enable: true
per_page: true

写法:

1
2
3
{% score %}
乐谱代码
{% endscore %}

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% score %}
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
"Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
{% endscore %}
Butterfly 安装文档(四) 主题配置-2