Hexo博客搭建教程《三、写作技巧》

发表于 更新于 分类于 阅读次数：

本文列举了Markdown的基本写法和Next特定的一些语句表达，学习可以写出更漂亮的文章。
部分Markdown的基本语法在 Markdown学习模版 可以了解并学习。

中心引用

代码：

Hexo平台，Next主题

效果：

1
{% cq %}Hexo平台，Next主题{% endcq %}

Note-注释

代码：

1
2
3
4
{% note [class] %}
Default Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

支持的 class 种类包括 default primary success info warning danger，也可以不指定 class。

效果：

1
{% tabs Note %}
1
2
3
4
{% note default %}
Default Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Default Header
欢迎来到我的Blog!

1
2
3
4
{% note primary %}
Primary Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Primary Header
欢迎来到我的Blog!

1
2
3
4
{% note info %}
Info Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Info Header
欢迎来到我的Blog!

1
2
3
4
{% note success %}
Success Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Success Header
欢迎来到我的Blog!

1
2
3
4
{% note warning %}
Warning Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Warning Header
欢迎来到我的Blog!

1
2
3
4
{% note danger %}
Danger Header
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

Danger Header
欢迎来到我的Blog!

1
2
3
4
5
{% note info no-icon %}
No icon note
Note **without** icon: `note info no-icon`
**欢迎**来到我的[Blog!](https://vector.today/)
{% endnote %}

No icon note
Note without icon: note info no-icon
欢迎来到我的Blog！

1
2
3
4
5
6
7
8
Table in Note
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

Table in Note

1 2
3 4
5 6
7 8

Tab标签

设置：

1
2
3
4
tabs:
  transition:
    tabs: true
    labels: true

语法代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 标签默认名字 %}
<!-- tab 标签1的名字@text-width -->
标签1的内容
<!-- endtab -->

<!-- tab 标签2的名字@amazon -->
标签2的内容
<!-- endtab -->

<!-- tab 标签3的名字@bold -->
标签3的内容
<!-- endtab -->
{% endtabs %}

效果：

标签1的内容

标签2的内容

标签3的内容

文字标签

使用方法：

1
2
3
4
5
6
7
{% label [class]@Text %}
{% label [属性]@文字 %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

举例：

1
2
3
4
5
6
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet.
consectetur {% label success@adipiscing elit, %} sfs.
daed {% label info@do eiusmod %} tempor.
Ut enim *{% label warning @ad %}* minim veniam.
quis **{% label danger@nostrud %}** exercitation.
Duis aute irure dolor ~~{% label default @velit %}~~ <mark>esse</mark> cillum.

Lorem ipsum dolor sit amet.
consectetur adipiscing elit, sfs.
daed do eiusmod tempor.
Ut enim ad minim veniam.
quis nostrud exercitation.
Duis aute irure dolor velit esse cillum.

代码块

可以通过为代码块附加参数的形式为其添加更丰富的信息提示。

1
2
3
4
5
```yml 代码标题 https://vector.today 链接文字
tab: true
pace:
  enable: true
  theme: minimal
1
2
3
4
5
6

```yml 代码标题 https://vector.today 链接文字
tab: true
pace:
  enable: true
  theme: minimal
  • langugae：语言名称，引导渲染引擎正确解析并高亮显示关键字
  • title：代码块标题，将会显示在左上角
  • url：链接地址，如果没有指定 link text 则会在右上角显示 link
  • link text：链接名称，指定 url 后有效，将会显示在右上角

按钮

使用方法

1
2
3
4
5
6
7
8
9
{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

//url     : URL的绝对或相对路径
//text    : Button text. Required if no icon specified.
//icon    : FontAwesome 图标名称 (最开头没有fa-). 如果没有文字添加则必须选择。
//[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x 可选变量。
//[title] : 鼠标悬浮的提示。可选变量。

样例

1
{% btn https://vector.today, Vector主页, home %}

Vector主页

1
{% btn https://vector.today, Vector主页, %}

Vector主页

1
{% btn , Vector主页, %}

Vector主页