发布于 

【hexo专栏】实现一个hexo的sitemap功能

背景

目前我的博客站点由于原来没怎么经营导致sitemap.xml没有生成,所以需要自己实现一个sitemap功能。然后目前的博客采用hexo进行搭建,所以需要在hexo的基础上进行开发。

实现

首先最简单的方式是查询一个hexo的sitemap的文章。

由于对hexo源码还算相对熟悉,那不去查询别人实现的sitemap,先自己来实现一个,想到的是直接利用hexo的generate扩展功能,返回一个json即可,框架会根据这个json去生成对应的内容。

1. 文档

比较简单,大概就是返回的是一个对象,对象中包含了path和data两个属性,path是生成的文件路径,data是文件的内容,或者说使用layout进行渲染内容。

2. 实现

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
36
hexo.extend.generator.register('sitemap', (locals) => {
let postsSite = locals.posts.sort('-updated').map(item => {
return {
url: 'https://blog.fedfans.com/' + item.path + 'index.html',
updateTime: item.updated.format()
}
});

let pagesSite = locals.pages.sort('-updated').filter(item => {
return item.path !== 'images/upload.json'
}).map(item => {
return {
url: 'https://blog.fedfans.com/' + item.path,
updateTime: item.updated.format()
}
});

let render = (data) => {
return data.map(item => {
return `<url>
<loc>${item.url}</loc>
<lastmod>${item.updateTime}</lastmod>
</url>`
}).join('\n')
}
let info = postsSite.concat(pagesSite)
let result = render(info);
return {
path: 'sitemap.xml',
data: `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
${result}
</urlset>
`
}
})

此处我把文章和自定义的page生成到了一个sitemap中,然后就可以在站点根目录下面看到sitemap.xml文件了。

对比

查看社区的包:https://github.com/hexojs/hexo-generator-sitemap

可以看到,社区的包是基于hexo的generate扩展功能实现的,看来基本就是这个方法,也同时看到了社区的视线里面,假设我们的主题里面主题去generate一些其他页面,那这个sitemap就监听不到了,

然后由于我们已经知道了这个实现方式,就能比较简单完善自己的sitemap了,相比社区到时碰到这个页面的sitemap为什么没有编入进去,到时就比较懵,可能解决起来更花费时间了。

另外社区包,还用了nunjunks,感觉杀鸡焉用牛刀,直接一个函数字符串模版即可。

总结

实战了hexo的generate功能,后续有其他功能也能比较快速的实现了,另外对于完善sitemap也能自己快速解决,另外比如想要实现sitemap嵌套sitemap也能比较好实现。

Hexo专栏

目前 Hexo 系列形成了一个小专栏,欢迎读者继续阅读: Hexo专栏地址


如果你有什么意见和建议,可以点击: 反馈地址 进行反馈。