sitemap.xml の作成(動的パスへの対処)
create: 2019-11-30
Blog Nuxt化 Nuxt.js Markdown sitemap

md ファイルのパスに合わせて Nuxt のパスも設定する」で URL から md ファイルをロードする事ができました。

ただ、動的パスの場合は generate 対象にならないので、全ての md ファイルパスを generate 対象としてnuxt.config.jsに登録する必要があります。
対象パスはついでにsitemap.xmlの対象にして、Google Search Consoleのエサにします。

md ファイルを全部検索する

まずは全 md ファイルを検索して、パス情報を得ます。
nuxt generate コマンド実行時なので、直接ファイルシステムから md ファイルたちを読み込みます。

今回はwalk-syncというライブラリを利用しました。
非同期 walker だと面倒なので同期 walker です。

yarn add -D walk-sync

walk-syncを使ってディレクトリから md ファイルを総ざらいします。

import walkSync from 'walk-sync'
// ファイルパスをURLに変換する関数
function path2url(path) {
  return `/posts/${path.replace(/\.md$/, '')}`
}

// 正規ルート一覧
const paths = walkSync('./src/md-contents', { globs: ['**/*.md'] })
const mdRoutes = paths.map((path) => {
  return path2url(path)
})

検索したパス情報を nuxt.config.js に送る

パス情報を作成できたら、nuxt.config.jsに登録します。
generate.routesプロパティに、コールバックにパス情報を渡して実行する関数を記述します。

export default {
  // generate対象パスを返す
  generate: {
    routes: (callback) => callback(null, mdRoutes)
  }
}

sitemap.xml にも登録

generate 対象パスは、そのままサイトマップにも載せたいので登録します。
~/pages配下のページは自動で入ります。
sitemap.routesに追加するのは動的パスだけで OK です。
また、sitemap に載せたくない管理者ページなどはexcludeに書くことができます。

export default {
  // サイトマップにも登録する
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://bitto.jp',
    routes: mdRoutes,
    exclude: ['/admin']
  }
}
nuxt.config.js の全体像
import walkSync from 'walk-sync'
// ファイルパスをURLに変換する関数
function path2url(path) {
  return `/posts/${path.replace(/\.md$/, '')}`
}

// 正規ルート一覧
const paths = walkSync('./src/md-contents', { globs: ['**/*.md'] })
const mdRoutes = paths.map((path) => {
  return path2url(path)
})

export default {
  // generate対象パスを返す
  generate: {
    routes: (callback) => callback(null, mdRoutes)
  },
  // サイトマップにも登録する
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://bitto.jp',
    routes: mdRoutes,
    exclude: ['/admin']
  }
}

以上でnuxt generate時に動的パスの解決、さらにsitemap.xmlへの登録もできました!