0

我用 gatsby 和 Contentful 建立了一个博客，并在内容帖子中有一个布尔字段来选择特定帖子是否“精选”。如何声明变量 featuresPost 以匹配将特色布尔值设置为 true 的帖子。请注意; 在下面的代码中我放的声明中?????????? 突出我的问题所指的内容/位置。非常感谢您的建议：

...

class BlogIndex extends React.Component {
  render() {
    const { data } = this.props
    const siteTitle = data.site.siteMetadata?.title || `Title`
    const posts = data.allContentfulPost.edges
    const featuredPost = ???????????

    return (
      <Layout location={this.props.location}>
        <SEO title="FieldPro Blog" keywords={[]} />
        <Header />
        <FeaturedPost>
          {featuredPost.map(({ node }) => {
            const title = node.title || node.slug
            return (
              <div key={node.slug}>
                <FeaturedImage>
                  <Link style={{ boxShadow: `none` }} to={node.slug}>
                    <Img className="Image" fluid={node.image.fluid} />
                  </Link>
                </FeaturedImage>
                <FeaturedText>
                  <FeaturedTitle>
                    <Link style={{ boxShadow: `none` }} to={node.slug}>
                      {title}
                    </Link>
                  </FeaturedTitle>
                  <Labels>
                    <Caption>{/* node.tags */}</Caption>
                  </Labels>
                </FeaturedText>
              </div>
            )
          })}
        </FeaturedPost>
        <PostGroup>
          {posts.map(({ node }) => {
            const title = node.title || node.slug
            return (
              <Post key={node.slug}>
                <PostImage>
                  <Link style={{ boxShadow: `none` }} to={node.slug}>
                    <Img className="Image" fluid={node.image.fluid} />
                  </Link>
                </PostImage>
                <PostText>
                  <Title>
                    <Link style={{ boxShadow: `none` }} to={node.slug}>
                      {title}
                    </Link>
                  </Title>
                  <Labels>
                    <Caption>{/* node.tags */}</Caption>
                  </Labels>
                </PostText>
              </Post>
            )
          })}
        </PostGroup>
      </Layout>
    )
  }
}

export default BlogIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allContentfulPost(sort: { fields: createdAt, order: DESC }) {
      edges {
        node {
          title
          slug
          featured
          image {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`
...
4

1 回答 1

1

您不能在循环之外声明它，因为它是循环中每个元素的因变量。

您可以做的一个内置选项是动态过滤您的 GraphQL 查询以仅获取精选帖子。您可以创建一个别名来获取这两种类型的帖子：

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    featuredPosts: allContentfulPost(filter: { featured: { eq: "true" } }, sort: { fields: createdAt, order: DESC }) {
      edges {
        node {
          title
          slug
          featured
          image {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

注意：您需要为非精选帖子添加其他查询。

在这种情况下，您的数据将位于props.data.featuredPosts.

正如我所说，另一种选择是在遍历它们时获取每个元素的特征属性：

<FeaturedPost>
  {featuredPost.map(({ node }) => {
    const title = node.title || node.slug;
    if(node.featured){
    return (
      <div key={node.slug}>
        <FeaturedImage>
          <Link style={{ boxShadow: `none` }} to={node.slug}>
            <Img className="Image" fluid={node.image.fluid} />
          </Link>
        </FeaturedImage>
        <FeaturedText>
          <FeaturedTitle>
            <Link style={{ boxShadow: `none` }} to={node.slug}>
              {title}
            </Link>
          </FeaturedTitle>
          <Labels>
            <Caption>{/* node.tags */}</Caption>
          </Labels>
        </FeaturedText>
      </div>
    )
    }
  })}
</FeaturedPost>

您的属性在内部node.featured，每个元素可能不同，因此必须在循环内处理。

于 2020-12-15T21:51:45.063 回答