创建类别模板出了啥问题

Posted 2023-03-08

【中文标题】创建类别模板出了啥问题

【英文标题】：Whats is going wrong to create a category template创建类别模板出了什么问题

【发布时间】：2021-03-23 15:15:16

【问题描述】：

我想创建列出类别的页面，然后链接到包含每个类别中的帖子的模板。

我创建了我的页面来列出帖子类别：

src/pages/categories.js - 它正在工作！

import React from "react"
import  Link, graphql  from "gatsby" //highlight-line
import Layout from "../components/layout"
import SEO from "../components/seo"
import ArchiveSidebar from '../components/archive/ArchiveSidebar'

import 
  PageContent,
  StyledH2,
  
  StyledReadMore
 from './styles/archiveStyles'

export default function Categories( data ) 
  return (
    <Layout>
      <SEO title="Categories" />
      <div className="container">
      <div className="row" style= marginBottom: '40px' >
      
      <ArchiveSidebar />
     
      <PageContent className="col-lg-9">
      <h1>My WordPress Categories</h1>
      data.allWpCategory.edges.map((edges) => (
        <div key=edges.slug>
          /* highlight-start */
          <Link to=edges.node.slug>
          <StyledH2 
          dangerouslySetInnerhtml= __html: edges.node.name  
          />
          </Link>
        
          /* highlight-end */
          <div dangerouslySetInnerHTML= __html: edges.slug  />
          <StyledReadMore to=edges.node.slug>
                Go!
              </StyledReadMore>
        </div>
        
        
      ))
      </PageContent>
      </div>
        </div>
        
    </Layout>
  )


export const pageQuery = graphql`
  query 
    allWpCategory
        edges
            node 
            name
            slug
      
    

  
`

但我无法创建列出每个类别的模板。

程序化博客文章和页面的模板可以正常工作，但我无法使类别的模板正常工作。

src/templates/post-category.js

import React from "react"
import Layout from "../components/layout"
import  graphql  from "gatsby"

export default function Category( data ) 
  const category = data.allWpCategory.nodes[0]
  
  return (
    <Layout>
      <div>
        <h1>category.name</h1>
        <div dangerouslySetInnerHTML= __html: category.slug  />
      </div>
    </Layout>
  )

export const query = graphql`
  query 
    allWpCategory 
      edges
        node
          name
          slug
        
      
    
  
`

gastby-node.js

const path = require(`path`)



exports.createPages = ( graphql, actions ) => 
  const  createPage  = actions
  return graphql(`
  
    allWpCategory
      edges
        node
          name
          slug
        
      
    
    
  `).then((result) => 
  
    result.data.allWpCategory.edges.forEach(edge => 
      
        createPage(
          path: edge.node.slug,
          component: path.resolve(`./src/templates/post-category.js`),
          context: 
            name: edge.node.name,
            
          
        )
      
    )

  )

【参考方案1】：

这里有两件事：

您的/categories 页面应该是一个页面，因此您将在那里创建一个页面查询并在那里列出您的类别。创建一个名为categories.js 的页面并添加以下内容：

  import  graphql, Link  from 'gatsby';
  import React from 'react';
  import Layout from '../components/layout';

  export default function Categories ( data ) 
    const categories = data.allWpCategory.edges;

    return (
      <Layout>
        <div>
          
            categories.map(category=>
              return  <Link key=category.name to=category.slug> // note that slashes in the slug, you may need to add it
                <h1>category.name</h1>
              </Link>;
            )
          
        </div>
      </Layout>
    );
  

  export const query = graphql`
      query 
          allWpCategory 
              edges
                  node
                     name
                     slug
                  
              
          
      
  `;

基本上，您是在进行页面查询以列出所有类别。每个类别的特定链接都可以使用，因为您是在 gatsby-node.js 中创建它们的

但是，在最后一点之后，如果您想获取每个类别的特定数据，那就是一个模板（就像您在 post-category 中所做的那样），它是一个单独的查询，应该使用上下文进行管理，因为您需要使用name字段查询每个类别的具体数据。比如：

   import React from "react"
   import Layout from "../components/layout"
   import  graphql  from "gatsby"
   
   export default function Category( data ) 
    const category = data.wpCategory;

    console.log("your data is here-->", category)  
   
     return (
       <Layout>
         <div>
           <h1>category.name</h1>
           <div dangerouslySetInnerHTML= __html: category.slug  />
         </div>
       </Layout>
     )
   
   export const query = graphql`
     query($name: String!) 
       wpCategory(name:  eq: $name ) 
             name
             slug
           
     
   
  `

基本上，通过上下文传递的name 是过滤wpCategory(name: eq: $name) 中数据的项。请注意，我已经稍微更改了查询，您可能需要检查它是否正常工作，因为我不知道您的数据结构如何。

更多详情请查看https://www.gatsbyjs.com/tutorial/part-seven/。

【讨论】：

谢谢你，但我完全迷路了。

您的节点正在正确创建页面。您只会错过为每个类别过滤数据的部分。使用localhost:8000/___graphql获取模板查询

@RicardodePaula 我添加了一个扩展版本，说明正在发生的事情以及如何实现它。您需要创建一个页面查询来列出所有类别，然后，每个类别都将使用使用上下文的过滤查询来获取数据。

谢谢！我正在尝试这样做。

对于所有寻找 ro 查询类别的人：查询 GetCategory($category: String) categories: allWpPost(sort: fields: [date], filter: categories: nodes: elemMatch: 名称：eq：$category）节点标题摘录日期（格式字符串：“DD，MMMM，YYYY”，语言环境：“pt”）