本人博客的美化来自于以下大佬的教程。感谢各位大佬！

Ethan.Tzy古今之成大事者，不惟有超世之才，亦必有坚忍不拔之志
Fomalhaut🥝这是一段关于这个网站的描述文字
安知鱼生活明朗 万物可爱
ButterflyButterfly官方教程

换源

更换npm的默认源。默认源在国外，速度慢，更换为淘宝源。

1
2
3
4
5
#淘宝镜像源 
npm config set registry https://registry.npm.taobao.org

#默认源
npm config set registry https://registry.npmjs.org/

页面样式调节

通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

  1. 复制以下代码进去自定义的custom.css文件。如果没有，就在主题配置文件的/source/css目录下新建custom.css文件，文件中写入以下代码：
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
  1. 参数说明
  • --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；
  • --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;
  • --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
  • --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;
  • 可以根据自己的喜好进行调节。
  1. 主题配置文件_config.yml的inject配置项中引入该css文件。即把第三行添加到主题配置文件的inject中：
1
2
3
inject: 
  head:
  	- <link rel="stylesheet" href="/css/custom.css">

文章双侧栏显示

  1. 在博客根目录下打开终端，输入以下指令，安装插件：
1
npm i hexo-butterfly-article-double-row --save
  1. 在网站配置文件_config.yml新增以下项：
1
2
butterfly_article_double_row:
  enable: true
  1. 在主题文件夹下的/source/css/custom.css文件添加以下代码。没有该文件的自己建一个。如果是新建的文件，别忘了在站点配置文件中引入该css文件。方法见上一节的第三部分。
1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}
  1. hexo命令
1
2
3
hexo c
hexo g
hexo s

一图流

顶图、页脚图、背景图完全使用一张图。

  1. 打开主题文件的source/css文件夹下的custom.css，如果没有该文件就新建一个，文件中加入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}
  1. 在主题配置文件的yml文件中的inject配置项的head子项中引入该文件：
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  1. 更改主题配置文件_config.butterfly.yml文件中的index_img和footer_bg配置取消头图和页脚图的加载项。

取消头图和页脚图的加载项后，默认的桌面头图和页脚图就会使用主题配置文件中的# Website Background中的background:设置的图片

1
2
3
4
5
# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

文章双侧栏显示

  1. 博客根目录打开终端，安装插件:
1
npm i hexo-butterfly-article-double-row --save

2.网站配置文件_config.yml增加以下代码：

1
2
butterfly_article_double_row:
  enable: true
  1. 为了避免在文章数量为奇数时,翻页按钮错位的问题，打开主题文件中的source/css文件夹下的custom.css，如果没有该文件就新建一个,在文件中加入以下代码。(如果是新建的，别忘了在主题配置文件中引入该css文件)
1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

个人卡片渐变色

  1. 打开主题文件中的source/css文件夹下的custom.css，如果没有该文件就新建一个,在文件中加入以下代码:
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
51
52
53
54
55
56
57
58
59
60
61
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
  background: linear-gradient(
    -45deg,
    #e8d8b9,
    #eccec5,
    #a3e9eb,
    #bdbdf0,
    #eec1ea
  );
  box-shadow: 0 0 5px rgb(66, 68, 68);
  position: relative;
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: #3eb8be;
  border-radius: 8px;
}
  1. 如果是新建css文件的，别忘了在主题配置文件中引入该css文件。

文章置顶

插件hexo-generator-index已经支持文章置顶功能，可以直接在文章的front-matter区域添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

豆瓣插件

专为butterfly主题定制的豆瓣插件hexo-butterfly-douban已废弃。这里安装通用版。

  1. 安装hexo-douban插件。
1
npm install hexo-douban --save
  1. 打开站点配置文件_config.yml,写入以下内容：
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
douban:
  id: xxxxx
  builtin: false
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
    option:
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    option:
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
    option:
  song:
    path: songs/index.html
    title: 'This is my song title'
    quote: 'This is my song quote'
    option:
  timeout: 10000
