如何将我的Gatsby网站的索引页面设置为动态生成的页面之一? [英] How can I set the index page of my Gatsby site to be one of the dynamically generated pages?

问题描述

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

I have a Gatsby site that queries information from a Wordpress REST API with GraphQL to dynamically create the site pages. I'd like to set my index page to be the homepage that is being created dynamically i.e home.html

我看到了与此类似的帖子 在Gatsby CMS上如何我可以将About页面设置为索引页面吗?

I saw this post that was similar On Gatsby CMS how can i set the about page as a index page

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

However, they have an about.js file that corresponds to their about page, meaning they can export it as a component and use it in index or they can even just copy the contents of that file over to index.js. The homepage that I want to set as my index is being generated dynamically and using a GraphQL query that can't be used outside of the page.js template. So I don't see an easy way to copy that over to another file.

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

I guess my last option would be to set my server to point to the static file in public/home.html and serve that as the site root, but the person in that posting tries to deter people from doing that.

有什么想法吗?

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

Here is page.js template that generates the pages of the site:

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

推荐答案

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

I experienced the same situation today. I used the following approach to use my dynamically created page with uri '/home'(fetched from wordpress using GraphQL query) as the home page of my Gatsby site:

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

1. Delete the default index.js file in your pages directory.
2. In gatsby-node.js file, change the uri of page from '/home' to '/' just before using the CreatePage API. Here is the sample code to achieve the desired result:

// 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获取的页面.

In the above code, pages refer to the pages fetched from WordPress using GraphQL.

这篇关于如何将我的Gatsby网站的索引页面设置为动态生成的页面之一?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！