1. 文章标题
目前 Hexo 建议使用顺序的文章标题,也就是使用如下格式的标题结构:
1 | # 一级标题 |
简单地说就是文章标题建议使用由大号标题到小号标题过渡而不要出现跨级的标题结构,比如下面的标题结构:
1 | # 一级标题 |
因为这样可能会出现如下的错误显示,所以只要遵循这种标题格式即可。
2. 文章头格式
front-matter
的基本格式示例如下:
1 | --- |
需要注意的是,上述的title: 文章标题
之间必须使用空格隔开,其他的也一样,否则 Hexo 运行时会报错。
3. 显示阅读全文
Hexo 首页默认是会显示每篇文章的全部内容的,为了更为合理的浏览首页的内容,我们无需显示整篇文章,而是增添一个阅读全文
的按钮,并只在首页显示文章指定的部分内容,若要查看该篇文章则只需点击阅读全文即可。
因此我们可以在文章的某个位置增加如下语句,那么位于该语句之前的文章内容则会显示在首页,而不是简单地显示全文。
1 | <!--more--> |
添加后的显示如下所示:
4. 文本高亮
本人的 Hexo 系统并支持如下的文本高亮的 Markdown 语法:
1 | '''高亮文本''' |
其中三个单引号`的高亮语法会导致显示格式错误,而两个等号=的高亮语法则无高亮效果。目前支持的高亮语法则是:
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 | <span id="inline-blue"> 站点配置文件 </span> |
效果如下所示:
站点配置文件
主题配置文件
站点配置文件
主题配置文件
7. 在文档中增加图标, Font Awesome 提供图标
1 | <i class="fa fa-pencil">郑松涛</i> |
显示效果:郑松涛
1 | <div class="list-group"> |
显示效果:
1 | <i class="fa fa-spinner fa-spin"></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 | <div> |