Gatsby上のMDX記事の一覧を作成する方法のメモです。 昨日までに作成した資産 に対して記事一覧ページを追加します。
1.ゴール
以下の仕様にします。
- デフォルトページ (index.html) にアクセスすると記事一覧を表示する。
- 記事一覧には各記事のタイトル及びリンクと記事投稿日付を表示する。
- 記事一覧は日付の降順で並べる（新しい記事をより上に表示する）。
2.各記事の修正
現在存在する2つの記事の frontmatter (MDXファイルの --- より上の部分) に対して以下の修正を行います。
- どちらもタイトルが「テスト」になっていて判別できないので、「テスト1」「テスト1」に変更する。
- 日付 (date) を追加する。記事一覧への表示とソートに使用する。
---
slug: "test1"
title: "テスト1"
date: 2021-04-17
---
(省略)---
slug: "test2"
title: "テスト2"
date: 2021-04-18
images:
- ./image-01.jpg
- ./image-02.jpg
- ./image-03.jpg
---
(省略)3.index.js の作成
記事一覧を表示するためのページとなる index.js を src/pages フォルダに作成します。
import React from "react"
import { Link, graphql } from "gatsby"
const Article = ({ info }) => {
const {title, slug, date} = info
return (
<div>
<h1><Link to={slug}>{title}</Link></h1>
<h2>{date}</h2>
</div>
)
}
const Index = ({ data }) => {
return (
<div>
{data.allMdx.edges.map(e => <Article info={e.node.frontmatter}/>)}
</div>
)
}
export default Index
export const pageQuery = graphql`
query IndexQuery {
allMdx(sort: {order: DESC, fields: frontmatter___date}) {
edges {
node {
frontmatter {
date
slug
title
}
}
}
}
}
`- リンクには gatsby 標準の Link コンポーネントを利用する。
- GraphQL のクエリーでは日付の降順でのソートを指定する。
動作確認
gatsby develop で動作確認できます。
コードこちら: