前提・実現したいこと
GatbyJSでブログ機能つきのポートフォリオサイトを制作しています。
markdownプラグインを使ってブログ記事を追加することはできましたが、次は応用してポートフォリオのプロジェクトページを作成しようとしています。
発生している問題・エラーメッセージ
ブログの記事とプロジェクト記事を出し分けたいが、どちらか片方のみの記事しか表示されない。
やったこと
templates/にプロジェクト用の記事を用意しました。
src/pages/index.js // ブログ用記事 src/posts/helloblog.md // プロジェクト用記事 src/works/works.md src/templates/post.js src/templates/project.js
該当のソースコード
javascript
1 2//gatsby-node.js 3exports.createPages = async gatsbyNodeHelpers => { 4 const { graphql, actions } = gatsbyNodeHelpers 5 const { createPage } = actions 6 7 const blogPostTemplate = require.resolve(`./src/templates/post.js`) 8 const projectPageTemplate = require.resolve(`./src/templates/project.js`) 9 10 const result = await graphql(` 11 query { 12 allMarkdownRemark(sort: {order: DESC, fields: frontmatter___date}) { 13 edges { 14 node { 15 frontmatter { 16 slug 17 } 18 } 19 } 20 } 21 } 22 `) 23 24 // ブログ記事個別ページ // 25 const posts = result.data.allMarkdownRemark.edges 26 posts.forEach((post, index) => { 27 // 記事ページ生成 // 28 createPage({ 29 path: `/${post.node.frontmatter.slug}/`, 30 component: blogPostTemplate, 31 context: { 32 slug: post.node.frontmatter.slug 33 } 34 }) 35 }) 36 37 const work = result.data.allMarkdownRemark.edges 38 work.forEach((work, index) => { 39 // プロジェクトページ生成 // 40 createPage({ 41 path: `/${work.node.frontmatter.slug}/`, 42 component: projectPageTemplate, 43 context: { 44 slug: work.node.frontmatter.slug 45 } 46 }) 47 }) 48}
// templates/post.js export default function BlogPost({ data, }) { const post = data.markdownRemark return ( <Layout> <div className={styles.entry}> <header className={styles.entryHeader}> <h1 className={styles.entryTitle}>{post.frontmatter.title}</h1> <time dateTime={post.frontmatter.date}>{post.frontmatter.date}</time> </header> <div className={styles.entryContent}> <div dangerouslySetInnerHTML={{ __html: post.html }} /> </div> <div className={styles.entryFooter}> </div> </div> </Layout> ) } export const query = graphql` query($slug: String!) { markdownRemark(frontmatter: {slug: {eq: $slug } }) { html frontmatter { draft slug title } } } `
// templates/project.js export default function Project({ data, }) { const work = data.markdownRemark return ( <Layout> <div> <h1>{work.frontmatter.title}</h1> <h3>{work.frontmatter.date}</h3> <div dangerouslySetInnerHTML={{ __html: work.html }} /> </div> </Layout> ) } export const query = graphql` query($slug: String!) { markdownRemark(frontmatter: { slug: { eq: $slug } }) { html frontmatter { date(formatString: "YYYY-MM-DD") draft slug title } } } `
// index.js export default function Index({ data, }) { return ( < Layout > <SEO /> <section className={styles.ly_portfolio}> <ol> // ここにworks/work.mdの記事を表示させたい {data.allMarkdownRemark.edges.map(({ node }) => ( <li key={node.frontmatter.slug}> <Link to={`/${node.frontmatter.slug}`}> <div className={styles.clContent}> <div className={styles.el_projects__img}><img src="" alt="" /></div> <h3 className={styles.ttl}>{node.frontmatter.title}</h3> <p className={styles.txt}>idea, prototyping</p> </div> </Link> </li> ))} </ol> </section> <section className={styles.archive}> <h2>Writing</h2> <div className={styles.blogArea}> // ここにposts/helloblog.mdの記事を表示させたい {data.allMarkdownRemark.edges.map(({ node }) => ( <article key={node.frontmatter.slug} className={styles.blogEntry}> <h3 className={styles.blogEntry__heading}> <Link to={`/${node.frontmatter.slug}`}>{node.frontmatter.title}</Link> </h3> <time className={styles.blogEntry__date} dateTime={node.frontmatter.date}>{node.frontmatter.date}</time> </article> ))} </div> </section> </Layout > ) } export const query = graphql` query { allMarkdownRemark(sort: {order: DESC, fields: frontmatter___date}) { edges { node { id frontmatter { date(formatString: "YYYY-MM-DD") slug title draft } } } } } `
バージョン
Gatsby CLI version: 2.19.1
Gatsby version: 2.28.2
複数のテンプレート記事を出し分けする方法がわからず質問いたしました。ご回答よろしくお願いします。
あなたの回答
tips
プレビュー