【hexo】markdown图片自动编号

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

前言

有时候我们想像world那样对图片也进行编号，甚于显示其脚注，如下所示。

图片带题注

要想实现这种效果，同样需要使用css计数器，这个技巧在给标题编号的时候使用过。除此之外，图片还需要显示题注，这里能过图片的alt属性作为题注。

图片自动编号

我们使用一个新的计时器counter_img作为图片的编号，该计时器变量在h1出现的时候重置，保证每一章的图片序号重新开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.posts-expand .post-body {
	counter-reset: counter_img;

	.fancybox img {
		counter-increment: counter_img;
		margin-bottom: 0px; 
	}
	.fancybox:after {
		content: "图 "counter(counter_h1)"-"counter(counter_img)"　";
		display: block;
		text-align: center;
		margin-bottom: 20px;
		color: #333;
	}
}

显示题注

当我们使用markdown显示一张图片时，一般会是如下格式。

1
![图片alt信息](44f5fabb\pic1-1.png)

其中中括号里的便是图片的alt信息，它会在图片没有成功加载的情况下显示出来以说明。

我们使用js获得图片的alt属性，并将其保存到某个可以通过css的attr()函数获得的属性中去，这里使用的是data-alt属性。具体步骤如下。

首先打开工程目录\themes\next\source\js\src\utils.js文件，在wrapImageWithFancyBox()函数内的最后面增加如下代码。之所以在这里加是因为这是在生成.fancybox类之后。

1
2
3
4
5
6
var fancyboxs = $('.fancybox');
for(var i = 0; i < fancyboxs.length; ++i) {
	var fb = fancyboxs[i];
	var alt = fb.children[0].getAttribute('alt');
	fb.setAttribute('data-alt', alt);
}

在这段代码中，我们拿到img的alt属性，并将其赋值给.fancybox的data-alt属性。

然后，我们可以修改css代码如下，改动的地方为content字段的最后，使用attr()函数获得data-alt的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.posts-expand .post-body {
	counter-reset: counter_img;

	.fancybox img {
		counter-increment: counter_img;
		margin-bottom: 0px; 
	}
	.fancybox:after {
		content: "图 "counter(counter_h1)"-"counter(counter_img)"　"attr(data-alt);
		display: block;
		text-align: center;
		margin-bottom: 20px;
		color: #333;
	}
}