Question

嗨，我对使用gatsby和cms感到满意。我只想在同一页面上显示不同类别的博客文章。有没有办法做到这一点？以下是有关如何显示博客文章循环以及从内容丰富（不确定）获取数据的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）。

内容丰富的BlogPost：如何使用gatsby graphql在2个不同的容器上显示不同类别的Blog

1 个答案: