์ด๊ฒ์ ํ์ฌ ๋ด ์ฝ๋์ ์ผ๋ถ์ ๋๋ค.
const posts = result.data.allCockpitHello.edges
const date = new Intl.DateTimeFormat("default", {
month: "short",
day: "2-digit",
year: "numeric",
}).format(posts.node.cockpitCreated,);
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: `/blog/${post.node.Name.value}`,
component: path.resolve(`./src/components/single.js`),
context: {
slug: post.node.Name.value,
date,
previous,
next,
},
})
})
date
์ prop์ผ๋ก _single.js_ ๋๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ์ ๋ฌํ ์์๋ ๋ฐฉ๋ฒ์ด ๊ถ๊ธํฉ๋๋ค.
@ Hypothesis-github ์ด์ ์ createPage
API๋ฅผ ์ฌ์ฉํ์ฌ ๋จ์ผ ๊ตฌ์ฑ ์์์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ์
ํ๊ณ ์์ต๋๊น? ์๋๋ฉด ๊ทธ ์ฑ๊ธ์ด ์ค์ ๋ก ํ
ํ๋ฆฟ์
๋๊น? ๊ทธ๋ฆฌ๊ณ ์๋ง๋ ๋น์ ์ด ์ํ๋ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const posts = result.data.allCockpitHello.edges
const date = new Intl.DateTimeFormat("default", {
month: "short",
day: "2-digit",
year: "numeric",
}).format(posts.node.cockpitCreated,);
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: `/blog/${post.node.Name.value}`,
component: path.resolve(`./src/components/single.js`),
context: {
slug: post.node.Name.value,
cockpidate:date,
previousitem:previous,
nextitem:next,
},
})
})
๊ทธ๋ฆฌ๊ณ single.js
:
import React from "React"
import {Link} from "gatsby"
const Single=props=>{
const {pageContext}= props
const {slug,cockpidate,nextitem,previousitem}= pageContext
return (
<div>
<h3>{slug}</h3>
<hr/>
<h5>created at {cockpidate}</h5>
<Link to={nextitem}/>next item</Link>
<Link to={previousitem}/>previousitem</Link>
<div>
)
}
export default Single
ํผ๋๋ฐฑ์ ์์ ๋กญ๊ฒ ์ ๊ณตํ์ญ์์ค
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
@ Hypothesis-github ์ด์ ์
createPage
API๋ฅผ ์ฌ์ฉํ์ฌ ๋จ์ผ ๊ตฌ์ฑ ์์์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ์ ํ๊ณ ์์ต๋๊น? ์๋๋ฉด ๊ทธ ์ฑ๊ธ์ด ์ค์ ๋ก ํ ํ๋ฆฟ์ ๋๊น? ๊ทธ๋ฆฌ๊ณ ์๋ง๋ ๋น์ ์ด ์ํ๋ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.๊ทธ๋ฆฌ๊ณ
single.js
:ํผ๋๋ฐฑ์ ์์ ๋กญ๊ฒ ์ ๊ณตํ์ญ์์ค