关于这篇文章

这篇文章是由一位在GatsbyJS方面还是新手的应届毕业生撰写的。
他使用了书籍作为参考资料，但由于作者处于初学者阶段，所以可能会有一些不明白的地方或者错误的部分。
希望能供大家参考，如果有任何错误之处，请随时联系我。

第九章：自動生成博客文章页面备忘录

1. 创建模板。
2. 创建 gatsby-node.js，并编写必要的设置。
3. 设置前后文章的链接。
※关于设置其他章节中提到的元数据的内容将被省略。

创建模板

在前一个章节中复制已创建的blogpost.js文件，
在src目录下新建一个名为template的文件夹，
并把它命名为blogpost-template.js，将其放置其中。

创建gatsby-node.js文件，并写入必要的配置。

在项目文件夹的根目录下创建一个gatsby-node.js文件。我们将使用Gatsby Node API中的createPages来自动生成页面。此外，可以参考以下网站。

const path = require("path")

exports.createPages = async({ graphql, actions, reporter }) => {
  const { createPage } = actions
//すべての記事ページの生成に必要なデータを取得する。投稿日（publishDate）で降順（DESC）に並べるよう指定。
  const blogresult = await graphql(`
  query {
    allContentfulBlogPost(sort: {fields: publishDate, order: DESC}) {
      edges {
        node {
          id
          slug
        }
      }
    }
  }
  `)
//クエリでエラーが発生した際のエラーメッセージを設定
  if(blogresult.errors){
    reporter.panicOnBuild(`GraphQLのクエリでエラーがが発生しました。`)
    return
  }
//forEachで各記事のデータを取り出し、ページを生成する。
  blogresult.data.allContentfulBlogPost.edges.forEach(({ node, next, previous }) => {
    createPage({
      path: `/blog/post/${node.slug}/`,　//生成するページのパスを指定
      component: path.resolve(`./src/templates/blogpost-template.js`), //生成に使用するテンプレートを指定
      context: {//指定したオブジェクトはテンプレートへ送られる
        id: node.id,//nodeのidをテンプレートに送る
      },
    })
  })
}

将blogpost-template.js文件中的查询改写为以下方式。

//idが一致した記事のデータを取得する
export const query = graphql`
query ($id: String!) { 
  contentfulBlogPost(id: {eq: $id}) {　
    title
    publishDateJP: publishDate(formatString: "YYYY年MM月DD日")
    publishDate
    category {
      categorySlug
      category
      id
    }
...

設置連結至前後的文章

在中国，将以下内容以中文进行本地化重述，只需要一个选项：
使用GraphQL中allContentfulBlogPost中的edges下的next和previous。
我们将在gatsby-node.js中添加查询和上下文的内容。

const path = require("path")

exports.createPages = async({ graphql, actions, reporter }) => {
  const { createPage } = actions
  const blogresult = await graphql(`
  query {
    allContentfulBlogPost(sort: {fields: publishDate, order: DESC}) {
      edges {
        node {
          id
          slug
        }
        next { //追加
          title
          slug
        }
        previous {//追加
          title
          slug
        }
      }
    }
  }
  `)
  if(blogresult.errors){
    reporter.panicOnBuild(`GraphQLのクエリでエラーがが発生しました。`)
    return
  }

  blogresult.data.allContentfulBlogPost.edges.forEach(({ node, next, previous }) => {
    createPage({
      path: `/blog/post/${node.slug}/`,
      component: path.resolve(`./src/templates/blogpost-template.js`), 
      context: {
        id: node.id,
        next,//追加
        previous,//追加
      },
    })
  })
}

通过使用逻辑运算符&&，在blogpost-template.js中添加到前后文章的链接。当context中没有next或previous（即最新的博客或最后的博客）时，不显示链接。

const BlogPost = ({ data, pageContext,location }) => (
<Layout>
・・・・

<ul className="postlink">
  {pageContext.next &&(
  <li className="prev">
    <Link to={`/blog/post/${pageContext.next.slug}/`} rel="prev">
      <FontAwesomeIcon icon={ faChevronLeft }/>
      <span>{pageContext.next.title}</span>
    </Link>
  </li>
  )}
  {pageContext.previous &&(
  <li className="next">
    <Link to={`/blog/post/${pageContext.previous.slug}/`} rel="next">
      <span>{pageContext.previous.title}</span>
      <FontAwesomeIcon icon={ faChevronRight }/>
    </Link>
  </li>
  )}
</ul>
</Layout>
)

在这种情况下，链接已完成。链接箭头使用了Font Awesome，并在其他章节进行了解释。