Hexo Butterfly 主题标签外挂
标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。
以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意
标签外挂虽然能为主题带来一些额外的功能和 UI 方面的强化，但是，标签外挂也有明显的限制，使用时请留意。
Note 提示框(Bootstrap Callout)
主题配置文件：
1 | # Note - Bootstrap 提示框 |
icons 和 light_bg_offset 只对方法一生效
Note 标签外挂有两种用法
1 | {% note [class] [no-icon] [style] %} |
| 名称 | 用法 |
|---|---|
| class | 【可选】标识，不同的标识有不同的配色 （ default / primary / success / info / warning / danger ） |
| no-icon | 【可选】不显示 icon |
| style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |
style为：simple
1 | {% note simple %} |
默认 提示块标签
1 | {% note default simple %} |
default 提示块标签
1 | {% note primary simple %} |
primary 提示块标签
1 | {% note info simple %} |
info 提示块标签
1 | {% note warning simple %} |
warning 提示块标签
1 | {% note danger simple %} |
danger 提示块标签
style为：modern
1 | {% note modern %} |
默认 提示块标签
1 | {% note default modern %} |
default 提示块标签
1 | {% note primary modern %} |
primary 提示块标签
1 | {% note success modern %} |
success 提示块标签
1 | {% note info modern %} |
info 提示块标签
1 | {% note warning modern %} |
warning 提示块标签
style为：flat
1 | {% note flat %} |
默认 提示块标签
1 | {% note default flat %} |
default 提示块标签
1 | {% note primary flat %} |
primary 提示块标签
1 | {% note success flat %} |
success 提示块标签
1 | {% note info flat %} |
info 提示块标签
1 | {% note warning flat %} |
warning 提示块标签
1 | {% note danger flat %} |
danger 提示块标签
style为：disabled
1 | {% note disabled %} |
默认 提示块标签
1 | {% note default disabled %} |
default 提示块标签
1 | {% note primary disabled %} |
primary 提示块标签
1 | {% note success disabled %} |
success 提示块标签
1 | {% note info disabled %} |
info 提示块标签
1 | {% note warning disabled %} |
warning 提示块标签
style为：no-icon
1 | {% note no-icon %} |
1 | {% note default no-icon %} |
1 | {% note primary no-icon %} |
1 | {% note success no-icon %} |
1 | {% note info no-icon %} |
1 | {% note warning no-icon %} |
1 | {% note danger no-icon %} |
仅支持3.2.0以上版本支持
1 | {% note [color] [icon] [style] %} |
| 名称 | 用法 |
|---|---|
| color | 【可选】顔色 (default / blue / pink / red / purple / orange / green) |
| icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) |
| style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |
style为：simple
1 | {% note 'fab fa-cc-visa' simple %} |
你是刷 Visa 还是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
style为：modern
1 | {% note 'fab fa-cc-visa' modern %} |
你是刷 Visa 还是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
style为：flat
1 | {% note 'fab fa-cc-visa' flat %} |
你是刷 Visa 还是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
style为：disabled
1 | {% note 'fab fa-cc-visa' disabled %} |
你是刷 Visa 还是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
style为：no-icon
1 | {% note no-icon %} |
Gallery 相册图库
一个图库集合，写法：
1 | <div class="gallery-group-main"> |
| 参数 | 解释 |
|---|---|
| name | 图库名字 |
| description | 图库描述 |
| link | 连接到对应相册的地址 |
| img-url | 图库封面的地址 |
示例
1 | <div class="gallery-group-main"> |
Gallery 相册
区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。
写法:
1 | {% gallery [button] %} |
| 参数 | 解释 |
|---|---|
| button | 【可选】点击按钮加载更多图片，填写 true/false。默认为 false。 |
示例
1 | {% gallery %} |
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]
写法：
1 | {% gallery url,[link],[button] %} |
| 参数 | 解释 |
|---|---|
| url | 【必须】 识别词 |
| link | 【必须】远程的 json 链接 |
| button | 【可选】点击按钮加载更多图片，填写 true/false。默认为 false。 |
远程链接 Json 的例子：
有三个参数，url是必须存在的，alt 和 title 可有可无。
1 | [ |
示例：
1 | {% gallery url,https://xxxx.com/sss.json %} |
Tag-hide标签隐藏
2.2.0 以上提供
请注意，tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 Toc 的滚动出现异常。
如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
inline
inline
inline 在文本里面添加按钮隐藏内容，只限文字
( content 不能包含英文逗号，可用‚)
1 | {% hideInline content,display,bg,color %} |
| 参数 | 解释 |
|---|---|
| content | 文本内容 |
| display | 【可选】按钮显示的文字 |
| bg | 【可选】按钮的背景颜色 |
| color | 【可选】按钮文字的颜色 |
示例
1 | 哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} |
哪个英文字母最酷？
门里站着一个人?
block
Block
block独立的 block 隐藏内容，可以隐藏很多内容，包括图片，代码块等等
( display 不能包含英文逗号，可用‚)
1 | {% hideBlock display,bg,color %} |
| 参数 | 解释 |
|---|---|
| content | 文本内容 |
| display | 【可选】按钮显示的文字 |
| bg | 【可选】按钮的背景颜色 |
| color | 【可选】按钮文字的颜色 |
示例
1 | 查看答案 |
查看答案
Toggle
Toggle
2.3.0 以上支持
如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。
( display 不能包含英文逗号，可用‚)
1 | {% hideToggle display,bg,color %} |
| 参数 | 解释 |
|---|---|
| display | 显示的文字 |
| bg | 【可选】背景颜色 |
| color | 【可选】文字的颜色 |
例子
1 | {% hideToggle Butterfly安装方法 %} |
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
Mermaid图标绘制
使用 mermaid 标签可以绘制 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看mermaid 文档
更改主题配置文件:
1 | # Mermaid |
写法：
1 | {% mermaid %} |
示例饼图：
1 | {% mermaid %} |
pie title 产品X的关键要素 "钙" : 42.96 "钾" : 50.05 "镁" : 10.01 "铁" : 5
示例思维导图：
1 | {% mermaid %} |
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
Tabs栏目
使用方法：
1 | {% tabs Unique name, [index] %} |
| 参数 | 解释 |
|---|---|
| Unique name | tabs 区块标签的唯一名称，不包含逗号。将用于每个选项卡的 #id 前缀，并附加其索引号。若名称中有空格，生成 #id 时会将空格替换为短横线。仅对当前文章/页面的 URL 必须唯一！ |
| [index] | 【可选】活动选项卡的索引号。如果未指定，将选择第一个选项卡（1）。如果索引为 -1，则不会选择任何选项卡，类似于折叠内容。可选参数。 |
| [Tab caption] | 当前选项卡的标题。如果未指定标题，将使用唯一名称和选项卡索引后缀作为选项卡标题。如果未指定标题，但指定了图标，标题将为空。 |
| [@icon] | 【可选】FontAwesome 图标名称（全名，如 ‘fas fa-font’）。可以有或没有空格；例如 ‘Tab caption @icon’ 与 ‘Tab caption@icon’ 类似。 |
示例 1 - 预设选择第一个【默认】
1 | {% tabs test1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例 2 - 预设选择第3个tabs
1 | {% tabs test2, 3 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例 3 - 没有预设值
1 | {% tabs test3, -1 %} |
This is Tab 1.
This is Tab 2.
This is Tab 3.
示例 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名
1 | {% tabs test4 %} |
tab 名字为第一个 Tab
只有图标 没有 Tab 名字
名字+icon
Button按钮
使用方法：
1 | {% 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/留空 |
示例：
1 | 点击按钮进入我的网站 {% btn 'https://blog.3ms.run/',Butterfly %} |
点击按钮进入我的网站 Butterfly
点击按钮进入我的网站 Butterfly
点击按钮进入我的网站 Butterfly
点击按钮进入我的网站 Butterfly
点击按钮进入我的网站 Butterfly
按钮对齐位置
1 | {% btn 'https://blog.3ms.run/',Butterfly,far fa-hand-point-right,block %} |
自定义按钮颜色
实心按钮
1 | {% btn 'https://blog.3ms.run/',Butterfly,far fa-hand-point-right,larger %} |
空心按钮
1 | <div class="btn-center"> |
InlineImg图像以内联元素显示
Butterfly主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。
1 | {% inlineImg [src] [height] %} |
参数：
| 参数 | 解释 |
|---|---|
| src | 图片链接 |
| height | 【可选】图片高度限制 |
示例
1 | 你看她长得漂亮不 |
你看她长得漂亮不
我觉得很漂亮
Label 高亮所需的文字
由于 hexo 的渲染限制， 在段落开头使用 label 标签外挂会出现一些问题。例如：连续开头使用 label 标签外挂的段落无法换行
建议 不要 在段落开头使用 label 标签外挂
用法：
1 | {% label text color %} |
| 参数 | 解释 |
|---|---|
| text | 文字 |
| color | 【可选】背景颜色，默认为 default default/blue/pink/red/purple/orange/green |
示例：
1 | 臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。 |
臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
Timeline 时间线
使用方法：
1 | {% timeline title,color %} |
| 参数 | 解释 |
|---|---|
| title | 标题/时间线 |
| color | timeline 颜色 default(留空) / blue / pink / red / purple / orange / green |
示例：
1 | {% timeline 2022 %} |
2022
01-02
这是测试页面
1 | {% timeline 2022,blue %} |
2022
01-02
这是测试页面
1 | {% timeline 2022,pink %} |
2022
01-02
这是测试页面
1 | {% timeline 2022,red %} |
2022
01-02
这是测试页面
1 | {% timeline 2022,purple %} |
2022
01-02
这是测试页面
1 | {% timeline 2022,orange %} |
2022
01-03
这是测试页面
01-02
这是测试页面
1 | {% timeline 2022,green %} |
2022
01-02
这是测试页面
Flink 在任何界面插入类似友链的效果
可在任何界面插入类似友情链接列表效果
内容格式与友情链接界面一样，支持 yml 格式
1 | {% flink %} |
示例：
1 | {% flink %} |
ABCJS 乐谱
在页面上渲染乐谱
修改主题配置文件：
1 | # abcjs (乐谱渲染) |
| 参数 | 解释 |
|---|---|
| enable | 是否启用 ABCJS |
| per_page | 是否每页都加载 ABCJS, 如果设爲 false, 在你使用 ABCJS 时，你需要在使用 ABCJS 的页面 Front-matter 添加 abcjs: true |
写法：
1 | {% score %} |
示例：
1 | {% score %} |
Series 系列文章
在页面上显示系列文章
修改配置文件：
1 | series: |
| 参数 | 解释 |
|---|---|
| enable | 是否启用 series |
| orderBy | 排序方式，默认为 title, 可选 title / date |
| order | 排序方式，默认为 1, 可选 1 (升序) / -1（降序） |
| number | 显示序列号 |
写法：
1 | {% series %} |
在文章的 front-matter 上添加参数 series，并给与一个标识
使用此标签外挂，会把相同标识的文章以列表的形式展示
如果不写 series 标识，则默认为你使用此标签外挂所在的文章的 series 标识
示例：
1 | {% series test1 %} |
Chartjs 图表
另一种方式添加图表
修改配置文件：
1 | # chartjs |
| 参数 | 解释 |
|---|---|
| enable | 是否启用 chartjs |
| fontColor | 图表的字体颜色 |
| borderColor | 图表的边框颜色 |
| scale_ticks_backdropColor | 雷达和极区图表的刻度标签的背景颜色 |
写法：
1 | {% chartjs [width, abreast, chartId] %} |
| 参数 | 解释 |
|---|---|
| width | 【可选】图表宽度 |
| abreast | 【可选】是否并排显示，当你写了 <!-- desc -->, 使用并排模式，图标和描述将并排显示。 abreast 为 true 时，需要配置 width 的值 |
| chartId | 【可选】图表 ID |
示例：
1 | {% chartjs 70 %} |
{
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "My First dataset",
"backgroundColor": "rgb(255, 99, 132)",
"borderColor": "rgb(255, 99, 132)",
"data": [0, 10, 5, 2, 20, 30, 45]
}]
},
"options": {
"responsive": true,
"title": {
"display": true,
"text": "Chart.js Line Chart"
}
}
}
1 | {% chartjs %} |
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [
{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
1 | {% chartjs 40,true %} |
{
"type": "pie",
"data": {
"labels": [
"编程",
"音乐",
"阅读",
"游戏",
"健身",
"旅游"
],
"datasets": [
{
"label": "喜爱指数",
"data": [
30,
24,
19,
14,
9,
4
],
"backgroundColor": {
"dark-mode": [
"rgba(255, 99, 132, 0.5)",
"rgba(54, 162, 235, 0.5)",
"rgba(255, 206, 86, 0.5)",
"rgba(75, 192, 192, 0.5)",
"rgba(153, 102, 255, 0.5)",
"rgba(255, 159, 64, 0.5)"
],
"light-mode": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
]
},
"borderColor": {
"dark-mode": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"light-mode": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
]
}
}
]
},
"options": {
"plugins": {
"legend": {
"labels": {
"color": {
"dark-mode": "rgba(255, 255, 255, 0.8)",
"light-mode": "rgba(0, 0, 0, 0.8)"
}
}
}
}
}
}
除了计算机编程外，我想不出还有其他让我感兴趣的工作。
我可以无中生有地创造出精美的范式和结构，
在此过程中也解决了无数的小谜团。
I can’t think of any other job other than computer programming that interests me.
I can create beautiful paradigms and structures out of nothing,
Countless small mysteries are also solved in the process.
网址卡片外置标签（魔改后）
使用方法：
1 | {% link [title],[desc],[url] %} |
| 参数 | 解释 | |
|---|---|---|
| title | 【必须】链接标题 | |
| desc | 【必须】描述副标题 | |
| [url | 【必须】链接地址 |
示例：
1 | {% link '3MS 's Blog',Daliyuer,https://blog.3ms.run%} |
引用站外地址，不保证站点的可用性和安全性
3MS 's Blog
Daliyuer
语雀同款链接卡片（魔改后）
使用方法：
1 | <!-- 使用html是为了高亮代码，不必在意 --> |
| 参数 | 描述 | 默认值 |
|---|---|---|
| 链接 | 如果连接中包含http则新标签打开，否则本标签页打开 | 无 |
| 标题 | 网站的标题 | 点击直达链接 |
| 图标 | 网站favicon链接 | |
| 介绍 | 网站的description | 无 |
示例：
1 | {% yqlink https://blog.3ms.run,Daliyuer,,进一寸有进一寸的欢喜。 %} |
Daliyuer
进一寸有进一寸的欢喜。
打赏卡片标签(魔改)
使用方法：
1 | <!-- 使用html是为了高亮代码，不必在意 --> |
参数：
| 参数 | 描述 | 默认值 |
|---|---|---|
| 名字 | 这还需要描述？ | 匿名 |
| 金额 | 这也不需要描述吧 | 0.00 |
| 时间 | 直接填就行，不填则不显示 | 无 |
| 渠道 | 打赏渠道。可填：qq、wx、zfb，其他渠道留空即可 | |
| 头像 | 图片链接，可以直接填QQ号获取QQ头像 | |
| 链接 | 打赏者的网站链接，设置之后卡片会变成a标签，可点击 | 无 |
| 是否友链 | 1表示是，0或者不填表示不是 | 无 |
完整示例
1 | {% reward ZeroLatency,66.66,2023-01-01,qq,990320751,https://blog.3ms.run/,1 %} |
友链
ZeroLatency
66.66￥ 2023-01-01
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 ZeroLatency！
- 微信
- 支付宝
相关推荐
2025-03-11
Hexo+Butterfly主题更详细的Front-matter
Front-matter 是文件开头的 YAML 或 JSON 代码块，用于配置写作设置。 以 YAML 格式书写时，Front-matter 以三个破折号结束；以 JSON 格式书写时，Front-matter 以三个分号结束。 使用方式YAML1234---title: Hello Worlddate: 2013/7/13 20:46:25--- JSON123"title": "Hello World","date": "2013/7/13 20:46:25";;; 文章的 Front-matter 写法 解释 title 【必需】文章标题 文章的文件名 date 【必需】文章创建日期 updated 【可选】文章更新日期 tags 【可选】文章标签 categories 【可选】文章分类 sticky 【可选】文章置顶，sticky:...
2025-03-22
Butterfly主题博客魔改美化教程总览（一）
本帖教程基于Hexo博客程序的 Butterfly主题编写 ，其中魔改/美化内容大部分收集至各位大神的博客以及网络。 由于每位用户的根目录名称各不相同，本文中博客的根目录将统一使用[BlogRoot]这一标识符表示。 其中配置文件_config.yml，其路径为【BlogRoot/_config.yml】。 主题的配置文件_config.butterfly.yml进行相应修改，该文件位于【BlogRoot/_config.butterfly.yml】路径下。 本文包含有关修改源代码的内容，将会使用diff代码块来标记变更。在复制这些代码段时，请记得移除前面的加号（+）和减号（-）符号，其中（+）号代码添加的代码，（-）代表这整行代码需要删除。 自定义CSS/JS方法CSS：在[BlogRoot]/source/css/目录下新建：daliyuer.css，名称可自定义。 JS：在[BlogRoot]/source/js/目录下新建：daliyuer.js，名称可自定义。 如没有 css跟 js...
2025-04-14
Hexo使用gulp压缩博客Html+CSS+JS静态资源
Gulp作为前端工作流的自动化工具，能够高效处理各类静态资源压缩任务。通过其丰富的插件生态系统，开发者可以实现： CSS文件的极致压缩 JavaScript代码的智能优化 HTML文档的轻量化处理 字体文件的按需提取 注意：虽然Gulp支持图片压缩，但相比专业的图片优化工具如imagine、tinypng等，其压缩效果有限（通常仅能减少几十KB），因此本文不包含图片压缩相关内容。 环境准备：Gulp安装与配置基础安装步骤 全局安装Gulp命令行工具： 1npm install --global gulp-cli #全局安装gulp指令集 项目本地安装Gulp： 1npm install gulp --save 安装各个下属插件以实现对各类静态资源的压缩 各类资源压缩方案详解HTML压缩方案推荐插件组合： 123npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev#...
2025-03-15
使用Hexo+Github搭建个人博客部署到Vercel并使用Github Action自动化编译部署
这篇文章将教大家如何搭建Hexo博客程序，并部署到Github Pages+Vercel并通过Github Action自动化部署编译。 无需每次重复运行Hexo三件套命令，随着文章越来越多，编译的时间也随之越来越长，所以我们可以通过Github Action实现自动化部署，当我们博客需要更新时，你只需要将改动直接push到远程仓库，之后的编译部署的工作统交给CI来完成即可。 准备工作请提前安装（准备）好以下软件，不会的请自行百度，有很多教程。 电脑：Windows或者Mac Node Js(建议使用 Node.js 12.0 及以上版本)：点击前往下载 Git：点击前往下载 Guthub账号：点击前往注册 Vercel：点击前往注册 域名一个（可选） 本地安装Hexo 打开 CMD（终端） 命令框输入如下命令安装 1npm install -g hexo-cli 2. 安装完后输入hexo...
2025-05-08
本站同款 Butterfly 自定义页脚
系列文章Butterfly主题博客魔改美化教程总览（一）Hexo使用gulp压缩博客Html+CSS+JS静态资源本站同款 Butterfly 自定义页脚给Butterfly主题文章顶部添加波浪效果 预览效果 教程开始打开主题目录：[BlogRoot]/themes/butterfly/layout/includes/footer.pug修改原本的代码为以下代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263#footer-wrap #ft .ft-item-1 .t-top .t-t-l p.ft-t.t-l-t 格言🧬 .bg-ad div | 再看看那个光点，它就在这里，这是家园，这是我们 ——...
2025-03-22
给Butterfly主题文章顶部添加波浪效果
本文简要介绍如何在Hexo博客的Butterfly主题中，为每篇文章顶部添加一个动态波浪效果。 效果图： 教程开始修改主题目录： themes/butterfly/layout/includes/header/index.pug 在： 123if top_img !== false if is_post() include ./post-info.pug 代码后面添加如下代码，+是要添加的部分，记得删除前面的+号。 123456789101112131415161718if top_img !== false if is_post() include ./post-info.pug+ section.main-hero-waves-area.waves-area+ svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28',...
评论
系列文章