nuxt+contentでsitemap生成

なぜ？

nuxt の sitemap プラグインでは pages 配下のものは自動でパスとして登録してくれます。 しかし、pages/_id.vueやpages/_slug.vueのような動的にパスがきまるものは自動で登録することができません。そのため、content などを使用している場合は、自身んで登録する必要が出てきます。

方法

content の中身が増える度に自分で routes に登録してもいいと思いますが、プログラマーっぽくないので、関数を使っていきます。 今回僕は/blog/_slug.vueに対しての操作を行ったため、nuxt.config.js に以下のように記載しました。content の api で slug 取得して、配列で URL 返しているだけですねー。

sitemap: {
  hostname: 'https://mobtown.jp',
  gzip: true,
  routes: async () => {
    const { $content } = require('@nuxt/content');
    const files = await $content('article').only(['slug']).fetch();
    return files.map((f) => `/blog/${f.slug}`);
  },
},

生成されたものは当然 https://mobtown.jp/sitemap.xml からみることができます。

感想

content の api が結構有能に感じました。 関係ないですが、wsl2 上の emacs で書いた記事だったので結構しんどかったです。