星海导航-探索优质网站的星辰大海 星海导航-探索优质网站的星辰大海
热门
立即入驻

Butterfly 主题美化（二）

默认1天前更新 haiyong
2 0 0

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

标签外挂（Tag Plugins）

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

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

Note (Bootstrap Callout)

{% tabs Note %}

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

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

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

icons 和 light_bg_offset 只对方法一生效

Note 标籤外挂有两种用法


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

{% note [default] [no-icon] [simple] %}
simple

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

{% note simple %}
默认 提示块标籤

{% note default simple %}
default 提示块标籤

{% note primary simple %}
primary 提示块标籤

{% note success simple %}
success 提示块标籤

{% note info simple %}
info 提示块标籤

{% note warning simple %}
warning 提示块标籤

{% note danger simple %}
danger 提示块标籤

{% note [default] [no-icon] [modern] %}
modern

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

{% note modern %}
默认 提示块标籤

{% note default modern %}
default 提示块标籤

{% note primary modern %}
primary 提示块标籤

{% note success modern %}
success 提示块标籤

{% note info modern %}
info 提示块标籤

{% note warning modern %}
warning 提示块标籤

{% note danger modern %}
danger 提示块标籤

{% note [default] [no-icon] [flat] %}
flat

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

{% note flat %}
默认 提示块标籤

{% note default flat %}
default 提示块标籤

{% note primary flat %}
primary 提示块标籤

{% note success flat %}
success 提示块标籤

{% note info flat %}
info 提示块标籤

{% note warning flat %}
warning 提示块标籤

{% note danger flat %}
danger 提示块标籤

{% note [default] [no-icon] [disabled] %}
disabled

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

{% note disabled %}
默认 提示块标籤

{% note default disabled %}
default 提示块标籤

{% note primary disabled %}
primary 提示块标籤

{% note success disabled %}
success 提示块标籤

{% note info disabled %}
info 提示块标籤

{% note warning disabled %}
warning 提示块标籤

{% note danger disabled %}
danger 提示块标籤


3.2.0 以上版本支持

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

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

{% 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 %}
前端最讨厌的浏览器

modern

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

{% 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 %}
前端最讨厌的浏览器

flat

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

{% 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 %}
前端最讨厌的浏览器

disabled

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

{% 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 %}
前端最讨厌的浏览器

no-icon

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

{% 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 %}
前端最讨厌的浏览器

{% endtabs %}

Gallery相册图库

2.2.0以上提供

一个图库集合，写法：

<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：图库封面的地址

例如：

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

Gallery相册

2.0.0以上提供

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

写法:

{% gallery %}
markdown 图片格式
{% endgallery %}

例如

{% gallery %}
![](https://www.xhnav.com/wp-content/uploads/2025/04/2dc09-maomao-1.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/aa1b2-maomao-2.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/4429b-maomao-3.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/cc588-maomao-4.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/21ed2-maomao-5.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/4b8c1-maomao-6.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/8b596-maomao-7.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/e0efa-maomao-8.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/741b5-maomao-9.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/397c9-maomao-10.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/74bc0-maomao-11.jpg)
![](https://www.xhnav.com/wp-content/uploads/2025/04/d3818-maomao-12.jpg)
{% endgallery %}

{% gallery %}











tag-hide

2.2.0以上提供

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

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

{% tabs tag-hide %}

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

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

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

Demo

金木水火土哪个腿最长？ {% hideInline 火腿长(因为火腿肠),查看答案,#FF7242,#fff %}

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

金木水火土哪个腿最长？ {% hideInline 火腿长(因为火腿肠),查看答案,#FF7242,#fff %}

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


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

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

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

Demo

查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案

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

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

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

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

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

{% endtabs %}

添加 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) 填写到配置上去就行：

twikoo:
  envId:
  region:
  visitor: false
  option:

然后设置评论应用为

comments:
  use: twikoo

最新评论

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

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

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

# 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
© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

什么是黑帽SEO？
haiyong
0
抽三位幸运儿送大号鼠标垫(3月31日20:00开奖)
haiyong
0
Google 2022 开发者大会活动集赞送周边
haiyong
0
在 Chrome 浏览器中安装 JSON 显示插件
haiyong
0
“切换右键模式成功🍔”,
haiyong
1
浏览器 HTTPS 协议的相关知识点有哪些？
haiyong
0

暂无评论

暂无评论...
添加小工具
点此为“正文侧边栏”添加小工具
星海导航(xhnav.com) | 极简高效的现代导航站，聚合10000+精选资源。智能分类涵盖编程工具、设计素材、学习平台及影视音乐游戏等休闲娱乐站点，支持多引擎搜索与生产力工具集成，学生/职场人士的上网首选。

摸鱼游戏关于我们站点博客隐私政策

  • 站点提交

    • QQ群：682921902星海导航-探索优质网站的星辰大海

    QQ群：682921902

    公众号：微信搜海拥星海导航-探索优质网站的星辰大海

    公众号：微信搜海拥
    站长微信海拥个人博客1500+网页游戏本站项目由海拥资源库托管海拥导航，1600+网址一站式轻松构建小程序、Web网站、移动应用CSDN掘金哔哩哔哩

    本站资源全部来源于网络，版权归原版权方所有

    如有侵犯您的权益请致邮1836360247#qq.com(#替换成@)撤下

    皖ICP备2021010710