hexo使用

流程

在git bash中跳转到hexo的博客文件夹,输入

1
2
$ hexo new test
INFO Created: ~\desktop\hexo\blog\source\_posts\test.md

找到该文章,打开,使用Markdown语法

注意每次generate之前最好清除掉之前的缓存。

1
$ hexo clean

编辑完成后,执行以下命令(简写hexo g / hexo s)

1
$ hexo generate
1
2
3
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开http://localhost:4000/,文章已经成功发布。

然后发布到github上,执行以下命令(简写hexo d)

1
$ hexo deploy

草稿

1
$ hexo new (post)

其实是省略了post的写法,会新生成一个post页面。

如果暂时不想发布,只想作为草稿编辑的话,应使用

1
$ hexo new draft XXX

通过以下命令查看带草稿页面的hexo预览。

1
$ hexo server --draft

通过以下命令将草稿页面publish到正式的post文件中,并自动添加发布时间。

1
$ hexo pubulish XXX newXXX 

butterfly使用

butterfly v3.0.0 地址迁移至Butterfly - A Simple and Card UI Design theme for Hexo

以下内容均转自Butterfly - A Simple and Card UI Design theme for Hexo小弋の生活馆全样式预览 | 小弋の生活馆以及 Hexo博客之butterfly主题优雅魔改系列(持续更新) | 小康博客,相关内容可自行去各位大佬博客查询。

渐变色

直接生成即可。彩色渐变字HTML代码生成器

标签外挂(note)

主题自带note

主题自带的标签。

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

另一种note

实现起来也很简单,只是对简单的 p 标签进行修改,为了方便添加颜色,这里提供了以上五种配色的样式。

使用起来也会简单,为了兼容各种平台,不推荐 tag 标签的写法。因此只又 html 标签的写法。这样做的好处是即便复制到各大平台也不会出现奇奇怪怪的标签符号或者报错。

note 效果展示:

绿色

红色

黄色

灰色

蓝色

小 tag 标签效果展示:

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

渐变note(上标式外挂标签)

因为标签外挂的语法会导致复制到其他平台不便利,因此建议使用 HTML 写法。

默认情况

success

error

warning

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

动画标签

各种标签也可以用html的方式配合上动画,变成动画标签,效果还是比较夸张的!!!

默认情况

success

error

warning

volantis 主题的 note

因为标签外挂的语法会导致复制到其他平台不便利,因此只提供 HTML 写法。

默认 red

info

done

success

danger

error

radiation

bug

idea-yellow

paperclip

todo

msg cyan

guide

download

up

undo

小标题

Windows 10不是为所有人设计,而是为每个人设计

嵌套测试

请坐和放宽,我正在帮你搞定一切…

隐藏按钮(tag-hide )

主题自带的隐藏按钮。

inline

哪個英文字母最酷? 因為西裝褲(C裝酷)

門裏站着一個人?

block

傻子,怎麼可能有答案

toggle

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

标签

简单的:

This is Tab 1.

This is Tab 2.

This is Tab 3.

带图标的:

tab名字為第一個Tab

只有圖標 沒有Tab名字

名字+icon

复选框

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮

文内按钮

This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC

独占一行的按钮

JerryC JerryC JerryC

一行多个实心按钮

JerryC JerryC JerryC JerryC JerryC JerryC JerryC

一行多个空心按钮

动画图标

起源于看到Sakura主题的Font Awesome动态图标很好看,例如主页图标,研究了一下,原来是一个开源的css代码,只要引入即可!

自动动画

hover动画

Mermaid

画流程图、甘特图、饼状图等,代码绘图。 Mermaid

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

流程图

各类形状框

1
2
3
4
5
6
7
8
9
10
11
graph LR
A(A)
B[B]
C{C}
D((D))
E>E]
F{{F}}
G[/G/]
H[\H\]
I[/I\]
J[\J/]
graph TB A(A) B[B] C{C} D((D)) E>E] F G[/G/] H[\H\] I[/I\] J[\J/]

流程图

1
2
3
4
5
6
7
8
graph TB
A[把大象放进去] --> B{"冰箱大小?"}
B -- 大 --> C[关冰箱门]
B -->|小| D[换大冰箱]
E -. 虚线 .- F
G -. 虚线箭头 .-> H
style E fill:#f9f,stroke:#333,stroke-width:4px
style G fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
graph TB A[把大象放进去] --> B{"冰箱大小?"} B -- 大 --> C[关冰箱门] B -->|小| D[换大冰箱] E -. 虚线 .- F G -. 虚线箭头 .-> H style E fill:#f9f,stroke:#333,stroke-width:4px style G fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
1
2
3
4
5
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

饼图

1
2
3
4
5
6
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5