Contentful BlogPost：如何使用 gatsby graphql 在 2 个不同的容器上显示不同类别的博客

Question

您好，我对使用 gatsby 很陌生，对 cms 很满意。我只想在同一页面上显示不同类别的博客 post。有没有办法让这成为可能？下面是关于我如何显示 blogpost 循环以及从 contentful（不太确定）获取数据的 graphql 的代码。抱歉编码不好。我可以用不同类别的 blogpost 制作 2 个不同的容器吗？

    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
const posts = get(this, 'props.data.allContentfulBlogPost.edges')<div className="row">
<div className="col-lg-12 text-left">
    <h2>Title</h2>
</div>
    {posts.map(({ node }) => {
        return (
            <ArticlePreview article={node} />
        )
    })}
</div> 
export const CommunityQuery = graphql
    query CommunityIndexQuery {
    site {
        siteMetadata {
        title
    }
    }
allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
          title
          slug
          publishDate(formatString: "MMMM Do, YYYY")
          tags
          heroImage {
            fluid(maxWidth: 350, maxHeight: 156, resizingBehavior: SCALE) {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
          description {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
}`

Answer 1

是的，您可以通过在 communityQuery 中使用 2 个不同的查询来实现此目的。它应该看起来像：

export const CommunityQuery = graphql
    query CommunityIndexQuery {
    site {
        siteMetadata {
        title
    }
    }
categoryOne: allContentfulBlogPost(
   filter: {category: {eq: "category one name"}}
   sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
        //your fields
        }
      }
    }
categoryTwo: allContentfulBlogPost(
   filter: {category: {eq: "category two name"}}
   sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
        //your fields
        }
      }
    }
}`

注意：请记住，您提供了一个通用查询，所以我不知道您应该放置哪些字段或哪些过滤器来按类别过滤，这只是一种方法。

这将生成 2 个对象，您可以通过 props.data.categoryOne 和 props.data.categoryTwo 轻松检索它们（查询是别名的，这是清理代码的好方法，如果不这样做，您的对象可能看起来像：props.data.allContentfulBlogPost).

Contentful BlogPost：如何使用 gatsby graphql 在 2 个不同的容器上显示不同类别的博客

Contentful BlogPost: How can I display different category blogs on 2 different container using gatsby graphql

contentful

graphql

gatsby