質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

Q&A

0回答

537閲覧

GatsbyJSでブログとプロジェクトの個別記事を出し分けたい

退会済みユーザー

退会済みユーザー

総合スコア0

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

0グッド

0クリップ

投稿2021/03/01 12:24

前提・実現したいこと

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

複数のテンプレート記事を出し分けする方法がわからず質問いたしました。ご回答よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問