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

Question

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

我看到了类似的帖子On Gatsby CMS how can i set the about page as a index page

但是，他们有一个与他们的About页面相对应的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

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