给大家安利一个免费且实用的计算机知识刷题(面经大全)网站,👉点击跳转到网站

标签外挂(Tag Plugins)

标籤外挂是Hexo独有的功能,并不是标準的Markdown格式。
以下的写法,只适用于Butterfly主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意

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

Note (Bootstrap Callout)

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

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

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 提示块标籤

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
6
7
8
<div class="gallery-group-main">
{% galleryGroup '水果忍者' 'HTML5版水果忍者游戏,一代人的回忆' 'https://wanghao221.github.io/shuiguorenzhe/' https://img-blog.csdnimg.cn/597e2faaf824460fb37994a599e62181.png %}
{% galleryGroup '捕鱼达人' 'HTML5版捕鱼达人,一代人的回忆' 'https://wanghao221.github.io/buyudaren/' https://img-blog.csdnimg.cn/b2df78e1762141389fbd44a4832c7295.png %}
{% galleryGroup '第三人称射击游戏' '你有十条命,杀死所有的敌人' 'https://haiyong.site/moyu/SpaceHuggers/' https://img-blog.csdnimg.cn/b9accc6538e048688c6f28da31337587.png %}
{% galleryGroup '过马路小游戏' 'three实现三维路上过马路避让汽车游戏代码(键盘的上下左右键也可以哦)' 'https://haiyong.site/moyu/guomalu.html' https://img-blog.csdnimg.cn/47b18439c18542baae9a1a993127a6ca.png %}
{% galleryGroup '2048' 'by the 原 2048 的灵感' 'https://haiyong.site/moyu/2048.html' https://img-blog.csdnimg.cn/099a9303476a468c8997b9d0163e8bcf.png %}
{% galleryGroup '五子棋' '尝试一下和人工智能下五子棋' 'https://haiyong.site/moyu/wuziqi.html' https://img-blog.csdnimg.cn/df51977576604dd0bcac1f7ef2f5f9a0.png %}
</div>

Gallery相册

2.0.0以上提供

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

写法:

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

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% gallery %}
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-1.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-2.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-3.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-4.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-5.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-6.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-7.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-8.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-9.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-10.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-11.jpg)
![](https://haiyong.site/bizhi/maomaotupianku/img/maomao-12.jpg)
{% 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 火腿长(因为火腿肠),查看答案,#FF7242,#fff %}

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

金木水火土哪个腿最长? 火腿长(因为火腿肠)</span>

门里站着一个人? </span>

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

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

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

Demo

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

查看答案

傻子,怎么可能有答案

2.3.0以上支持
如果你需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。

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

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安装方法 %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安装方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

添加 Twikoo 评论

Twikoo 是一个简洁、安全、无后端的静态网站评论系统,基于腾讯云开发。

Vercel 部署

参考自 Twikoo 中文文档 ,Vercel 免费部署方式:查看视频教程

1.申请 MongoDB (opens new window) 账号。
2.创建免费 MongoDB 数据库,区域推荐选择 AWS / N. Virginia (us-east-1)
3.在 Clusters 页面点击 CONNECT,按步骤设置允许所有 IP 地址的连接(为什么? (opens new window)),创建数据库用户,并记录数据库连接字符串,请将连接字符串中的 修改为数据库密码
4.申请 Vercel (opens new window) 账号
5.点击以下按钮将 Twikoo 一键部署到 Vercel
(opens new window)
6.进入 Settings - Environment Variables,添加环境变量 MONGODB_URI,值为第 3 步的数据库连接字符串
7.进入 Overview,点击 Domains 下方的链接,如果环境配置正确,可以看到 “Twikoo 云函数运行正常” 的提示
8.Vercel Domains(包含 https:// 前缀,例如 https://xxx.vercel.app)即为您的 环境ID (envId)

前端部署

修改主题配置文件 [Blogroot]\_config.butterfly.yml,你只需要把获取到 Vercel 的 环境ID (envId) 填写到配置上去就行:

1
2
3
4
5
twikoo:
envId:
region:
visitor: false
option:

然后设置评论应用为

1
2
comments:
use: twikoo