iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

PWA, Severless, GraphQL實作系列 第 7

[影片]Gatsby.js 未來的網頁07:自動生成文章

  • 分享至 

  • xImage
  •  

上一篇中我們準備好了Markdown、post template,以及相應的一些GraphQL query,今天就要使用Gatsby提供的createPages API自動産生blog文章。

YouTube Video:
Yes

gatsby-node.js

gatsby-node.js便是我們使用createPages的地方。Gatsby會根據這裡面的設定産生相應的node(post, page等)。如果主目錄下找不到這個文件,可自行新增,但名稱必需使用gatsby-node.js。

在gatsby-node.js中加入:

const path = require('path');

exports.createPages = ({boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;

  const postTemplate = path.resolve('src/templates/post.js');

  return graphql(`{
    allMarkdownRemark {
      edges {
        node {
          html
          id
          frontmatter {
            path
            title
          }
        }
      }
    }
  }`)
  .then(res => {
    if (res.errors) {
      return Promise.reject(res.errors);
    }

    res.data.allMarkdownRemark.edges.forEach(({node}) => {
      createPage({
        path: node.frontmatter.path,
        component: postTemplate
      })
    })
  })
}

我們用GraphQL取得所有的文章,用foreach針對每一篇文章使用createPage建立新頁面,這裡則需要用到path和postTemplate。

更正:

上一篇的templates/blog.js當中的:

import React from 'react'

React 需要大寫。

另外,20-10-2018-blog-post-1/index.md當中:

path: '/blog-post-1'

引號後漏了“/”。

同步發表於:NodeJust.com


上一篇
[影片]Gatsby.js 未來的網頁06:加入Markdown
下一篇
[影片]Gatsby.js 未來的網頁08:GraphiQL
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言