Vitepress自动生成sitemap.txt--SEO优化 ​

本文将讲述vitepress生成的静态页面网站如何自动化构建sitemap.txt站点地图，方便搜索引擎进行抓取。

网站是否需要sitemap？ ​

根据google官方文档，如果你的文章页面量小于三位数，那么你没有必要提供站点地图，爬虫可以抓取到你网站所有页面，前提是你的所有页面都可以从主页通过点击进入。如果你的某些页面无法从主页进入或者站点的页面数量巨大，又或者你希望google早几天把页面编入索引，那么你需要一份sitemap--站点地图。

vitepress如何生成sitemap ​

网络上一些博客框架本身会提供seo的相关优化其中就包括了sitemap的生成，而vuepress也有相关的插件可以辅助生成。然而我的博客搭建使用的是vitepress搭配主题文件，翻遍了github也没有找到生成sitemap的工具，无奈之下，打开了vitepress官方文档，文档中提到，没有直接生成的属性，但是提供了buildEnd钩子，用户可以自己定义方法生成。

打印siteConfig可以发现两个有用的属性pages和outDir。

• pages是一个数组，包含了所有页面的路径，不过是md结尾的，我们拼上网站地址并将md替换为html即可。
• outDir输出文件夹的地址。

最后我们在.vitepress文件夹的config.ts文件中添加以下代码

const fs = require('fs');

export default defineConfig({
  // ...其他配置
  async buildEnd(siteConfig) {
    // 配置网站基础路径
    const baseURL = 'https://blog.laoyutang.cn';
    let siteMapStr = '';
    for (const page of siteConfig.pages) {
      siteMapStr += `${baseURL}/${page.replace(/md$/, 'html')}\n`;
    }
    // 生成文件
    try {
      fs.writeFileSync(`${siteConfig.outDir}/sitemap.txt`, siteMapStr);
    } catch (err) {
      console.log('create sitemap.txt failed!', err);
    }
  },
})

后记 ​

代码实现很简单，只是网上没有相关讨论罢了，可能也没多少人像我用vitepress搭博客吧😂。最后感谢下粥里有勺糖大佬提供的博客主题，主题的清新加上vite的快速，很喜欢的组合。