16、Gatsby 网站开发：页面创建与资产处理

Gatsby 网站开发：页面创建与资产处理

1. 程序化页面创建

1.1 生成 Slug

在对 gatsby-node.js 进行修改后，保存文件并重启开发服务器。接着在 GraphiQL 中运行以下查询：

{
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}

运行该查询后，你会在每个 Markdown 节点中看到生成的 slug。

1.2 添加模板

为了基于 GraphQL 数据程序化地生成页面，我们需要一个模板。创建一个名为 src/templates/post.js 的新文件，内容如下：

// src/templates/post.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function Post({ data }) {
  const post = data.markdownRemark
  return (
    <Layout>
      <h1>{post.frontmatter.ti