在gatsby中使用不同的模板创建页面

在 Gatsby 中，你可以使用不同的模板来创建页面。Gatsby 提供了多种方法来实现这一点，最常见的方法是使用 createPages API 在 gatsby-node.js 文件中动态创建页面，并为每个页面指定不同的模板。

以下是一个详细的步骤指南，展示了如何在 Gatsby 中使用不同的模板创建页面。

1. 创建模板文件

首先，创建不同的模板文件。例如，创建两个模板文件 src/templates/templateA.js 和 src/templates/templateB.js。

`src/templates/templateA.js`

import React from 'react';
import { graphql } from 'gatsby';

const TemplateA = ({ data }) => {
  const { markdownRemark } = data;
  const { frontmatter, html } = markdownRemark;

  return (
    <div>
      <h1>{frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
      }
      html
    }
  }
`;

export default TemplateA;

`src/templates/templateB.js`

import React from 'react';
import { graphql } from 'gatsby';

const TemplateB = ({ data }) => {
  const { markdownRemark } = data;
  const { frontmatter, html } = markdownRemark;

  return (
    <div>
      <h1>{frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
      }
      html
    }
  }
`;

export default TemplateB;

2. 创建 Markdown 文件

在 src/content 目录下创建一些 Markdown 文件，并在文件的前置数据（frontmatter）中指定模板类型。

`src/content/page1.md`

---
title: "Page 1"
template: "templateA"
slug: "/page-1"
---

This is the content of Page 1.

`src/content/page2.md`

---
title: "Page 2"
template: "templateB"
slug: "/page-2"
---

This is the content of Page 2.

3. 配置 `gatsby-node.js`

在 gatsby-node.js 文件中，使用 createPages API 动态创建页面，并根据前置数据中的模板类型选择相应的模板。

const path = require('path');

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

  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              slug
              template
            }
          }
        }
      }
    }
  `);

  if (result.errors) {
    console.error(result.errors);
    return;
  }

  const pages = result.data.allMarkdownRemark.edges;

  pages.forEach(({ node }) => {
    const template = node.frontmatter.template;
    const slug = node.frontmatter.slug;

    createPage({
      path: slug,
      component: path.resolve(`src/templates/${template}.js`),
      context: {
        slug: slug,
      },
    });
  });
};

4. 安装必要的插件

确保你已经安装了必要的插件，如 gatsby-source-filesystem 和 gatsby-transformer-remark，并在 gatsby-config.js 中进行配置。

module.exports = {
  siteMetadata: {
    title: `Gatsby Site`,
  },
  plugins: [
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
  ],
};