一个简单的hexo图片过滤器

不大喜欢hexo官方推荐的图片存储方式,图片和文章会混在一个文件夹里。
我按照wordpress的规则把图片资源放在 uploads/年/月 的文件夹,这样的好处是文章和资源分离,但是也产生了个新问题,就是每次md添加图片的时候得写一长串地址,于是诞生了这个简单的hexo图片过滤器。

写文章时只需要简单写上图片名字,渲染时候可以自动生成需要的地址

markdown里的图片

1
![内容](图 片.jpg)

渲染后:

1
![内容](https://cdn.jsdelivr.net/XXXX/XXXX/图片.jpg)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
* simle hexo image filter by ceil
* 保存成js文件放在hexo项目的script(默认没有,需要自建)文件即可生效
**/

//图片需要增加的前缀,可以用来添加cdn前缀或者自定义路径
//PREFIX = "https://cdn.jsdelivr.net/gh/USERNAME/USERNAME.github.io@latest"
PREFIX = ""

console.info("*** [reformatImg plugin begin] ****");

var format_img = function(data){
if(data.layout == 'post'){
const {date, content} = data;
/*
* 修改markdown图片链接
*/
//匹配不以http开头或者/开头,自动把图片名修改成 /uploads/${year}/${month}/ 格式
let regExp = /\((?!http)(?!\/)([^\?\\]*?)(\.jpg|\.png)\)/g
const year = date.year().toString();
const month = (date.month() + 1).toString().padStart(2, "0");
data.content = data.content.replace(regExp, `(${PREFIX}/uploads/${year}/${month}/$1$2)`);

/*
* 修改index_img, 部分主题需要用到
*/
if(data.index_img && !data.index_img.includes("/")){
console.info(`--- 优化图片路径: ${data.path} ---------------------`);
data.index_img = `${PREFIX}/uploads/${year}/${month}/` + data.index_img;
}
}
return data;
}

hexo.extend.filter.register('before_post_render', format_img, 9);

PS: 今天的大部分时间耗在正则上,每用一次都得查字典 orz


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!