gasekao.com
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 に一緒に入ってるので、ここでインストールする必要はありません。

できたsitemap.xml

BACK TO TOP