Гэтсби второй шаблон макета - PullRequest
0 голосов
/ 30 августа 2018

У меня есть шаблон, который я создал, и он используется для страниц, на которых отображается один продукт (blog-post.js). Теперь мне нужен новый вид страниц с собственным шаблоном (category-post.js), который будет отображать все товары в определенной категории. Я не знаю, сколько будет когда-либо категорий, поэтому мне нужны динамические (программно созданные).

Чтобы сделать это, я думаю, что я должен использовать API onCreatePage. Код работал нормально, прежде чем я добавил функцию onCreatePage.

Я сделал это, следуя этим документам от www.gatsbyjs.org, по выбору макета страницы. Я надеюсь, что по крайней мере нахожусь на правильном пути.

gatsby-node.js, проблема, кажется, здесь:

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    const blogPost = path.resolve('./src/templates/blog-post.js')        

    resolve(
      graphql(
        `
          {
            allContentfulBlog(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  slug
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        result.data.allContentfulBlog.edges.forEach(edge => {         
          createPage({
            path: edge.node.slug,
            component: blogPost,
            context: {
              slug: edge.node.slug,
            },
          })
        })
        return
      })
    )
  })
}

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    if (page.path.match(/^\/category-post/)) {
      // I have created `category-post.js` in the `/layouts/` directory
      page.layout = 'category-post'    

      createPage(page)
    }

    resolve()
  })
}

Терминал enter image description here

Я также могу указать, что я использую Contentful CMS, может ли это быть как-то сделано с помощью какого-то API оттуда?

Кто-то сделал что-то подобное и хочет помочь?

1 Ответ

0 голосов
/ 03 сентября 2018

для динамического создания страниц, вам все равно нужно использовать API createPages. Одна вещь, которую люди упускают, это то, что вы можете иметь столько запросов к GraphQL, сколько захотите. onCreatePage в этом случае не требуется, потому что вы искали страницы, которые не были созданы

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    const blogPost = path.resolve('./src/templates/blog-post.js')        
    const categoryPost = path.resolve('./src/templates/category-post.js') 
    resolve(
      graphql(
        `
          {
            allContentfulBlog(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  slug
                }
              }
            }
            allContentfulCategory(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  slug
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }
        result.data.allContentfulCategory.edges.forEach(edge => {
         createPage({
            path: `categories/${edge.node.slug}`,
            component: categoryPost,
            context: {
              slug: edge.node.slug,
            },
          })
        })
        result.data.allContentfulBlog.edges.forEach(edge => {         
          createPage({
            path: edge.node.slug,
            component: blogPost,
            context: {
              slug: edge.node.slug,
            },
          })
        })
        return
      })
    )
  })
}
...