gatsby starter blogはcontent、blogにあるマークダウンファイルから記事が作られている。それをJSONに置き換えて記事ができるかと試してみた。
JSONにタイトルや日付、説明などの情報を書き込んでからgatsbyに渡してブログ形式でサイトを生成させよう。gatsby starter blogのいいところはRSSフィードや、検索エンジンの最適化だったり、PWAの作成、サイトの軽量化などを簡単にできるので、gatsby starter blogに合う形に情報を渡す。
初めは、Alljsonにslugを追加すればいいのかなと思ったが、データを読み込んでみるとすべてのファイルが一緒くたにされて、ファイルごとに抽出ができなかった。調べたら方法があるのかもしれないがAllfieにextension: {eq: "json"}で拡張子でfilterをかけて絞り込んだ。
github.com export const query = graphql
query MyQuery($slug: String!) { file(extension: {eq: "json"},fields: {slug: { eq: $slug } }) { childrenJson { Asin Booktype Category Contributor ImageURL Points Price Publisher Title URL Saletitle Date(formatString: "YYYY年MM月DD日") } } site { siteMetadata { title } } }
やってみた問題点は、一記事の表示データ量が多いのでlighthouseで確認すると評価が下がった。なので、ページネーションで分割したほうがよさそうだ。そこで、fetchでjsonを読み込んでページネーションで表示を管理してみる。
gatsby-plugin-json-outputがサイトのjsonを分割してくれるようだ。 qiita.com
react-paginateを使えばいいんじゃないか
React-Paginateを用いたページネーションの導入手順 qiita.com
以前はマークダウンファイルをMDXに置き換えて記事を作り、jsonファイルからデータを読み込み、合わせてページを生成する方法をとった。 kyukyunyorituryo.github.io
