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文件，这意味着他们可以将其导出为组件并在索引中使用它，甚至可以将该文件的内容复制到{{1 }}。我要设置为索引的主页是动态生成的，并且使用了无法在index.js模板之外使用的GraphQL查询。因此，我看不到将其复制到另一个文件的简便方法。

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

有什么想法吗？

这是page.js模板，用于生成网站页面：

public/home.html

这是我的索引页：

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
                }
            }
        }
    }
`;

Answer 1

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

删除页面目录中的默认index.js文件。
在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

我找不到以编程方式创建索引页面的简单方法。尽管如此，它仍然有效，详情如下。

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查询（无法在页面模板之外使用），而是使用了{ {3}}而是硬编码了我要从中检索数据的索引页的ID。

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

4 个答案: