Yang's Blog: Hexo Next主题进阶写作技巧

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

1. note标签的官方文档使用

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

# Note tag (bs-callout)
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: flat
  icons: true
  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.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.2.示例

1.2.1. 没有定义样式类别

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

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

1.2.2. 默认的类别

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

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

1.2.3. primary形式的类别

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

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

1.2.4. info形式的类别

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

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

1.2.5. success形式的类别

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

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

1.2.6. warning形式的类别

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

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

1.2.7. danger形式的类别

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

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

1.2.8. 无图标形式的note标签

{% note info no-icon %}
没有图标的note标签
{% endnote %}

{% note info no-icon %} 没有图标的note标签 {% endnote %}

1.2.9. note标签中插入有序无序列表

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

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

{% note default no-icon %} 在note中放入无序、有序列表

ol
ol
ol {% endnote %}

1.2.10. note标签中插入表格

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

{% note default no-icon %}

1	2
3	4
5	6
7	8

{% endnote %}

2. note标签的html使用

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

default

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

primary

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

success

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

info

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

warning

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

danger

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

danger no-icon

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

3. 主题自带FontAwesome图标

效果：

丰富的插件 Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。 采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

源码：

<i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。</i>
采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。

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

- <i class="fa fa-download"></i> 下载

下载

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

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

4. 代码块内部样式高亮

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

只需要在 markdown 语法代码块的语言选择处写上 diff 即可，然后在相应代码前面加上 - 和 + 就行了。

5. 文本居中引用

效果：

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

源码：

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

6. 主题自带label标签

~~首先需要在Next主题 _config.xml 中配置：~~（Next 8.0默认开启，无需再设置）

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

{% label default@default %}

{% label default@default %}

{% label primary@primary %}

{% label primary@primary %}

{% label success@success %}

{% label success@success %}

{% label info@info %}

{% label info@info %}

{% label warning@warning %}

{% label warning@warning %}

{% label danger@danger %}

{% label danger@danger %}

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

7. 主题自带tabs标签

{% tabs 选项卡, 1 %}  这是选项卡 1 哈哈哈 φ(≧ω≦)♪～   这是选项卡 2 嘿嘿嘿 φ(≧ω≦)♪～   这是选项卡 3 嘻嘻嘻 φ(≧ω≦*)♪～  {% endtabs %}

这是选项卡 1 哈哈哈 φ(≧ω≦*)♪～

{% tabs 选项卡, 1 %}
<!-- tab -->
**这是选项卡 1** 哈哈哈 φ(≧ω≦*)♪～
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 嘿嘿嘿 φ(≧ω≦*)♪～
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 嘻嘻嘻 φ(≧ω≦*)♪～
<!-- endtab -->
{% endtabs %}

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

文件位置：~/hexo/themes/next/_config.yml

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0

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

8. 主题自带样式按钮

效果：

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

源码：

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

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

9. 参考链接

Hexo博客+Next主题进阶写作技巧

Yang's Blog

2020年7月31日星期五

Hexo Next主题进阶写作技巧