Question

有人可以在按类别过滤Wordpress帖子时对我如何在Gatsby中分页有一些见识吗？

对于上下文，我的gatsby节点文件：


const path = require('path')


module.exports.createPages = async ({ graphql, actions }) => {

 // import { paginate } from 'gatsby-awesome-pagination';


  const { createPage } = actions
  const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
  const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')
  const blogArchiveFilter = path.resolve('./src/templates/blog-filter-archive.js')

  const res = await graphql(`
      query {
        allWordpressPost {
          edges {
            node {
              slug
              date(formatString:"YYYY-MM")
            }
          }
        }
        allWordpressCategory {
          edges {
            node {
              slug
            }
          }
        }
      }
    `)

 // UNPAGINATED
  //Blog list - organized by category
  res.data.allWordpressCategory.edges.forEach((edge) => {
    createPage({
      component: blogCategoryFilter,
      path: `/blog/category/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      }
    })
  })
}

我用作模板的blog-filter-category.js文件：

import React from 'react'
import { graphql, Link } from 'gatsby'

import Layout from '../components/layout'
import BlogNav from '../components/blognav'

import blogStyles from '../components/modules/blog.module.css'

export const query = graphql`
  query($slug: String!) {
    allWordpressPost (filter: {categories: {elemMatch: {slug: { eq: $slug }}}}) {
      edges {
        node {
          title
          slug
          content
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }
`






export default ({ data }) => {
  //const post = data.allWordpressPost.edges[0].node
  return (
    <Layout>
      <div className={blogStyles.blog_container}>
        <div className={blogStyles.blogContent_container}>
          <ol>
            {data.allWordpressPost.edges.map((edge) => {
              return (
                <div className={blogStyles.blogPost_container}>
                  <li className={blogStyles.blog_list}>
                    <h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}></Link></h2>
                    <p className={blogStyles.blog_date}>{edge.node.date}</p>
                    <p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} />
                  </li>
                </div>
              )
            })}
          </ol>
        </div>
        <BlogNav />
      </div>

    </Layout>
  )
}

我尝试通读一些相关插件（gatsby-paginate，gatsby-awesome-paginate等）和这篇文章（https://www.gatsbycentral.com/pagination-in-gatsby）的文档，但这一切都让我有些头疼。对于我正在生成模板并按时间顺序排序的博客帖子，这似乎很有意义，但是当我开始按类别，归档月份等进行过滤时，我会感到困惑。

有什么提示吗？我可以使用上面的代码结构进行分页，还是必须重新考虑如何将它们组合在一起？

谢谢！

Answer 1

假设我们选择使用gatsby-awesome-pagination插件，如问题中所述。

这是来自插件的quick start instructions：

import { paginate } from 'gatsby-awesome-pagination';

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions;

  // Fetch your items (blog posts, categories, etc).
  const blogPosts = doSomeMagic();

  // Create your paginated pages
  paginate({
    createPage, // The Gatsby `createPage` function
    items: blogPosts, // An array of objects
    itemsPerPage: 10, // How many items you want per page
    pathPrefix: '/blog', // Creates pages like `/blog`, `/blog/2`, etc
    component: path.resolve('...'), // Just like `createPage()`
  })
}

我们对按类别分页感兴趣的是：

items：我们需要按类别分组的帖子数组
pathPrefix：生成路径的类别名称

我们可以使用GraphQL查询获得这些信息：

query MyQuery {
  allWordpressPost {
    group(field: categories___name) {
      nodes {
        title
        # any other post data you need
      }
      fieldValue
    }
  }
}

这将返回类似：

{
  "data": {
    "allWordpressPost": {
      "group": [
        {
          "nodes": [
            {
              "title": "Abyssinians"
            }
          ],
          "fieldValue": "Cats"
        },
        {
          "nodes": [
            {
              "title": "Teckels"
            },
            {
              "title": "Poodles"
            }
          ],
          "fieldValue": "Dogs"
        }
      ]
    }
  }
}

现在，我们可以在gatsby-node.js中创建分页页面。一个实现可能看起来像这样：

import { paginate } from 'gatsby-awesome-pagination';

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions;

  const { data } = await graphql(`
    query {
      allWordpressPost {
        group(field: categories___name) {
          nodes {
            title
            # any other post data you need
          }
          fieldValue
        }
      }
    }
  `)

  // create paginated pages for each category
  data.allWordpressPost.group.forEach(({ nodes: posts, fieldValue: category }) => {
    paginate({
      createPage,
      items: posts,
      itemsPerPage: 10,
      pathPrefix: category, // use category name for pages
      component: path.resolve('...'), // your template for post lists
    })

    // TODO create a page for each post
    // you can do it manually or use the plugin's `createPagePerItem` API:
    // https://github.com/GatsbyCentral/gatsby-awesome-pagination#createpageperitem
  }
}

关键是要利用GraphQL来构建正确的查询。

希望有帮助！

按类别过滤Wordpress帖子时对GatsbyJS页面进行分页

1 个答案: