如何将 Gatsby 站点的索引页面设置为动态生成的页面之一？

Question

我有一个 Gatsby 站点，它使用 GraphQL 从 Wordpress REST API 查询信息以动态创建站点页面。我想将我的索引页设置为动态创建的主页，即home.html

我在 Gatsby CMS 上看到了类似的帖子 如何将关于页面设置为索引页面

但是，他们有一个about.js与他们的关于页面相对应的文件，这意味着他们可以将其导出为一个组件并在索引中使用它，或者他们甚至可以将该文件的内容复制到index.js. 我想设置为我的索引的主页是动态生成的，并且使用了不能在page.js模板之外使用的 GraphQL 查询。所以我没有看到将它复制到另一个文件的简单方法。

我想我的最后一个选择是将我的服务器设置为指向其中的静态文件public/home.html并将其作为站点根目录，但该帖子中的人试图阻止人们这样做。

有任何想法吗？

这是生成站点页面的 page.js 模板：

const PageTemplate = ({ data }) => (
    <Layout>
        {<h1 dangerouslySetInnerHTML={{ __html: data.currentPage.title }} />}
        {
           renderBlocks(gatherBlocks(data.currentPage.acf.page_blocks, data))
        }
    </Layout>
);

export default PageTemplate;

export const pageQuery = graphql`
    query ($id: String!) {
        currentPage: wordpressPage(id: {eq: $id}) {
            title
            id
            parent {
                id
            }
            template
            acf {
                page_blocks {
                block_type {
                    acf_fc_layout
                    cs_title
                    cs_text
                }
                wordpress_id
                }
            }
        }
    }
`;

这是我的索引页：

import React from "react"

import Layout from "../components/global/Layout"

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to the Tank Gatsby site.</p>
    <p>Now go build something great.</p>
  </Layout>
)

export default IndexPage

Answer 1

我今天也遇到了同样的情况。我使用以下方法使用动态创建的带有 uri '/home' 的页面（使用 GraphQL 查询从 wordpress 获取）作为我的 Gatsby 站点的主页：

1. 删除页面目录中的默认 index.js 文件。
2. 在 gatsby-node.js 文件中，在使用 CreatePage API 之前将页面的 uri 从 '/home' 更改为 '/'。这是实现所需结果的示例代码：

// loop through WordPress pages and create a Gatsby page for each one
  pages.forEach(page => {
    if(page.uri==='/home/')
      page.uri = '/'
    actions.createPage({
      path: page.uri,
      component: require.resolve(`./src/templates/${page.template.templateName}.js`),
      context: {
        id: page.id,
      },
    })
  })

在上面的代码中，页面是指使用 GraphQL 从 WordPress 获取的页面。

Answer 2

我能够通过将page.js模板的内容复制到 来解决这个问题index.js，但我没有使用常规的 GraphQL 查询（该查询不能在页面模板之外使用），而是使用useStaticQuery并硬编码了我从中检索数据的索引页面的 id 。