schedule2020-12-16

nuxt/contentでサイトマップを作る

前回作ったブログでサイトマップを作ります。 generateで静的ページを作って公開する予定です。

セットアップ
URLのリストを作成する
サイトマップにパス以外の情報を渡す。

セットアップ

$ yarn add @nuxtjs/sitemap

nuxt.config.jsのmodulesに'@nuxtjs/sitemap'を追加します。すべてのルートが確実にキャッチされるように、インクルードした他のモジュールの後で実行する必要があります。

nuxt.config.js

export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
}

次に、サイトマップ構成のデフォルトをいくつか追加します—を追加hostnameして空の関数を設定します。この関数は、後でコンテンツのパスを取得して返すために使用します。

nuxt.config.js

export default {

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/', 
    routes: async () => {} // routesにURLを渡す
  },

}

routes: ['path/article1', 'path/article1']のように配列を渡すとサイトマップを作ってくれます。これから、この配列を網羅的に作っていく。

ドメイン名だけだとTypeError [ERR_INVALID_URL]: Invalid URL: www.suzu6.net\が出る。 URLの形式じゃないとエラーが出るのは良いね。 httpから書きます。

URLのリストを作成する

routesにサイトマップの配列を渡します。 @nuxt/contentでは以下のコードでcontent/posts/*.mdのパスを渡します。

nuxt.config.js

routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}

上記の設定でyarn run generateで同時にsitemap.xmlが作られるようになります。

dist/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>
			https://www.suzu6.net/posts/102-katex-math-functions
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/14
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/10
		</loc>
	</url>
  ...

サイトマップにパス以外の情報を渡す。

routes: [
  '/page/1',
  '/page/2',
  {
    url: '/page/3',
    changefreq: 'daily',
    priority: 1,
    lastmod: '2017-06-30T13:30:00.000Z'
  }
]

nuxt.config.js

sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/',
    routes: async () => {
      let array = [
        {
          // トップページ
          url: '/',
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date()
        }
      ];
      // コンテンツ
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
        .only(['path', 'updated_at'])
        .fetch()
      array = array.concat(
        posts.map((p) => 
          { 
            return {
              url: p.path, 
              lastmod: p.updated_at,
              priority: 1,
            }
          })
      )
      return array
    }
  },

sitemap.xml

<url>
		<loc>
			https://www.suzu6.net/
		</loc>
		<lastmod>
			2020-12-16T09:50:32.366Z
		</lastmod>
		<changefreq>
			daily
		</changefreq>
		<priority>
			1.0
		</priority>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/1
		</loc>
		<lastmod>
			2019-01-04T00:00:00.000Z
		</lastmod>
		<priority>
			1.0
		</priority>
	</url>