摘要：以下博客写作都是基于Next主题，其它主题不一定集成了以下写作方式。

note标签的官方文档使用

首先我们需要在Next主题_config.xml中设置一下功能开关，有些默认是开的，有些默认是关的：

复制

note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

note写作方式正如我最上面的样式，我们可以这样使用：

复制

{% note [class] [no-icon] %}
这里写你需要写的内容
{% endnote %}

// 注意上面的class和no-icon属性是可以选择的
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

爬坑

标签开头和结尾在一行的写法是错误的

比如，如果你这样写是错误的：

复制

1	{% note danger %}note text, note text, note text{% endnote %}

或者如果这样写也是错误的：

复制

{% note danger %}note text
note text
note text
{% endnote %}

内容必须要跟note标签不在一行：

复制

{% note danger %}
note text, note text, note text
note text, note text, note text
note text, note text, note text
{% endnote %}

示例

1、没有定义样式类别

复制

1
2
3

{% note %}
(没有定义样式类别)
{% endnote %}

没有定义样式类别

2、默认的类别

复制

1
2
3

{% note default %}
默认形式的类别
{% endnote %}

默认形式的类别

3、primary形式的类别

复制

1
2
3

{% note primary %}
首要类型形式
{% endnote %}

首要类型形式

4、info形式的类别

复制

1
2
3

{% note info %}
info形式的类别
{% endnote %}

info形式的类别

5、success形式的类别

复制

1
2
3

{% note success %}
success形式的类别
{% endnote %}

success形式的类别

6、warning形式的类别

复制

1
2
3

{% note warning %}
warning形式的类别
{% endnote %}

warning形式的类别

7、danger形式的类别

复制

1
2
3

{% note danger %}
danger形式的类别
{% endnote %}

danger形式的类别

8、无图标形式的note标签

复制

{% note info no-icon %}
没有图标的note标签
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

没有图标的note标签
Note without icon: note info no-icon

复制

1
2
3

code block in note tag
code block in note tag
code block in note tag

9、无图标形式的success标签

复制

{% note success %}
在note中插入代码块
{% code %}
code block in note tag
code block in note tag
code block in note tag
{% endcode %}
{% endnote %}

在note中插入代码块

复制

1
2
3

code block in note tag
code block in note tag
code block in note tag

10、note标签中插入有序无序列表

复制

{% note default %}
在note中放入无序、有序列表
* ul
* ul
* ul

1. ol
2. ol
3. ol
{% endnote %}

在note中放入无序、有序列表

11、note标签中插入表格

复制

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

1	2
3	4
5	6
7	8

note标签的html使用

在主题配置文件_config.yml里有一个关于这个的配置，但官方文档没有提供 HTML 的使用方式，个人认为这种方式更简单，也不会产生一些奇怪的显示 bugs……

default

复制

1	<div class="note default"><p>default</p></div>

primary

复制

1	<div class="note primary"><p>primary</p></div>

success

复制

1	<div class="note success"><p>success</p></div>

info

复制

1	<div class="note info"><p>info</p></div>

warning

复制

1	<div class="note warning"><p>warning</p></div>

danger

复制

1	<div class="note danger"><p>danger</p></div>

danger no-icon

复制

1	<div class="note danger no-icon"><p>danger no-icon</p></div>

主题自带FontAwesome图标

效果：

支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一件部署
只需一条指令即可部署到 GitHub Pages，或其他网站。
丰富的插件
Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。

源码：

复制

1. <i class="fa fa-pencil"></i> 支持 Markdown
   <i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
2. <i class="fa fa-cloud-upload"></i> 一件部署
   <i>只需一条指令即可部署到 GitHub Pages，或其他网站。</i>
3. <i class="fa fa-cog"></i> 丰富的插件
   <i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。</i>
   采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

复制

1
2
3

- <i class="fa fa-pencil"></i> 铅笔
- <i class="fa fa-cloud-upload"></i> 上传
- <i class="fa fa-download"></i> 下载

铅笔
上传
下载

复制

1
2
3

- <i class="fa fa-download"></i> 下载
- <i class="fa fa-download fa-lg"></i> 下载变大 33%
- <i class="fa fa-download fa-2x"></i> 下载两倍大

下载
下载变大 33%
下载两倍大

代码块内部样式高亮

Next主题其实是自带代码块高亮显示的，但是有另外一种好玩的代码块高亮写法，叫diff语言

复制

highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true

只需要在markdown语法代码块的语言选择处写上diff即可，然后在相应代码前面加上-和+就行了。不过默认的-是绿色，+是红色，与 GitHub 上相反，也可以自己修改成Github上样式。

复制

文件位置：themes/next/source/css/_custom/custom.styl// 文章```代码块diff样式
pre .addition {
    background: #e6ffed;
}
pre .deletion {
    background: #ffeef0;
}

当然，要是你不满意顶部的文字样式，也可以自己在custom.styl自定义：

复制

// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}

文本居中引用

效果：

人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

源码：

复制

{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

主题自带label标签

首先需要在Next主题_config.xml中配置：

复制

1 2	# Label tag. label: true

然后效果如下（@ 前面的是label的名字，后面的是要显示的文字）：

default

复制

1	{% label default@default %}

primary

复制

1	{% label primary@primary %}

success

复制

1	{% label success@success %}

info

复制

1	{% label info@info %}

warning

复制

1	{% label warning@warning %}

danger

复制

1	{% label danger@danger %}

注意这个有一个BUG，千万不要把这个放到段首。。。

主题自带tabs标签

效果：

这是选项卡 2

源码：

复制

{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……
<!-- endtab -->
<!-- tab -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～
<!-- endtab -->
{% endtabs %}

首先还是需要在Next主题配置文件中配置：

复制

文件位置：~/blog/themes/next/_config.yml# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

然后上面源码中, 2表示一开始在第二个选项卡，非必须，若数值为-1则隐藏选项卡内容。更多用法请查看这个页面。

主题自带样式按钮

效果：

点击下载百度

源码：

复制

1	{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

关于按钮的更多使用可以前往这个页面查看。