欢迎来到我的博客! 这里是我的第一篇文章。（其实是一份hexo给的文章模板）点击这里 以查看更多官方的文档配置信息。 如果有关于hexo相关的问题可以去这个网站找找答案 ，或者可以去GitHub的issues区主动提问。

0. 目前的技术路线

当前博客网站端采用了github pages静态托管，并且用vercel备用托管，采用hexo框架，butterfly模板，推库部分采用VSCode的终端用hexo指令，利用git推库到github。

先前编辑博客是直接基于VSCode编辑的，利用VSCode的MarkDown插件和open in web插件进行预览，边编辑边预览，编辑好直接用终端推库。但是这样插入图片始终不是很方便，因为github仓库存量有限，拿来存图片过于浪费，而且速度还慢，因此还是选用了smms图床作为图片存储方式，本地备份一个本地图床，并对每个md文件都进行了图床编号来定位。

24/5/10下载了PicGo，用秘钥配置链通了PicGo和smms图床，并且购买了Typora，配置了Typora和PicGo的链接。现在图片在Typora中直接插入，就可以通过PicGo直接传到smms图床，省了很多麻烦。并且Typora编辑md文件也还可以，相对干净一些，就是推库还得跑到VSCode的终端去推库。为了避免博主老年痴呆，所以在开头先记一下。（感觉还是VSCode编辑好使啊）

1. 部署快捷指令

1.1 创建一篇新文章

1
$ hexo new "My New Post"

更多信息: Writing

1.2 跑一跑服务器看看

1
$ hexo server

or

1
hexo s

更多信息: Server

1.3 生成静态文件

1
$ hexo generate

or

1
hexo g

更多信息: Generating

1.4 部署到远程站点

1
$ hexo deploy

or

1
hexo d

更多信息: Deployment

1.5 常用指令组合(hexo四连)

注意，以下几个指令必须在路径：blog-demo下的终端进行调度。

1
2
3
hexo cl;hexo s          //本地端口浏览网页
hexo cl;hexo g;hexo d   //推库到GitHub Pages上
//hexo三连是最为常用的推库指令，如果推库失败(FATAL)，可能是路径问题和网络问题，请检查当前终端窗口路径是BLOG-DEMO，且没有打开备份的项目文件，并开启魔法再推库。

2. 外挂标签语法 (Tag Plugins)

本节内容搬运自作者: Jerry
本家連結: https://butterfly.js.org/posts/2df239ce/#mermaid

2.1 居中标签

1
<center>LaTex菜单</center>

使用center标签，可以使该标签居中，常用于图片图名。

2.2 行中按钮（Inline）

1
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,,outline%}

效果如下：
This is my website, click the button Butterfly

2.3 文末按钮（Block）

1
2
3
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block blue larger %}
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block center blue larger %}
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block right blue larger %}

效果如下：
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

2.4 彩虹选项按钮（Option）

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

效果如下：

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

2.5 便签贴（Note）

默認 提示塊標籤

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

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

{% 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
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 提示塊標籤

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 提示塊標籤

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

这下面是一些可以指定图标的写法：

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

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

剪刀石頭布

前端最討厭的瀏覽器

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

剪刀石頭布

前端最討厭的瀏覽器

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

剪刀石頭布

前端最討厭的瀏覽器

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

2.6 分栏（Tab）

1
2
3
4
5
6
7
8
9
{% tabs 分栏名 %}
<!-- tab 栏目一-->

<!-- endtab -->
<!-- tab 栏目二-->

<!-- endtab -->
{% endtabs %}

2.7 文本包裹（Toggle）

1
2
3
{% folding 包裹名称 %}

{% endfolding %}

2.8 点击显示隐藏内容

欸嘿

3. 一些基础文本格式（Markdown）

3.1 字体/按键/链接/高亮

斜体
粗体
删除线
ctrl+alt+del
I’m an inline-style link
高亮用反引号

1
2
3
4
5
6
*斜体*
**粗体**
~~删除线~~
<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
[I'm an inline-style link](https://www.google.com)
`高亮`用`反引号`

3.2 代码高亮/表格/块(嵌套)/视频链接

1
2
var s = "JavaScript syntax highlighting";
alert(s);
ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’

创建一个块

块的嵌套

是小视频哦

1
2
3
4
5
6
7
8
9
10
11


|                |ASCII                          |HTML                         |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'`            |'Isn't this fun?'            |

>创建一个块
>>块的嵌套

---
[![是小视频哦](https://i0.hdslb.com/bfs/archive/0d8ba5d21377b7d572eacb50472a9fed319cd36d.jpg)](https://www.bilibili.com/video/BV1Ho4y1K7cV)

4. 一些命令行常用指令

这里记录一些系统中常用的命令行指令。
dir 查询当前目录
cls 清除窗口信息
cd 打开某个目录
node -v 查询Node.js的版本