Hexo的基本用法汇总

Hexo的用法示例

此部分为Hexo使用知识汇总，方便后续创作使用，汇集各位大佬的总结，此处注明大部分来自安知鱼大佬

Front-matter 的基本认识

Front-matter 是 markdown 文件最上方以 —- 分隔的区域，用于指定个别档案的变数。
其中又分为两种

如果标注可选的参数，可根据自己需要添加，不用全部都写在 markdown 里

  1. Page Front-matter 用于页面配置
  2. Post Front-matter 用于文章页配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
type:
---
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex 【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置) 
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
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
swiper_index: 1
top_group_index: 1
background: "#fff"
---
写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number 【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple 【可选】显示 toc 简洁模式
copyright 【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章链接链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex 【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside 【可选】显示侧边栏 (默认 true)
swiper_index 【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index 【可选】首页右侧卡片组配置, 数字越小越靠前
background 【可选】文章背景可配置为 16 进制颜色值
  1. 首页轮播图配置: swiper_index, 数字越小越靠前
  2. 首页卡片配置: top_group_index, 数字越小越靠前
  3. page 中background, 可配置为 16 进制颜色值

Hexo创建新的页面

1
hexo new page XXX

在项目blog目录下执行完上面代码之后就会在source目录下生成新的XXX文件夹，里面会有index.md文件，可以自行进行创作

Hexo创作文章

在项目blog目录下source -> _posts文件中进行新建一个.md的文件即可在里面输入自己的创作内容

Markdown的基本用法

创建多级标题

Demo 1 - 标题示例一

一级标题

二级标题

三级标题

Demo 2 - 标题示例二

我展示的是一级标题

我展示的是二级标题

Demo 1 - 标题示例一

1
2
3
# 一级标题
## 二级标题
### 三级标题

Demo 2 - 标题示例二

1
2
3
4
5
我展示的是一级标题
=================

我展示的是二级标题
-----------------

Markdown段落格式

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。

Demo 1 - 段落示例一

段落1
段落2

Demo 2 - 段落示例二

段落1

段落2

Demo 1 - 段落示例一

1
2
段落1  
段落2

Demo 2 - 段落示例二

1
2
3
段落1

段落2

Markdown字体

斜体文本
斜体文本
加粗文本
加粗文本
粗斜体文本
粗斜体文本

1
2
3
4
5
6
7
8

*斜体文本*  
_斜体文本_  
**加粗文本**  
__加粗文本__  
***粗斜体文本***  
___粗斜体文本___

Markdown列表

  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
1
2
3
4
5
6
7
8
9
10
11
12
13
14

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项

Markdown区块

区块引用
菜鸟教程
学的不仅是技术更是梦想

最外层

第一层嵌套

第二层嵌套

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项

列表中使用区块
如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

列表中使用区块实例如下：

  • 第一项

    菜鸟教程
    学的不仅是技术更是梦想

  • 第二项
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

> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想


> 最外层
> > 第一层嵌套
> > > 第二层嵌套


> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

列表中使用区块
如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

列表中使用区块实例如下：

* 第一项
  > 菜鸟教程
  > 学的不仅是技术更是梦想
* 第二项

Markdown代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`）

printf() 函数

1
2
3

`printf()` 函数

代码区块

代码区块使用 4 个空格或者一个制表符（Tab 键）。
也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定)。

<?php
 echo 'RUNOOB';
 function test(){
  echo 'test'
 }

1
2
3
$(document).ready(function () {
    alert('RUNOOB');
});
1
2
3
4
5
6
7

<?php
     echo 'RUNOOB';
     function test(){
      echo 'test'
     }

1
2
3
$(document).ready(function () {
    alert('RUNOOB');
});

Markdown链接

  1. 神经蛙的博客

  2. https://hexo.sjava.cn

1
2
3
4
5

1. [神经蛙的博客](https://hexo.sjava.cn)

2. <https://hexo.sjava.cn>

高级链接

通过变量来设置一个链接，变量赋值在文档末尾进行:神经蛙的博客

1
2
3
4
5

通过变量来设置一个链接，变量赋值在文档末尾进行:[神经蛙的博客][1]

[1]: https://hexo.sjava.cn

Markdown图片

点击图片即可看到实际效果

  1. 图片描述

  2. 图片描述被改为标题

1
2
3
4
5
6
点击图片即可看到实际效果

1. ![图片描述](/img/img_1.png)

2. ![图片描述被改为标题](/img/img_1.png "标题")

Markdown表格

  • -: 设置内容和标题栏居右对齐。
  • :- 设置内容和标题栏居左对齐。
  • :-: 设置内容和标题栏居中对齐。
表头 表头
单元格 单元格
单元格 单元格
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格 
1
2
3
4
5
6
7
8
9
10
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

Markdown高级技巧

支持的HTML元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等

使用 Ctrl+Alt+Del 重启电脑

1
2
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

文本加粗
** 正常显示星号 **

1
2
3
4

**文本加粗**
\*\* 正常显示星号 \*\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

自定义表格

数据类型 长度(位)
整数类型 byte 8
short 16
int 32
long 64
浮点类型 float 32
double 64
字符型 char 16
布尔型 boolean ~ 
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

<table>
    <tr>
        <td colspan="2" style="text-align: center;vertical-align:middle;">数据类型</td>
        <td>长度(位)</td>
    </tr>
    <tr>
        <td rowspan="4" style="text-align: center;vertical-align:middle;">整数类型</td>
        <td>byte</td>
        <td>8</td>
    </tr>
    <tr>
        <td>short</td>
        <td>16</td>
    </tr>
    <tr>
        <td>int</td>
        <td>32</td>
    </tr>
    <tr>
        <td>long</td>
        <td>64</td>
    </tr>
    <tr>
        <td rowspan="2" style="text-align: center;vertical-align:middle;">浮点类型</td>
        <td>float</td>
        <td>32</td>
    </tr>
    <tr>
        <td>double</td>
        <td>64</td>
    </tr>
    <tr>
        <td style="text-align: center;vertical-align:middle;">字符型</td>
        <td>char</td>
        <td>16</td>
    </tr>
    <tr>
        <td style="text-align: center;vertical-align:middle;">布尔型</td>
        <td>boolean</td>
        <td>~</td>
    </tr>
</table>

公式

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认下的分隔符：

  • $…$ 或者 (…) 中的数学表达式将会在行内显示。
  • 或者 […] 或者 ```math 中的数学表达式将会在块内显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$$
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
$$
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$