Hexo Next主题进阶写作技巧

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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写作方式正如我最上面的样式,我们可以这样使用:

1
2
3
4
5
6
7
{% note [class] [no-icon] %}
这里写你需要写的内容
{% endnote %}

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

1.1. 爬坑

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

比如,如果你这样写是错误的:

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

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

1
2
3
4
{% note danger %}note text
note text
note text
{% endnote %}

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

1
2
3
4
5
{% 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. 没有定义样式类别

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

(没有定义样式类别)

1.2.2. 默认的类别

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

默认形式的类别

1.2.3. primary形式的类别

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

首要类型形式

1.2.4. info形式的类别

1
2
3
{% note info %}
info形式的类别
{% endnote %}

info形式的类别

1.2.5. success形式的类别

1
2
3
{% note success %}
success形式的类别
{% endnote %}

success形式的类别

1.2.6. warning形式的类别

1
2
3
{% note warning %}
warning形式的类别
{% endnote %}

warning形式的类别

1.2.7. danger形式的类别

1
2
3
{% note danger %}
danger形式的类别
{% endnote %}

danger形式的类别

1.2.8. 无图标形式的note标签

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

没有图标的note标签

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

1
2
3
4
5
6
7
8
9
10
{% note default no-icon %}
在note中放入无序、有序列表
* ul
* ul
* ul

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

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

  • ul
  • ul
  • ul
  1. ol
  2. ol
  3. ol

1.2.10. note标签中插入表格

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

2. note标签的html使用

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

default
1
<div class="note default">default</div>
primary
1
<div class="note primary">primary</div>
success
1
<div class="note success">success</div>
info
1
<div class="note info">info</div>
warning
1
<div class="note warning">warning</div>
danger
1
<div class="note danger">danger</div>
danger no-icon

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

3. 主题自带FontAwesome图标

效果:

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

源码:

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

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

1
- <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%
  • 下载两倍大

4. 代码块内部样式高亮

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

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

5. 文本居中引用

效果:

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

源码:

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
{% endcq %}

6. 主题自带label标签

首先需要在Next主题 _config.xml 中配置:(Next 8.0默认开启,无需再设置)

然后效果如下(@ 前面的是 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,千万不要把这个放到段首。。。

7. 主题自带tabs标签

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

这是选项卡 2 嘿嘿嘿 φ(≧ω≦*)♪~

这是选项卡 3 嘻嘻嘻 φ(≧ω≦*)♪~

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

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 1 %}
<!-- tab -->
**这是选项卡 1** 哈哈哈 φ(≧ω≦*)♪~
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 嘿嘿嘿 φ(≧ω≦*)♪~
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 嘻嘻嘻 φ(≧ω≦*)♪~
<!-- endtab -->
{% endtabs %}

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

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

1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 0

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

8. 主题自带样式按钮

效果:

点击下载百度

源码:

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

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

9. 参考链接