Gatsby 記事テンプレート作成
2022-11-13
記事ページ作成しよう
今回のセクションでは記事ページの作成をしていきましょう。
参考:https://www.gatsbyjs.com/docs/tutorial/part-6/#task-create-blog-post-page-template ˜
テスト用の記事データを作成する
Gatsbyでは
Contentful
このハンズオンでは記事データを
MDX
このセクションでは簡単な使用法のみの紹介になりますが、
MDX
MD
記事を書く人がReactを扱える技術者であれば、有力な選択肢として上がってくると思います。
では、実際にテストの記事データを作成していきましょう。
下記2ファイルを追加してください。
src/posts/test01.mdx
---
title: test 01
slug: test-01
description: test post 01
tag:
- test tag 01
- test tag 02
date: 2022-11-20
---
# test post 01 h1
test post 01 body
src/posts/test02.mdx
---
title: test 02
slug: test-02
description: test post 02
tag:
- test tag 01-2
- test tag 02-2
date: 2022-11-21
---
# test post 02 h1
test post 02 body
これで記事のデータ自体は作成できたので、このデータを表示するためのテンプレートを用意していきましょう。
テンプレートを作成する
MDX
下記のような
/src/pages/{mdx.frontmatter__slug}.tsx
src/pages/{mdx.frontmatter__slug}.tsx
import * as React from 'react'
import { graphql, HeadFC } from 'gatsby'
const BlogPost = ({data, children}) => {
return (
<div>
<p>title: {data.mdx.frontmatter.title}</p>
<p>description: {data.mdx.frontmatter.description}</p>
<p>tag: {data.mdx.frontmatter.tag}</p>
<p>date: {data.mdx.frontmatter.date}</p>
<p>{children}</p>
</div>
)
}
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
description
tag
date(formatString: "YYYY-MM-DD")
}
}
}
`
export const Head: HeadFC = () => <title>Blog</title>
export default BlogPost
Gatsbyでは
page
それと似たような機能で、
page
{mdx.frontmatter__slug}.tsx
mdx
slug
なので、この名称を
{mdx.frontmatter__test}.tsx
mdx
test
再度
npm run develop
記事テンプレートの解説
下記部分が先程紹介した
page query
id
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
description
tag
date(formatString: "YYYY-MM-DD")
}
}
}
`
上記クエリを実行することで
title
このクエリで取得してきたデータは、下記箇所の第一引数(
data
第二引数(
children
mdx
body
const BlogPost = ({data, children}) => {
return (
<div>
<p>title: {data.mdx.frontmatter.title}</p>
<p>description: {data.mdx.frontmatter.description}</p>
<p>tag: {data.mdx.frontmatter.tag}</p>
<p>date: {data.mdx.frontmatter.date}</p>
<p>{children}</p>
</div>
)
}
型エラーの対応
この状態だと、引数の
data
children