Question

我在'AllRecipes'页面中进行了查询，这不是我网站的索引。使用从查询中提取的数据，我在不同页面上创建了指向博客帖子的链接。这在链接在索引页面中创建时有效。但是，当我从'AllRecipes'页面尝试此操作时，我收到此错误：

我不想在我的站点目录src / pages / All ...中为这个页面创建一个组件，因为我在模板文件夹中使用了一个blogpost模板，它从Contentful中获取了所需的blogpost数据。但是，我不知道是什么能够在一小段之间产生联系：

/ Allrecipes的/黑森林-kirschtorte

和我的博客模板。现在，它只有在我搜索：

时才会起作用

/黑森林-kirschtorte

，来自索引页面。

有没有办法说：/ AllRecipes /schwarzwälder-kirschtorte等于/schwarzwälder-kirschtorte，还是用其他方法来解决这个问题？

以下是我的'AllRecipes'组件的代码：

import React from 'react'
import Link from 'gatsby-link'

const BlogPost = ({node}) => {
  return (
    <li>
      <Link to={node.slug}>{node.postTitle}</Link>
    </li>
  )
}

const AllRecipes = ({data}) => (
  <ul className="blog-post">
    {data.allContentfulBlogPost.edges.map((edge, i) => 
      <BlogPost key={i} node={edge.node} />
    )}
  </ul>
)

export default AllRecipes

export const recipeQuery = graphql`
  query recipeQuery {
    allContentfulBlogPost (
      filter: {
        node_locale: {eq: "en-US"}
    },
    ) {
      edges {
        node {
          postTitle 
          slug
        }
      }
    }
  }
`

盖茨比-的node.js：

const path = require('path')

exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
   return new Promise((resolve, reject) => {
     const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
     // Query for markdown nodes to use in creating pages.
     //all entries based on content type: which here, is blog
       resolve(
           graphql(`
               {
                   allContentfulBlogPost (limit:100) {
                       edges {
                           node {
                               id
                               slug
                           }
                       }
                   }
               }
           `).then((result) => {
               if (result.errors) {
                   reject(result.errors)
           }

           // Create blog post pages.
           result.data.allContentfulBlogPost.edges.forEach((edge) => {
               createPage({
                   path: edge.node.slug, // required
                   component: blogPostTemplate,
                   context: {
                     slug: edge.node.slug,
                   }
                 })
               })

           return
         })
       )
   })
}

GatsbyJS和Contentful：如何从一个页面链接到另一个页面，而不是从索引页面链接？

0 个答案: