【hexo】markdown标题自动编号

发表于 更新于 分类于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

前言

有时候，我们想像world文档那样给标题编号，如下表所示。

标题一 1

标题二 1.1

标题三 1.1.1

但是原始的hexo是不支持这种功能的，所以我们利用css的计数器(counter)来实现此功能。

css计数器

在css里，我们可以声明一个计数器，假设其名称为counter_xxx，那么我们可以使用counter()函数获得它当前的值。

1
counter(counter_xxx);

与此同时，我们可以使用counter-reset属性指定需要重置的计数器，使用counter-increment属性指定计数加一的计数器。

1
2
3
4
h1 {
	counter-increment: counter_h1;
	counter-reset: counter_h2;
}

如上代码所示，每有一个h1出现时，计数器counter_h1的值就会加一，而counter_h2的值就会重置为0。我们刚好可以利用这个，配合伪类选择器:before来实现标题的自动编号。

标题自动编号的实现

直接上代码，这里只实现三级标题，剩下的类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
	counter-increment: counter_h1;
	counter-reset: counter_h2;
}
h1:before {
	content: counter(counter_h1)"　";
}

h2 {
	counter-increment: counter_h2;
	counter-reset: counter_h3;
}
h2:before {
	content: counter(counter_h1)"."counter(counter_h2)"　";
}

h3 {
	counter-increment: counter_h3;
	counter-reset: counter_h4;
}
h3:before {
	content: counter(counter_h1)"."counter(counter_h2)"."counter(counter_h3)"　";
}

如上代码所示，当h1出现时，它会使counter_h1增加1，同时重置counter_h2为0。而h1:before的显示内容则是counter_h1的值，即1``2``3等。

同理当h2出现时，它会使counter_h2增加1，同时重置counter_h3为0。而h2:before的显示内容则是counter_h1的值与counter_h2的值的拼接，即1.1``1.2``1.3。

h3类似会显示为1.1.1``1.1.2``1.1.3。实现了自动编号。

一级标题前加分隔线

为了美观，我们可以使用js给一级标题前自动加一个分隔线<hr>。

打开工程目录\themes\next\source\js\src\utils.js，添加如下代码。

1
2
3
4
5
$(document).ready(function(){
	// 标题前面添加分隔线
	$('.post-body h1').before('<hr>');
});

结果

如果markdown文档里有以下输入。

1
2
3
4
5
6
7
8
9
10
# 标题一
## 标题二
### 标题三
### 标题三
## 标题二
### 标题三
### 标题三
# 标题一
## 标题二
## 标题二

则会有如下显示。

markdown标题自动编号