0%

Hexo Markdown 注意事项

1. 文章标题

目前 Hexo 建议使用顺序的文章标题,也就是使用如下格式的标题结构:

1
2
3
4
5
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
...

简单地说就是文章标题建议使用由大号标题到小号标题过渡而不要出现跨级的标题结构,比如下面的标题结构:

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

因为这样可能会出现如下的错误显示,所以只要遵循这种标题格式即可。

文章目录错误

2. 文章头格式

front-matter 的基本格式示例如下:

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
top: false 是否文章置顶
mathjax: false 是否开启数学公式支持
date: 日期时间
author: 作者名
password: 文章阅读密码,前提是在主题的 config.yml 中激活了 verifyPassword 选项
summary: 文章摘要,自定义的文章摘要内容
tags: 表示文章标签,格式:[标签1, 标签2, ]
categories: 表示文章分类,格式:[分类1, 分类2, ]
---

需要注意的是,上述的title: 文章标题 之间必须使用空格隔开,其他的也一样,否则 Hexo 运行时会报错。

3. 显示阅读全文

Hexo 首页默认是会显示每篇文章的全部内容的,为了更为合理的浏览首页的内容,我们无需显示整篇文章,而是增添一个阅读全文的按钮,并只在首页显示文章指定的部分内容,若要查看该篇文章则只需点击阅读全文即可。

因此我们可以在文章的某个位置增加如下语句,那么位于该语句之前的文章内容则会显示在首页,而不是简单地显示全文。

1
<!--more-->

添加后的显示如下所示:

阅读全文

4. 文本高亮

本人的 Hexo 系统并支持如下的文本高亮的 Markdown 语法:

1
2
'''高亮文本'''
==高亮文本==

其中三个单引号`的高亮语法会导致显示格式错误,而两个等号=的高亮语法则无高亮效果。目前支持的高亮语法则是:

1
`高亮文本`

5. Latex 公式

数学公式的默认定界符是$...$(对于行内公式),以及$$...$$(对于块级公式)。例如,质能守恒方程如下所示:

行内公式: $E = mc^2$

块内公式: $$E = mc^2$$

例如如下块级公式:

1
$$\Delta_A(\lambda)=\det(\lambda I-A)$$

$$\Delta_A(\lambda)=\det(\lambda I-A)$$

6. 文字增加背景色块

1
2
3
4
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>

效果如下所示:
站点配置文件
主题配置文件
站点配置文件
主题配置文件

7. 在文档中增加图标, Font Awesome 提供图标

1
<i class="fa fa-pencil">郑松涛</i>

显示效果:郑松涛

1
2
3
4
5
6
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

显示效果:

1
2
3
4
5
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

显示效果:

旋转
旋转
旋转
旋转
旋转

8. mermaid 支持

使用 mermaid 该插件可以画甘特图和时序图等图标,但是使用语法并非标准的 Markdown 语法,并不友好。Hexo 支持的命令为:

1
{% mermaid %} ... {% endmermaid %}

效果图如下所示:

            
             
    gantt
    dateFormat  YYYY-MM-DD
    title 软件开发甘特图
    section 设计
    需求                      :done,    des1, 2014-01-06,2014-01-08
    原型                      :active,  des2, 2014-01-09, 3d
    UI设计                     :         des3, after des2, 5d
未来任务                     :         des4, after des3, 5d
    section 开发
    学习准备理解需求                      :crit, done, 2014-01-06,24h
    设计框架                             :crit, done, after des2, 2d
    开发                                 :crit, active, 3d
    未来任务                              :crit, 5d
    耍                                   :2d
    section 测试
    功能测试                              :active, a1, after des3, 3d
    压力测试                               :after a1  , 20h
    测试报告                               : 48h
          
            
             
graph TB
start(开始)-->inputA[输入用户名密码]
inputA-->opA{数据库查询子类}
opA-->conditionA{是否有此用户}
conditionA--yes-->conditionB{密码是否正确}
conditionA--no-->inputA
conditionB--yes-->opB[读入用户信息]
conditionB--no-->inputA
opB-->en(登录)
          

9. 自定义图片样式

1
2
3
<div>
<img src="2019-11-24-Hexo-Markdown注意事项/文章目录错误.jpg" style="margin-left: 20px; width: 200px; height: 300px"/>
</div>
------ 本文结束------