【Hexo】个人使用手册
前言
本文记录自己在使用 Hexo 过程中,常用的标签、命令等,其中也包括 Git 、Hexo 等命令及发布文章的相关流程,旨在便于自己查阅。其中,文章主要有三大部分:标签、Hexo及Git命令、使用流程。
快速开始
标签
Page Front-Matter
页面的文件头配置文件,区别于文章的部分,文章的文件存放在 _Post 目录下。
Type | Explanation | Example |
---|---|---|
title | 标题 | title: hello, world |
date | 创建日期,默认系统时间 | date: 2020-7-19 |
updated | 更新日期,默认再次创建日期 | update: 2020-7-20 |
type | 页面类型,tags、link、categories 这三个页面需要配置 | type: tags |
comments | 是否显示评论,默认 true | comments: false |
description | 描述,没使用过,暂时不太清楚效果 | – |
top_img | 顶部图,默认为系统default配置的图 | top_img: 图片URL或者博客相对路径 |
mathjax | 数学公式是否显示,默认为 false ,不显示 | mathjax: true |
katex | 数学公式是否显示,默认为 false ,不显示 | mathjax: true |
aside | true 表示显示右边信息卡片,默认值;false 表示不显示 | aside: true |
aplayer | 在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置 | – |
highlight_shrink | 配置代码框是否展开,默认为设置中 highlight_shrink 的配置 | – |
Post Front-Matter
文章的文件头配置文件。
Type | Explanation | Example |
---|---|---|
title | 标题 | title: Hello,World! |
date | 创建日期,默认系统时间 | date: 2020-7-19 |
updated | 更新日期,默认再次创建日期 | update: 2020-7-20 |
tags | 标签,用 - 列出标签,一个 - 表示一个标签,注意换行以及 - 后面有个空格 | – |
categories | 分类,同样用 - 区别多个分类,注意换行以及 - 后面有个空格 | – |
keywords | 关键字 | keywords: ‘a, b’ |
description | 描述,没使用过,暂时不太清楚效果 | – |
top_img | 顶部图,可选项,不写则按缩略图的图片显示 | top_img: 图片URL或者博客中图片的相对路径 |
comments | 是否显示评论,默认 true。 | comments: false |
cover | 缩略图 | cover: 图片URL或者博客中图片的相对路径 |
toc | 是否显示 toc ,默认 true 显示 | toc: false |
toc_number | 是否显示 toc 数字,默认 true 显示 | toc_number: false |
auto_open | 是否自动打开 TOC (默认为设置中 toc 的 auto_open 配置) | – |
copyright | 是否显示版权,默认 true 显示 | copyright: false |
mathjax | 数学公式是否显示,默认为 false ,不显示 | mathjax: true |
katex | 数学公式是否显示,默认为 false ,不显示 | mathjax: true |
hidden或hide | 是否隐藏,需安装hide或者indexed插件,true表示隐藏 | hidden: true |
sticky | 文章置顶,数值越大越靠前,需安装indexed插件,默认值为0 | sticky: 10 |
top | 文章置顶,需安装index-pin-top 插件,默认值为false,同时为置顶则按时间先后顺序 | top: true |
aplayer | 在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置 | – |
highlight_shrink | 配置代码框是否展开,默认为设置中 highlight_shrink 的配置 | – |
常用外挂标签
Tabs
index 可以设置优先级,-1 表示默认不展示
使用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.注意,使用该标签的时候不要随意使用制表键,避免不对齐的情况!
样例
This is Tab 1.
This is Tab 2.
This is Tab 3.
1
2
3
4
5
6
7
8
9
10
11
12
13{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Tag-hide
2.2.0以上提供
注意,tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来,而且当滚动屏幕时,如果隐藏内容没有显示出来,会导致Toc的滚动出现异常。
这个标签可以用于隐藏某些文字或代码块,点击后展现。该标签有以下三种样式:
使用方法
1
{% hideInline content,display,bg,color %}
- content: 文本内容
- display: 按钮显示的文字(可选)
- bg: 按钮的背景颜色(可选)
- color: 按钮文字的颜色(可选)
本标签仅可用于隐藏文字。注意,( content不能包含英文逗号,可用‚)。
样例
1
2
3哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人? {% hideInline 闪 %}哪个英文字母最酷?
门里站着一个人?
使用方法
1
2
3{% hideBlock display,bg,color %}
content
{% endhideBlock %}- content: 文本内容
- display: 按钮显示的文字(可选)
- bg: 按钮的背景颜色(可选)
- color: 按钮文字的颜色(可选)
本标签可用于隐藏文字、代码段、图片等。注意,( display不能包含英文逗号,可用‚)。
样例
1
2
3
4查看答案
{% hideBlock 查看答案 %}
傻子,怎么可能有答案
{% endhideBlock %}查看答案
2.3.0以上支持
使用方法
1
2
3{% hideToggle display,bg,color %}
content
{% endhideToggle %}- content: 文本内容
- display: 按钮显示的文字(可选)
- bg: 按钮的背景颜色(可选)
- color: 按钮文字的颜色(可选)
本标签可用于隐藏大量的内容。注意,( display不能包含英文逗号,可用‚)。
样例
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 %}
Gallery相册图库
2.2.0以上提供
相册集合
使用方法
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>- name:图库名字
- description:图库描述
- link:连接到对应相册的地址
- img-url:图库封面的地址
样例
1
2
3
4
5<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
Gallery相册
2.0.0以上提供
只要在标签中插入图片即可,语法和『markdown』一样,该标签会对图片进行排版
使用方法
1
2
3{% gallery %}
markdown 图片格式
{% endgallery %}样例
1
2
3
4
5
6
7
8
9
10{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}
Note
这个外挂标签是基于 next 主题移植的,所以在使用之前要在主题配置文件『_config.butterfly.yml』做相应配置
1 | note: |
icons 和 light_bg_offset 只对 方法一 生效
使用方法
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)
样例
默认 提示块标籤
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 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 %}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 no-icon %}
默认 提示块标籤
{% endnote %}
{% note default no-icon %}
default 提示块标籤
{% endnote %}
{% note primary no-icon %}
primary 提示块标籤
{% endnote %}
{% note success no-icon %}
success 提示块标籤
{% endnote %}
{% note info no-icon %}
info 提示块标籤
{% endnote %}
{% note warning no-icon %}
warning 提示块标籤
{% endnote %}
{% note danger no-icon %}
danger 提示块标籤
{% endnote %}
3.2.0 以上版本支
使用方法
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)
样例
你是刷 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{% 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 %}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21{% 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 %}
Timeline
使用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15{% timeline 时间线标题 %}
{% timenode 时间节点(标题) %}
正文内容
{% endtimenode %}
{% timenode 时间节点(标题) %}
正文内容
{% endtimenode %}
{% endtimeline %}样例
说说
『出师表』
今天是2021-1-24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15{% timeline 说说 %}
{% timenode 2021-01-25 [嘀嘀嘀](https://caczhtus.github.io) %}
『出师表』
{% endtimenode %}
{% timenode 2021-01-24 [嘀嘀嘀](https://caczhtus.github.io) %}
今天是2021-1-24
{% endtimenode %}
{% endtimeline %}
Link
使用方法
1
{% link 标题, 链接, 图片 %}
样例
1
{% link Caczhtus, https://caczhtus.gitee.io/, https://cdn.jsdelivr.net/gh/Caczhtus/Caczhtus-imgs/images/other/ic_2.jpg %}
命令
Git 指令
这边介绍的 git 指令主要是关于使用该博客时用到的相关命令,具体例如合并分支等较少用的指令则省略
git init
把当前文件夹当成一个仓库,相当于仓库初始化,此时会发现路径下多了一个.git目录(切记别乱动这个东西,否则会影响到将来的版本恢复)
git add 「file」
提交指定文件到本地仓库中
git add .
提交所有更新的文件到本地仓库中(增、删、改均属于更新)
git commit -m “information”
提交这个文件,并且打上相应的修改注释,以后在查看历史版本可以查阅到该信息,相当于日志
git pull
把远程库的内容和本地同步,远程不变,也可以理解成更新本地仓库,主要用于主题的版本升级,可以通过 diff 命令来决定更新的内容是保持原样还是更新
git push <远程库> <本地分支>
推送本地分支到远程库,例如:git push origin master
Hexo 指令
hexo 指令主要用于博客更新运行以及发布,更多命令见 官方文档 ,以下介绍自己常用的几则命令:
hexo init 「folder」
用于初始化本地文件夹,将其设置为 hexo 的根目录,其中 folder 缺省值为当前目录
hexo new 「layout」
<title>
用于新建文章,简写为「hexo n」,(能够简写的前提是安装的插件不能有同样开头的命令,下同)。
-layout
可选参数,用以指定文章类型,若无指定则默认由配置文件中的 default_layout 选项决定-title
必填参数,用以指定文章标题,如果参数值中含有空格,则需要使用双引号包围
hexo new "article"
等价于hexo n “article”
等价于hexo new post “article”
这条命令自己实际上较少用,直接在文章根目录下直接建 md 文件,然后再刷新一下 hexo 。
hexo clean
清除缓存文件,一般在刷新前都要做一次,避免不必要的 bug
hexo generate
用于生成静态文件,简写「hexo g」。执行 hexo g 后会在站点根目录下生成 public 文件夹,,hexo 会将 /source/ 下面的 .md 后缀的文件编译为 .html 后缀的文件,存放在 /public/ 路径下。
-d
选项,指定生成后部署,与hexo d -g
等价
`hexo deploy –watch 监视文件变化
hexo server
用于启动本地服务器,简写「hexo s」。
-p
选项,指定服务器端口,默认为 4000-i
选项,指定服务器 IP 地址,默认为 0.0.0.0-s
选项,静态模式 ,仅提供 public 文件夹中的文件并禁用文件监视
hexo server
(默认启动不加选项)会监视文件变动并自动更新,除修改站点配置文件外,无须重启服务器,直接刷新网页即可运行前要注意有 hexo-server 插件
$ npm install hexo-server –save
hexo deploy
用于发布到托管仓库,部署网站,简写「hexo d」。当然,前提要先配置 _config.yml 文件
-g
选项,指定生成后部署,与hexo g -d
等价
hexo publish 「layout」
<title>
用于发布文章的草稿,即通过
publish
命令将草稿移动到source/_posts
文件夹。如:hexo publish [layout] <title>
,草稿默认是不会显示在页面中的,可在执行时加上--draft
参数,或是把render_drafts
参数设为true
来预览草稿。hexo –safe
安全模式,用于禁用加载插件和脚本
hexo –debug
表示调试模式,用于将消息详细记录到终端和
debug.log
文件hexo –silent
表示静默模式,用于静默输出到终端
流程
发布博客源码版本
前提是要绑定远程仓库,进入博客站点根目录:
进入站点的主题目录下
1 | git pull |
发布文章
无论使用图形化界面直接粘贴或者是命令行下进行添加,写完文章后记得上传到远程库中,这边的远程仓库是一个私有的库,以后可以在不同主机下写文章,传到该仓库即可。
刷新博客页面
1 | hexo clean && hexo g && hexo d |
*注意做完后,由于 gitee 需要手动刷新,要到博客仓库去更新一下 pages *