Nuxt.jsでサイトマップを自動生成できなかな～と思ったら方法があった。
npm run generateで静的ウェブサイトを生成した際に、一緒に自動生成が可能。
方法
@nuxtjs/sitemapを使用する。
@nuxtjs/sitemap
インストール
npm または yarn でパッケージをインストールする。
$ npm install --save @nuxtjs/sitemap
設定ファイルに@nuxtjs/sitemapを追加
nuxt.config.jsのmodulesオプション内に、@nuxtjs/sitemapを追加
nuxt.config.js
module.exports = {
modules: [
...,
'@nuxtjs/sitemap'
],
...
}
使用しているモジュールが一つであれば、
nuxt.config.js
module.exports = {
modules: ['@nuxtjs/sitemap'],
...
}
サイトマップに関する設定
nuxt.config.jsに、sitemapオプションを追加する。
この中にサイトマップに関する設定を書く。
nuxt.config.js
const axios = require('axios')
module.exports = {
modules: ['@nuxtjs/sitemap'],
sitemap: {
path: '/sitemap.xml',
hostname: 'https://example.com',
// generate: true,
exclude: [
'/admin'
],
routes (callback) {
axios.get('https://api.example.com/articles')
.then((res) => {
var routes = res.data.map((articles) => {
return '/articles/' + articles.id
})
callback(null, routes)
})
.catch(callback)
}
},
...
}
各パラメーターについて
path
生成されるサイトマップファイルの名前。
generateオプションでdirを変更していなければ、distフォルダの中に生成される。
hostname
サイト名。
generate
nuxt generate時に静的なサイトマップファイルを生成するかの設定。
ここをtrueにしておかないとサイトマップファイルが生成されないので注意。
exclude
サイトマップに含めたくないURLを指定できる。
管理者ページなどがある場合に使用する。
routes
サイトマップに含めるURLを追加する。
基本的にはgenerateオプションのroutesと同じように記述すればOK
上のコードはAPIから記事の一覧を取得して、記事毎のURLをroutesに追加する例。
デプロイ
あとはnpm run generateで静的ファイルを生成すると、サイトマップも一緒に生成される。
生成された他のファイルと一緒にサーバーへアップロードすれば完了。
追記
パラメーターgenerateはバージョン1.0.0以降不要となったため、打ち消し線を入れ、サンプルコード内をコメントアウトしました。