2019-11-29

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

Blog Nuxt化
Nuxt.js
Markdown

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 の作成(動的パスへの対処)」で解説予定。


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy