md ファイルのパスに合わせて Nuxt のパスも設定する

Nuxt.js に MarkDown を読み込む」で、Markdownファイルを Vue に流し込むことができました。
今回は、ディレクトリに散らばるmdファイルのパスに合わせたURLにアクセスすると該当ページが表示されるようにします。

例えば、https://bitto.jp/blog/test でアクセスされたら ~/md-contents/blog/test.md を表示したいですね。

動的パスに対応する vue ファイルを作成する

URL が md ファイルまでのパスとして渡されるので、これを元にファイルを取得します。
Nuxt.jsasyncDataメソッドで受け取ったparams.pathMatchから取得できます。

<template lang="pug">  
.posts-contents  
  article  
    .title.is-1 {{attributes.title}}  
    .markdown-body(v-html="html")  
</template>  
<script>  
  export default {  
    async asyncData({ params }) {  
      const.path = params.pathMatch  
      // URLからパス解決  
      const fileContent = await import(`~/md-contents/${path.replace(/\/$/, '')}.md`)  

      // mdファイルの属性をすべてページのデータとして保持  
      return {  
        ...fileContent,  
        title: fileContent.attributes.title  
      }  
    }  
  }  
</script>  

ソース中の...fileContentが何しているかわからない方は「JS の分割代入」も参考にしてみてください。

これで動的パスから解決できるようになりました。

devモードの場合このまま動作しますが、ホスティングのためにnuxt generateするためには予め md ファイルに対応する全てのパス情報が必要です。

asyncDataSSR(server side rendering)でコールされるメソッドです。
つまり、サーバ側で実行されてからクライアントに返す情報になるので、nuxt generate時には静的情報となります。

この辺は「sitemap.xml の作成(動的パスへの対処)」で解説予定。

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe