Nuxt3动态站点地图sitemap的配置
sitemap.xml 是一个 XML 格式的文件，主要作用是帮助搜索引擎（如 Google、Baidu等）更高效地抓取和索引网站的页面。即使没有 sitemap.xml，搜索引擎也能通过链接抓取页面，但有它会更高效。sitemap.xml 是网站与搜索引擎沟通的“地图”，虽不直接影响排名，但能显著提升抓取效率和收录率，是 SEO 基础建设中不可或缺的一环。下面我将记录如何在nuxt3中使用@nuxtjs/sitemap插件动态生成站点地图。
在nuxt3中安装@nuxtjs/sitemap模块
npx nuxi module add @nuxtjs/sitemap
更推荐使用nuxi命令，如果使用npm等工具安装的话则还需要手动导入模块。
在nuxt.config.ts中配置使用@nuxtjs/sitemap
modules: [
//.......
'@nuxtjs/sitemap'
//.......
],
配置sitemap
前端技术更新较快，每个版本可能使用方式不一样，我这里使用的是nuxtjs/sitemap@7.2.6的版本，也是我目前在编写博客时该插件的最新版本，配置方式较多，这里主要记录动态去生成站点目录。
将后台接口放置在sitemap下的sources当中例如：
//sitemap配置
sitemap: {
sources: [
'https://api.example.com/pages/urls' //这里是你的后台请求路径
]
},
这样配置以后在访问你域名下的sitemap.xml文件时将会自动请求后台接口，我们也可以为这个请求携带参数，将路径使用数组包裹，第二个数组对象中放需要携带的参数，例如：
//sitemap配置
sitemap: {
sources: [
['https://api.example.com/pages/urls', { headers: { Authorization: 'Bearer <token>' } }]
]
},
实现动态站点接口
我项目中集成了prisma，所以我这里直接使用prisma来查出我所有博客的id，关于prisma这里不做过多赘述，有时间单独讲一讲如何使用。
在查出我所有的博客id后就是组装数据了，在#sitemap/types'中导出类型SitemapUrlInput来获取ts语法提示，由于我的每一篇博客访问路径就是*/articleDetails/** 加上文章的id，所以数据处理起来也很简单，这里我贴出我的代码示例仅供参考：
- 获取所有博客的id和创建时间
//获取所有博客的id和时间集合
export async function getSiteMap() {
const siteMap = await prisma.blogs.findMany({
select: {
id: true,
createTime: true,
},
orderBy: {
createTime: 'desc',
}
});
return siteMap;
}
- 拼装站点数据
import type { SitemapUrlInput } from '#sitemap/types'
export async function getSiteMap(event: H3Event) {
const siteMap = await blogModel.getSiteMap();
const urls = siteMap.map((item) => {
return {
loc: `/articleDetails/${item.id}`,
lastmod: item.createTime as Date,
_sitemap: 'page'
}
});
if (!siteMap.length) {
return [];
}
return urls satisfies SitemapUrlInput[]
}
在编写controller的时候注意编写一个GET接口
完成后打开项目在项目根路径下访问sitemap.xml即可验证是否成功
登录后可查看并参与评论
目录导航
友情链接
暂无链接