参数释义:
参数 解释
id 你的豆瓣ID(纯数字格式).打开豆瓣，登录账号，然后在右上角点击“个人主页” ，此时地址栏的URL大致是这样的：" https://www.douban.com/people/xxxxxx/ " ，其中的“xxxxxx”就是你的个人ID了
builtin 是否将hexo douban命令默认嵌入进hexo g、hexo s，使其自动执行hexo douban 命令。默认关闭。当你的豆瓣条目较多时，也建议关闭
item_per_page 每页展示的条目数，默认10
meta_max_line 每个条目展示的详细信息的最大行数，超过该行数则会以 “…” 省略，默认4
customize_layout 自定义布局文件。默认值为 page 。无特别需要，留空即可。若配置为 abcd，则表示指定 //theme/hexo-theme/layout/abcd.ejs 文件渲染豆瓣页面
path 生成页面后的路径，默认生成在 //yourblog/books/index.html 等下面。如需自定义路径，则可以修改这里
title 该页的标题
quote 写在页面开头的一段话，支持 html 语言法。
timeout 【可选】刷取数据的超时时间，默认为10000ms，如果在使用时发现超时的错误(ETIMEOUT)可以把这个数据设置的大一点
option 该页面额外的 Front-matter 配置，参考Hexo文档。无特别需要，留空即可
  1. 主题配置文件 _config.butterfly.yml添加豆瓣的菜单
1
2
3
4
5
6
7
menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page
  Games: /games   #This is your games page
  Songs: /songs   #This is your songs page

文章加密

实现对文章加密的功能,也支持按标签加密。
完整用法查看该插件GitHub仓库：

1
npm install --save hexo-blog-encrypt

将 “password” 字段添加到您文章信息头:

1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---
1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

可以在文章的front matter里进行设置，也可以在站点配置文件_config.yml里添加全局设置。
两者的优先级为front matter > 站点配置文件设置
站点配置文件设置：

1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
  abstract: Here's something encrypted, password is required to continue reading.
  message: Hey, password is required here.
  tags:
  - {name: encryptAsDiary, password: passwordA}
  - {name: encryptAsTips, password: passwordB}
  wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
  wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
  theme: xray

外挂标签

  1. 安装插件。在博客文件根目录下打开终端，输入以下命令：
1
npm install hexo-butterfly-tag-plugins-plus --save
  1. 原来的markdown渲染器对外挂标签语法兼容性差，因此将其卸载，替换为新的。
1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 添加配置信息，在站点配置文件或者主题配置文件里加入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    # iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

  1. 参数释义
参数 备选值/类型 释义
enable true/false 【必选】控制开关
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issues true/false 【可选】issues标签控制开关，默认为false
link.placeholder 【必选】link卡片外挂标签的默认图标
CDN.anima URL 【可选】动画标签anima的依赖
CDN.jquery URL 【可选】issues标签依赖
CDN.issues URL 【可选】issues标签依赖
CDN.iconfont URL 【可选】iconfont标签symbol样式引入，如果不想引入，则设为false
CDN.carousel URL 【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
CDN.tag_plugins_css URL 【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号

分栏 Tabs

这里只介绍自定义Tab名 + 只有icon + icon和Tab名的方法，也是我们最常用的方法。其余方法详见：Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

渲染效果:

tab名字為第一個Tab

只有圖標 沒有Tab名字

名字+icon

Note (Bootstrap Callout)

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）

例如：

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

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）

例如：

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

剪刀石头布

前端最讨厌的浏览器

tag-hide

请注意，tag-hide内不建议有文章标题。因为目录会把隐藏内容标题页显示出来。而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致目录的滚动出现异常。

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

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

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

1
{% hideInline content,display,bg,color %}

  • content: 文本内容

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

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

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

例如：

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

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

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

门里站着一个人? 闪

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

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

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

例如：

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

查看答案

傻子，怎么可能有答案

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

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

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

例如：

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

label

文字高亮。

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

例如：

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

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

时间轴 timeline

时间线。用法：

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

参数释义：

参数 解释
title 标题/时间线
color timeline 颜色
default(留空) / blue / pink / red / purple / orange / green

例如：

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

2022

01-02

这是测试页面

01-06

