按类别过滤 Wordpress 帖子时对 GatsbyJS 页面进行分页 [英] Paginating GatsbyJS pages when filtering Wordpress posts by category

问题描述

当按类别过滤 Wordpress 帖子时，有人可以对我如何在 Gatsby 中对页面进行分页提供一些见解吗?

对于上下文，我的 gatsby-node 文件:

<代码>const path = require('path')module.exports.createPages = async ({ graphql, actions }) =>{//import { paginate } from 'gatsby-awesome-pagination';const { createPage } = 动作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(`询问 {所有WordpressPost {边{节点{蛞蝓日期(格式字符串:YYYY-MM")}}}allWordpressCategory {边{节点{蛞蝓}}}}`)//未分页//博客列表-按类别组织res.data.allWordpressCategory.edges.forEach((edge) => {创建页面({组件:blogCategoryFilter，路径:`/blog/category/${edge.node.slug}`，语境: {slug: edge.node.slug,}})})}

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

从 'react' 导入 React从盖茨比"导入 { graphql, Link }从../components/layout"导入布局从 '../components/blognav' 导入 BlogNav从 '../components/modules/blog.module.css' 导入 blogStyles导出 const 查询 = graphql`查询($slug:字符串！){allWordpressPost (过滤器: {categories: {elemMatch: {slug: { eq: $slug }}}}) {边{节点{标题蛞蝓内容日期(格式字符串:MMMM DD，YYYY")}}}}`导出默认值({数据})=>{//const post = data.allWordpressPost.edges[0].node返回 (<布局><div className={blogStyles.blog_container}><div className={blogStyles.blogContent_container}><ol>{data.allWordpressPost.edges.map((edge) => {返回 (<div className={blogStyles.blogPost_container}>
<h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} risklySetInnerHTML={{ __html: edge.node.title }}></Link></h2><p className={blogStyles.blog_date}>{edge.node.date}</p><p className={blogStyles.blog_content} risklySetInnerHTML={{ __html: edge.node.content }}/>

)})}</ol>

<博客导航/>

</布局>)}

我尝试通读了一些相关插件(gatsby-paginate、gatsby-awesome-paginate 等)的文档和这篇文章(https://www.gatsbycentral.com/pagination-in-gatsby)，但这一切都让我有些不知所措.对于我在模板上生成并简单地按时间顺序排序的博客文章来说，这似乎很有意义，但是当我开始按类别、存档月份等进行过滤时，我感到困惑.

有什么建议吗?我可以使用上面的代码结构进行分页还是必须重新考虑如何将它们放在一起?

谢谢！

解决方案

假设我们选择使用问题中提到的 gatsby-awesome-pagination 插件.

这是来自插件的快速入门说明::>

import { paginate } from 'gatsby-awesome-pagination';export.createPages = ({ actions, graphql }) =>{const { createPage } = 动作；//获取您的项目(博客文章、类别等).const blogPosts = doSomeMagic();//创建分页页面分页({createPage,//Gatsby `createPage` 函数items: blogPosts,//一个对象数组itemsPerPage: 10,//每页需要多少项pathPrefix: '/blog',//创建`/blog`、`/blog/2` 等页面component: path.resolve('...'),//就像`createPage()`})}

为了按类别进行分页，我们感兴趣的是:

1. items:我们需要一组按类别分组的帖子
2. pathPrefix:生成路径的类别名称

我们可以通过使用 GraphQL 查询获得这些:

查询 MyQuery {所有WordpressPost {组(字段:类别___名称){节点{标题# 您需要的任何其他帖子数据}字段值}}}

这将返回如下内容:

<代码>{数据": {所有WordpressPost":{团体": [{节点":[{"title": "阿比西尼亚人"}],"fieldValue": "猫"},{节点":[{"title": "泰克尔"},{"title": "贵宾犬"}],"fieldValue": "狗"}]}}}

现在我们可以在 gatsby-node.js 中创建分页页面.实现可能如下所示:

import { paginate } from 'gatsby-awesome-pagination';export.createPages = ({ actions, graphql }) =>{const { createPage } = 动作；const { 数据 } = 等待 graphql(`询问 {所有WordpressPost {组(字段:类别___名称){节点{标题# 您需要的任何其他帖子数据}字段值}}}`)//为每个类别创建分页页面data.allWordpressPost.group.forEach(({ 节点:帖子，字段值:类别}) => {分页({创建页面，项目:帖子，每页项目数:10，pathPrefix: category,//为页面使用类别名称组件:path.resolve('...'),//你的帖子列表模板})//TODO 为每个帖子创建一个页面//您可以手动完成或使用插件的`createPagePerItem` API://https://github.com/GatsbyCentral/gatsby-awesome-pagination#createpageperitem}}

这里的关键是利用 GraphQL 来构建正确的查询.

希望能帮到你！

Can anyone shed some insight on how I would go about paginating pages in Gatsby when filtering Wordpress posts by category?

For context, my gatsby-node file:

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,
      }
    })
  })
}

The blog-filter-category.js file that I use as my template:

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>
  )
}

I tried reading through the documentation of some relevant plugins (gatsby-paginate, gatsby-awesome-paginate, etc) and this article (https://www.gatsbycentral.com/pagination-in-gatsby) but it was all going a little over my head. It seemed to make sense for blog posts that I'm generating on to a template and simply sorting chronologically, but I get confused when I start filtering by category, archived months, etc.

Any tips? Can I paginate using the code structures above or do I have to rethink how I'm throwing this together?

Thank you!

解决方案

Let's assume we chose to use the gatsby-awesome-pagination plugin, as mentioned in the question.

This is from the plugin's 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()`
  })
}

What we're interested in in order to paginate by category is:

1. items: we need an array of posts grouped by category
2. pathPrefix: the category name to generate paths

We can get these by using a GraphQL query:

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

This will return something like:

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

Now we can create paginated pages in gatsby-node.js. An implementation could look like this:

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
  }
}

The key here is to take advantage of GraphQL to build the right query.

Hope it helps!

这篇关于按类别过滤 Wordpress 帖子时对 GatsbyJS 页面进行分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！