2020-11-13
nuxt.js - prismicで動的に生成したページのsitemapをつくる
prismicで設定したuidをパスパラメータにした動的ページのsitemap.xmlの作成方法の覚書です。
@nuxtjs/sitemapをインストール
npm install @nuxtjs/sitemap
nuxt.config.js の modules に @nuxtjs/sitemap を追加
modules: [
'@nuxtjs/prismic',
'@nuxtjs/sitemap'
],
nuxt.config.js に sitemap の設定を追加
sitemap: {
path: '/sitemap.xml', //sitemap.xmlのパス
hostname: 'https://{{あなたのホスト名}}',
routes (callback) {
let apiEndpoint = "https://{{prismicのエンドポイント}}.cdn.prismic.io/api/v2"
let apiToken = "prismicのAPI TOKEN";
Prismic.getApi(apiEndpoint, {accessToken: apiToken}).then(function(api) {
return api.query(
Prismic.Predicates.at('document.type', '{{prismicに設定したコンテンツタイプ名}}')
)
}).then(function(response) {
const routes = response.results.map((post) => {
return post.uid //prismicで設定したuidをroutesに設定
})
callback(null, routes)
}, function(err) {
console.log("Something went wrong: ", err);
callback
});
}
},
indexページと同じ一覧を取得して、sitemapを生成する設定をしています。(orderはしてないです)
ここでは @nuxtjs/prismic が使えないため、prismic-javascript の関数を使用することになり、関数名が @nuxtjs/prismic と違うので注意が必要です。
prismic-javascript は @nuxtjs/prismic に一緒に入ってるので、ここでインストールする必要はありません。