在Gatsby中，使用Wordpress作为数据源，使用不同的模板创建不同的页面

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "your-wordpress-site-url",
        protocol: "https",
        hostingWPCOM: false,
        useACF: true,
        verboseOutput: true,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "your-wordpress-site-url",
          replacementUrl: "your-gatsby-site-url",
        },
        concurrentRequests: 10,
        includedRoutes: [
          "**/posts",
          "**/pages",
          "**/categories",
          "**/tags",
          "**/media",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: [],
        normalizer: function ({ entities }) {
          return entities;
        },
      },
    },
  ],
};

// src/templates/post.js

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

export default function PostTemplate({ data }) {
  const post = data.wordpressPost;

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

export const query = graphql`
  query($id: String!) {
    wordpressPost(id: { eq: $id }) {
      title
      content
    }
  }
`;

// src/templates/page.js

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

export default function PageTemplate({ data }) {
  const page = data.wordpressPage;

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

export const query = graphql`
  query($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
    }
  }
`;

// src/pages/posts.js

import React from "react";
import { graphql } from "gatsby";
import PostTemplate from "../templates/post";

export default function PostsPage({ data }) {
  const posts = data.allWordpressPost.edges;

  return (
    <div>
      {posts.map(({ node }) => (
        <PostTemplate key={node.id} data={{ wordpressPost: node }} />
      ))}
    </div>
  );
}

export const query = graphql`
  query {
    allWordpressPost {
      edges {
        node {
          id
          ...PostTemplateFragment
        }
      }
    }
  }
`;

// src/pages/pages.js

import React from "react";
import { graphql } from "gatsby";
import PageTemplate from "../templates/page";

export default function PagesPage({ data }) {
  const pages = data.allWordpressPage.edges;

  return (
    <div>
      {pages.map(({ node }) => (
        <PageTemplate key={node.id} data={{ wordpressPage: node }} />
      ))}
    </div>
  );
}

export const query = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          ...PageTemplateFragment
        }
      }
    }
  }
`;