使用Hexo优雅的写作
简介
随着对Hexo
的理解逐步深入,我逐步掌握了使用Hexo
写作的一些技巧。本文就是介绍在写作过程中可能用到的方便工具,可以使文章更加清晰易懂。
文本居中引用
源码
1 | {% cq %} |
其中 cq
是 centerquote
的缩写,在源码中使用全称也是可以的。
效果展示
思索,继续不断的思索,以待天曙,渐近及见光明。
——牛顿
使用上标和下标
Markdown 可以和 HTML 的语法兼容,可以通过HTML的上标和下标标签来实现效果:
标签 | 写法 | 效果 |
---|---|---|
上标 | 2<sup>10</sup> | 210 |
下标 | H<sub>2</sub>O | H2O |
下划线
Markdown 可以和HTML的语法兼容,可以通过HTML的\<u\>
标签来实现效果:
写法 | 效果 |
---|---|
<u>下划线</u> | 下划线 |
注意
:u指的是underline
。尽量不要给文本加下划线,因为这会和超链接的表现形式混淆,会被误认为是超链接。
字体颜色
比如说我们要设置字体颜色为,代码为
1 | <label style="color:red">红色</label> |
强调文字
对于强调的部分,我们有两种方法,代码展示如下
1 | <code>测试</code> |
对于行文中的强调
,我们也可以用反引号标,得到相同的效果,这种方式更加方便。
Note
标签
通过 note
标签可以为段落添加背景色,语法为:
1 | {% note class %} |
支持的class
包括: default primary success info warning
danger , 也可以不指定class ,则默认使用灰色。
default
primary
success
info
warning
danger
不指定class
label
标签
next
主题默认配置的label
标签不是很好看,我们后期可以修改这个默认配置。设置位置为:
~/文档/hexo/themes/next/source/css/_variables/base.styl
1 | // Label colors |
目前尚未获得最佳方案,暂不修改。展示如下
测试 测试 测试 测试 测试 测试Tabs 标签
Tabs 标签多用于多个内容之间的切换,默认情况下只显示其中一个结果或不展开显示,使文章更有条理。
配置文件
~/文档/hexo/themes/netx/_config.yml
1 | tabs: |
语法
1 | {% tabs Unique name, [index] %} |
实例展示
This is Tab 1.
This is Tab 2.
This is Tab 3.
流程图mermaid
启用流程图功能,配置位置~/文档/hexo/themes/next/_config.yml
1 | # Mermaid |
具体代码
1 | {% mermaid sequenceDiagram %} |
效果展示
sequenceDiagram Alice ->> Bob: Hello Bob ,how are you? Bob -->> John:How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long <br/>long time ,so long than the<br/> text does not fit on a row. Bob -->>Alice:Checking with John... Alice->>John: Yes... John,how are you?