Gatsby.js 未來的網頁07：自動生成頁面
摘要：
上一篇中我們準備好了Markdown丶post template，以及相應的一些GraphQL query，今天就要使用Gatsby提供的createPages API自動産生blog文章。
視訊教學連結
gatsby-node.js
gatsby-node.js便是我們...
上一篇中我們準備好了Markdown丶post template，以及相應的一些GraphQL query，今天就要使用Gatsby提供的createPages API自動産生blog文章。
視訊教學連結
gatsby-node.js
gatsby-node.js便是我們使用createPages的地方。Gatsby會根據這裡面的設定産生相應的node（post, page等）。如果主目錄下找不到這個檔案，可自行新增，但名稱必需使用gatsby-node.js。
在gatsby-node.js中加入：
const path = require('path');
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions;
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'
引號後漏了“/”。