这是测试页面2

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  • 带 下划线 的文本
  • 带 着重号 的文本
  • 带 波浪线 的文本
  • 带 删除线 的文本
  • 键盘样式的文本 command + D
  • 密码样式的文本：这里没有验证码
1
2
3
4
5
6
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  • 字体: logo, code
  • 颜色:red,yellow,green,cyan,blue,gray
  • 大小: small, h4, h3, h2, h1, large, huge, ultra
  • 对齐方向: left, center, right
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center large, Butterfly %}
{% span center small, A Wonderful Theme for Hexo %}
  • 彩色文字:
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字:
    文档「开始」页面中的标题部分就是超大号文字。
    Butterfly
    A Wonderful Theme for Hexo

github卡片 ghcard

1
2
{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

使用,分割各个参数。写法为：参数名=参数值
以下只写几个常用参数值。

参数名 取值 释义
hide stars,commits,prs,issues,contribs 隐藏指定统计
count_private true 将私人项目贡献添加到总提交计数中
show_icons true 显示图标
theme 查阅:Available Themes 主题
  1. 用户信息卡片
1
2
3
| {% ghcard WShuai123 %} | {% ghcard WShuai123, theme=vue %} |
| -- | -- |
| {% ghcard WShuai123, theme=buefy %} | {% ghcard WShuai123, theme=solarized-light %} |
  1. 仓库信息卡片
1
2
3
| {% ghcard anuraghazra/github-readme-stats %} | {% ghcard anuraghazra/github-readme-stats, theme=vue %} |
| -- | -- |
| {% ghcard anuraghazra/github-readme-stats, theme=buefy %} | {% ghcard anuraghazra/github-readme-stats, theme=solarized-light %} |
  1. 用户信息卡片
  1. 仓库信息卡片

按钮 btns

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：round,circle
  2. 增加文字样式：可以在容器内增加<b>标题</b>和<p>描述文字</p>
  3. 布局方式:默认为自动宽度，适合视野内只有一两个的情况

参数释义：

参数 含义
wide 宽一点的按钮
fill 填充布局，自动铺满至少一行，多了会换行
center 居中，按钮之间是固定间距
around 居中分散
grid2 等宽最多2列，屏幕变窄会适当减少列数
grid3 等宽最多3列，屏幕变窄会适当减少列数
grid4 等宽最多4列，屏幕变窄会适当减少列数
grid5 等宽最多5列，屏幕变窄会适当减少列数
  1. 5列含有头像的链接
1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell WShuai's Blog, https://hexo.nice2cu.cc, https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp %}
{% cell WShuai's Blog, https://hexo.nice2cu.cc, https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp %}
{% cell WShuai's Blog, https://hexo.nice2cu.cc, https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp %}
{% cell WShuai's Blog, https://hexo.nice2cu.cc, https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp %}
{% cell WShuai's Blog, https://hexo.nice2cu.cc, https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp %}
{% endbtns %}
  1. 含有图标的按钮
1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, https://hexo.nice2cu.cc, fas fa-download %}
{% cell 查看文档, https://hexo.nice2cu.cc, fas fa-book-open %}
{% endbtns %}
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% btns circle center grid5 %}
<a href='https://hexo.nice2cu.cc'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 专业版 %}
  <img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://hexo.nice2cu.cc'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
  1. 5列含有头像的链接
WShuai's Blog WShuai's Blog WShuai's Blog WShuai's Blog WShuai's Blog
  1. 含有图标的按钮
下载源码 查看文档
  1. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
心率管家

专业版

 心率管家

免费版

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

参数释义：

  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
  3. 占位背景色：bg=#f2f2f2
  1. 添加描述
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}
  1. 指定宽度
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
  1. 指定宽度并添加描述：
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
  1. 设置占位背景色：
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}
  1. 添加描述
<center>每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。
  1. 指定宽度
  1. 指定宽度并添加描述：
<center>每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。
  1. 设置占位背景色：
<center>优化不同宽度浏览的观感
优化不同宽度浏览的观感

行内图片 inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}

高度：height=20px

1
2
3
这是 {% inlineimage https://bu.dusays.com/2022/05/19/628532706842d.gif %} 一段话。

这又是 {% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %} 一段话。

这是 一段话。

这又是 一段话。

音频 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频 video

1
{% video 视频链接 %}

参数：

  1. 对齐方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  1. 100%宽度
1
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
  1. 50%宽度
1
2
3
4
5
6
{% videos, 2 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% endvideos %}
  1. 25%宽度
1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% video https://txmov2.a.yximgs.com/upic/2022/11/13/21/BMjAyMjExMTMyMTQxNThfMjk1MTM4ODg1MV84ODY2ODQ2MzE3NV8wXzM=_b_B5980ab28f909cff50f35f4b4b1c8c298.mp4 %}
{% endvideos %}
  1. 100%宽度
  1. 50%宽度
  1. 25%宽度
  1. gallerygroup 相册图库
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>
  1. gallery 相册
1
2
3
{% gallery %}
markdown 圖片格式
{% endgallery %}
  1. gallerygroup 相册图库
参数名 释义
name 图库名字
description 图库描述
link 链接到对应相册的地址
img-url 图库封面
  1. gallery 相册
    区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）
  1. gallerygroup 相册图库
    博客需要hexo new page新建页面。
    见该网址教程：https://butterfly.js.org/posts/4aa8abbe/#Gallery相冊圖庫
1
2
3
4
<div class="gallery-group-main">
{% galleryGroup 杨超越 超越妹妹🌙🌙🌙 '/gallery/MC/' https://img1.baidu.com/it/u=2524712316,1807247056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313 %}
{% galleryGroup 塞尔达 塞尔达是天！ '/gallery/Gundam/' https://img0.baidu.com/it/u=203837462,2183030100&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500 %}
</div>
  1. gallery 相册
1
2
3
4
{% gallery %}
![](https://img0.baidu.com/it/u=3268418677,55694813&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750)
![](https://img1.baidu.com/it/u=2895807031,1843209133&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1199)
{% endgallery %}
  1. gallerygroup 相册图库
    因为我没hexo new page 命令新建文件，因此渲染出来只有封面图，点进去是空白页。
Group Image Gallery
杨超越

超越妹妹🌙🌙🌙

Group Image Gallery
塞尔达

塞尔达是天！

  1. gallery 相册





折叠框 folding

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://bu.dusays.com/2022/05/19/628533399e7a1.jpg)
{% endfolding %}

参数释义：

  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
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
{% folding 查看图片测试 %}

![](https://bu.dusays.com/2022/05/19/628533399e7a1.jpg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://bu.dusays.com/2022/05/19/62853244cef33.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

诗词标签 poem

1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}
水调歌头
苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

气泡注释 bubble

1
{% bubble [content] , [notation] ,[background-color] %}

参数释义：

  1. content: 注释词汇
  2. notation: 悬停显示的注解内容
  3. background-color: 可选，气泡背景色。默认为“#71a4e3”,蓝色。
1
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

隐藏块

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

参数释义：

  • content：要隐藏的内容
  • display：展示前按钮显示的文字（可选）
  • bg：按钮的背景颜色（可选）
  • color：按钮显示的文字的颜色（可选）。可以选择颜色的英文，比如blue,也可以输入颜色的代码，比如#71a4e3。
1
2
3
4
{% hideBlock 点我预览, #71a4e3 %}
这里有张图片：
<img src="https://imgs.nice2cu.cc/i/2023/11/12/xq4gkb.webp" style="zoom: 25%;" />
{% endhideBlock %}

这里有张图片：

侧边栏电子时钟

  1. 安装新版电子钟插件hexo-butterfly-clock。如果安装了旧版的hexo-butterfly-clock插件,npm命令卸载，再安装新版的：
1
npm install hexo-butterfly-clock-anzhiyu --save
  1. 在站点配置文件_config.yml或主题配置文件中添加配置信息：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
  clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
  clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  # 和风天气key 默认是 b16a1fa0e63c46a4b8f28abfb06ae3fe
  qweather_key: # 你的key
  # 高得地图web服务key 默认为 e2b04289e870b005374ee030148d64fd&s=rsv3
  gaud_map_key: # 你的key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置
参数释义:
参数 备选值/类型 释义
priority priority 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
exclude path 【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type id/class 【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.name text 【必选】挂载容器名称
layout.index 0 和正整数 【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
loading URL 【可选】电子钟加载动画的图片
clock_css URL 【可选】电子钟样式 CDN 资源
clock_js URL 【可选】电子钟执行脚本 CDN 资源
ip_api URL 【可选】获取时钟 IP 的 API
qweather_key text 【可选】和风天气 key
gaud_map_key text 【可选】高德地图 web 服务 key
default_rectangle text 【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
rectangle text 【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置

站点地图 sitemap 生成与使用

1
2
npm install hexo-generator-sitemap --save # google站点地图生成
npm install hexo-generator-baidu-sitemap --save # 百度站点地图生成
  • 站点配置文件_config.yml中加入以下代码,生成名为sitemap.xml的谷歌站点地图和名为baidusitemap.xml的百度站点地图
1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
  • hexo clean & hexo generate,生成sitemap。能在博客根目录的public文件夹中找到站点地图的文件。
  • 打开Google Search Console网站
  • 在网址前缀输入你的博客地址。例如，我的就是：https://hexo.nice2cu.cc/
  • 验证所有权建议使用第二种：HTML标记
  • 复制HTML标记方法里谷歌提供的代码的最后的双引号部分
  • 打开博客的主题配置文件_config.butterfly.yml
  • 将刚刚复制的代码粘贴到site_verification中的 google-site-verification的content后面
1
2
3
site_verification:
  - name: google-site-verification
    content: ********** # 粘贴到这里
  • hexo命令将博客更新到GitHub。
  • 回到Google Search Console，点击验证，即可验证成功。
  • 打开Google Search Console,点击索引里的站点地图，输入sitemap.xml,即生成的站点地图的名称，点击提交。
    注意：若您的博客未使用自定义域名可能会导致提交失败，建议博客使用自定义域名。
  • 与谷歌的配置方法相似，百度站长平台 ,同样使用HTML标记方法验证。同样需要复制到主题配置文件，
1
2
3
site_verification:
  - name: baidu-site-verification
    content: ************ # 粘贴到这里
  • hexo命令将博客上传到GitHub，在百度站长平台验证。
  • 打开百度站长平台，点击资源提交的普通收录，选择sitmap
  • 填写数据文件地址，例如：https://hexo.nice2cu.cc/baidusitemap.xml ,即自己的域名后加xml名称，检查无误后点击提交
  • 提交后下方会显示文件名称，状态为等待。等待几天百度就会进行提取。

百度主动推送

百度sitemap收录很慢，所以使用主动推送可以使博客在向GitHub推送的同时也向百度推送，使百度更快的收录。

博客根目录，打开终端，输入以下命令:

1
npm install hexo-baidu-url-submit --save
  • 打开站点配置文件_config.yml,添加以下代码：
1
2
3
4
5
baidu_url_submit:
  count: 10                     	  ## 提交最新的5个链接
  host: https://hexo.nice2cu.cc/     ## 百度站长平台中注册的域名
  token: ****************           ## 准入秘钥
  path: baidu_urls.txt              ## 文本文档的地址， 新链接会保存在此文本文档里

准入密钥在百度站长平台中获取。进入站长平台，点击左侧的普通收录，选择API提交。token就是百度提供的接口调用地址的最后一部分。

  • 打开站点配置文件_config.yml，在deploy:中加入百度推送：
1
2
3
4
5
deploy:
- type: git
  repo: https://github.com/WShuai123/wshuai123.github.io.git
  branch: main
- type: baidu_url_submitter # 添加这一行

配置成功后，博客根目录执行hexo c & hexo g & hexo d,推送博客文件
当显示INFO Deploy done: baidu_url_submitter时表示推送成功。

文章固定编号链接

Hexo 默认的静态 url 格式是：:year/:month/:day/:title，也就是按照年、月、日、文章标题来生成固定链接的。如：http://id.github.io/2022/11/23/hello-world
使用 Abbrlink 插件可以使每篇文章都有一个唯一的编号，并将文章的链接用这个编号唯一区别，这样链接中不会出现中文，也不会因为修改文章的日期而导致链接的改变。