如何在 Gatsby 中获取所有 Wordpress 帖子和显示标签

Posted 2023-03-08

【中文标题】如何在 Gatsby 中获取所有 Wordpress 帖子和显示标签

【英文标题】：How to get all Wordpress posts and display tags in Gatsby

【发布时间】：2020-07-31 18:12:42

【问题描述】：

第一次使用 Gatbsy 和 GraphQL。我想知道如何显示标签。 GraphQL 编辑器中没有以明显的方式列出。

我希望在分类法下找到它们，但它只显示名称和类型的“类别”和“帖子”......

这是在一个自定义的 React 页面中，该页面将用作特定类别帖子的索引。 另外，不相关的问题... Gatbsy 似乎只从 Wordpress 网站上提取了我的一些内容。我错过了很多缩略图，尽管它们是帖子中的特色图片。

export const pageQuery = graphql`
  query 
    allWordpressPage 
      edges 
        node 
          id
          title
          excerpt
          slug
        
      
    
    allWordpressPost 
      edges 
        node 
          title
          excerpt
          slug
          featured_media 
            source_url
          
          categories 
            name
            taxonomy 
              name
              types

            
          
        
      
    
  
`

const ClientProjectsIndexPage = ( data ) => 
  console.log(data)
  return (
    <div className="wave-pattern-bg">
      <VideoBanner
        text="Client Projects"
        videoSrc=meetingVid
        imageSrc=null
      />
      <Layout>
        <SEO title="Index of Client Projects" />
        <div className="card-wrap index">
          data.allWordpressPost.edges
            .filter(post => post.node.categories[0].name === "Client Projects")
            .map((post, index) => (
              <Segment
                key=index
                onClick=() => 
                  navigate(`/$post.node.slug`)
                
              >
                <div className="index-portrait-wrap">
                  post.node.featured_media ? (
                    <Image avatar src=post.node.featured_media.source_url />
                  ) : (
                    <Image avatar src=emptyThumbnail />
                  )
                  <h1>post.node.title</h1>
                </div>
                <p>post.node.excerpt</p>
              </Segment>
            ))
        </div>
      </Layout>
      <Contact />
    </div>
  )


export default ClientProjectsIndexPage

【参考方案1】：

愚蠢的我，我匆忙中似乎错过了它！

我仍然需要弄清楚为什么大多数特色图片没有被提取，但这里是标签查询......

export const pageQuery = graphql`
  query 
    allWordpressPage 
      edges 
        node 
          id
          title
          excerpt
          slug
        
      
    
    allWordpressPost 
      edges 
        node 
          title
          excerpt
          slug
          featured_media 
            source_url
          
          categories 
            name
          
          tags 
            name
          
        
      
    
  
`

【讨论】：

我已经就特色图片问题提出了错误请求。这可能是 wordpress 方面的问题，但在管理面板中一切似乎都是正确的。 github.com/gatsbyjs/gatsby/issues/23458