Laoyutang
搜索 K

Appearance

On this page

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

上期讲到了vitepress生成sitemap的文本格式文件，但是有时候我们需要经常修改文章并且实时告诉搜索引擎最后的修改时间，那么我们就需要提供XML格式的sitemap来提供页面的最后更新时间。

实现原理 ​

  • 与上期相同，采用了buildEnd钩子来生成文件，使用参数中的pages和outDir属性遍历生成sitemap文件，具体请详见Vitepress添加sitemap.txt-。
  • 文件最后修改时间使用git的commit记录时间，使用git log指令来获取。
  • git log -1 --format=%at filePath，-1获取最后一次提交，--format=%at获取提交时间，filePath文件路径。
  • 使用cross-spawn包来启动node子线程执行shell命令。

完整代码 ​

js
const fs = require('fs');
const spawn = require('cross-spawn');

export default defineConfig({
  async buildEnd(siteConfig) {
    const baseURL = 'https://blog.laoyutang.cn';

    try {
      let siteMapStr = '';
      for (const page of siteConfig.pages) {
        if (page === 'index.md') continue;
        // 获取最后修改日期，基于git
        const filePath = siteConfig.srcDir + '/' + page;
        const date = new Date(
          parseInt(
            spawn.sync('git', ['log', '-1', '--format=%at', filePath]).stdout.toString('utf-8')
          ) * 1000
        );
        siteMapStr += `
        <url>
          <loc>${baseURL}/${page.replace(/\.md$/, '')}</loc>
          <lastmod>${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}</lastmod>
        </url>
      `;
      }

      const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${siteMapStr}
        </urlset>
      `;

      fs.writeFileSync(`${siteConfig.outDir}/sitemap.xml`, xmlStr);
    } catch (err) {
      console.log('create sitemap.txt failed!', err);
    }
  },
})

Tips: 冷知识，日期字符串应该使用${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}获取，如果直接使用.getLocaleDateString()linux和windows下获取是格式是不同的，linux下获取格式为DD/MM/YYYY，而windows下是YYYY/MM/DD。

文件预览： sitemap.xml预览

Github Actions特别注意 ​

细心的读者一定注意到了，上图的预览中日期全都变成当前时间了，这是由于github actions的checkout插件默认只会获取最后一次提交记录，所以为了能够正确的生成，请在workflows文件中添加以下参数。

yml
- uses: actions/checkout@v3
    with:
      fetch-depth: 0

上次更新于: