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

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;

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;

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

This is the content of Page 1.

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

This is the content of Page 2.

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,
      },
    });
  });
};

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

gatsby develop