如何在'gatsby-node'中使用不同的模板創建多個頁面？

Question

我是 gatsby 的新手，並嘗試使用不同的模板以編程方式創建頁面，但我正在為此苦苦掙扎。

我有兩個不同的頁面（登陸和新聞），都是用 mdx 文件編寫的，在以編程方式創建時需要不同的路由和模板。

我的登陸效果很好，但我未能添加“新聞”頁面。 我試過的一切都不起作用。

有關信息，我在降價文件的每個前端都有一個 templateKey 'press' 和 'landing'。

這是我的 gatsby-node 文件：

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");
const { fmImagesToRelative } = require("gatsby-remark-relative-images");

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

  const landingTemplate = path.resolve("src/templates/landing.js");
  // const pressTemplate = path.resolve("./src/templates/press.js");

  return graphql(`
    {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }

    const posts = result.data.allMarkdownRemark.edges;

    posts.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: landingTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });
};

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node); // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

這是我在 graphiQL 中的查詢

預先感謝您為我提供的任何幫助！

Answer 1

您必須進行兩個不同的查詢才能獲取所有新聞和所有登陸數據（按每個templateKey過濾）。 擁有不同的填充對象后，您需要為每個對象調用createPage API 以創建頁面並傳遞每個模板值。 它應該看起來像：

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");
const { fmImagesToRelative } = require("gatsby-remark-relative-images");

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

  const landingTemplate = path.resolve("src/templates/landing.js");
  const pressTemplate = path.resolve("./src/templates/press.js");

  const postQuery = await graphql(`
    {
      allMarkdownRemark(
      limit: 1000
      filter: { frontmatter: { templateKey: { eq: "press" }}},
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }
    

    const posts = postQuery.data.allMarkdownRemark.edges;

    posts.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: pressTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });

  const landingQuery = await graphql(`
    {
      allMarkdownRemark(
      limit: 1000
      filter: { frontmatter: { templateKey: { eq: "landing" }}},
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }


    const landings = landingQuery.data.allMarkdownRemark.edges;

    landings.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: landingTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });
  
};

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node); // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

您的錯誤是您返回了 GraphQL 查詢，這限制了您創建新查詢的能力。 請注意，我還添加了一種基於async的方法，帶有async和await函數以優化查詢和計時。

在不知道您的數據結構的情況下，我復制了更改templateKey值的查詢，當然，您需要自定義要為每個模板收集的數據以及要通過上下文 API 傳遞的數據。