gatsby+cmsで動的にページを生成
Created
2020/9/23 6:27
Tags
前にやった、contentfulからデータを取得してgatsby.jsでページを作成するやつ、やり方忘れたので思い出しながらまとめてみる。
以下の本に書いてあるやつなので、より詳しく知りたい方は購入をおすすめします。なかなか良い本でした。
createPageでページを生成する
クエリで取得したデータからforEachメソッドで各記事のデータを取り出し、ページを生成。ページの生成にはcreatePagesを使って、以下のように設定。
path
生成するページのパス。ここでは
blog/post/スラッグ
をセットcomponent
生成に使用するテンプレート。
gatsby-node.js
からの相対パスで指定。ここではblogpost-template.js
を指定。JavaScript
これで記事ページが生成される。開発サーバーを起動し直して404ページを表示すると、ページが追加されていることが確認できる。
ただしこの段階では、全てのページで同じ内容が表示されてしまう。