如何将我的 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

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

1. 删除页面目录中的默认 index.js 文件。
2. 在 gatsby-node.js 文件中，更改 uri 在使用 CreatePage API 之前，页面从“/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

有一个解决方案：在gatsby-node.js 中使用createRedirect。 例如：

index.tsx

import React from 'react'
export default () => <></>

gatsby-node.js

...

exports.createPages = async ({ actions }) => {
  const { createRedirect } = actions

  createRedirect({
    fromPath: '/',
    toPath: '/home',
    isPermanent: true,
    redirectInBrowser: true,
 })
}

...

Answer 3

我找不到以编程方式创建 index 页面的简单方法。尽管如此，它仍然可以工作，详情如下。

• createRedirect 是有效的方法，但可能会影响 SEO 并且肯定是 affects E2E tests 会导致实际页面内容的呈现有一点延迟。

• 要考虑的另一件事是，pages/index.js 文件是必需，以便在生产环境中生成 index.html 文件建造。这妨碍了使用createPage({ path: '/', ...，因为在我的例子中，以编程方式创建的 index 页面被静态页面（由 pages/index.js 组成）覆盖。这对我来说似乎是一个错误（或者更确切地说是不支持的功能）。对应github issue。

• looks like deletePage 和 createPage gatsby-node API 异步工作，因此我们必须 delete 从静态文件创建索引页面和 create 在同一个回调中我们想要的页面。 不是 100% 确定这一点，但这是我的观察。

• onCreatePage API 是一个很好的候选者，因为它会在创建原始 index 页面时被调用，我们可以将其取出并替换为以编程方式创建的自定义页面。

• 但是有一个问题 - CreatePageArgs 接口（与 CreatePagesArgs 不同）不提供对 graphql 的引用，因此获取数据可能会很棘手。

最终解决方案：

export function onCreatePage(args: CreatePageArgs): void {
  const { page } = args;

  if (page.path === '/') {
    const { deletePage, createPage } = args.actions;

    const indexPageComponentPath = path.resolve(
      './src/pages/index.tsx',
    );

    deletePage({
      path: '/',
      component: indexPageComponentPath,
    });

    createPage({
      path: '/',
      component: yourComponentPath,
    });
  }
}

Answer 4

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