Gatsby 分页实现指南基于 GraphQL 的 limit/skip 分页实战【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby导读随着博客文章、商品列表等内容型页面的不断增长单页列表会变得越来越长。本指南围绕 Gatsby 官方文档 adding-pagination.md 讲解分页Pagination的核心原理与完整实现如何基于单一模板批量创建多页列表、如何通过createPage的context向模板传递limit/skip查询变量以及分页路径/blog、/blog/2…的生成规则。读完本文你将能够在自己的 Gatsby 站点中落地一套可运行、可扩展的内容分页方案。分页要解决什么问题一个展示内容列表的页面会随着内容数量的增长而变得越来越长。分页Pagination就是把这份内容分散到多个页面上的技术每个页面只展示有限数量的条目例如每页 6 篇用户通过page 1 / 2 / 3或上一页 / 下一页在页面间浏览。Gatsby 中分页的核心目标是从一个模板template创建出多个页面。这个模板通常被称为页面模板组件page template component关于它的概念可以参考 building-with-components.md。分页的实现包含三个关键环节它们环环相扣模板查询每个分页页面通过 GraphQL 查询 精确获取自己那一页的数据查询变量查询所需的limit每页条数与skip跳过条数来自createPage时写入的 context页面上下文批量建页在gatsby-node.js的createPagesAPI 中循环调用createPage为每一页生成对应的路径与上下文。下面先从模板侧入手再讲解gatsby-node.js侧的批量建页逻辑。第一步编写支持分页的列表模板分页列表模板是一个普通的页面模板组件但它接收两个 GraphQL 查询变量$skip从第几条开始与$limit取多少条。$skip和$limit是 Gatsby 内置的 GraphQL 字段参数它们的语义在 graphql-reference.md 的 Field arguments 一节有详细说明limit限制返回的结果数量例如limit: 3只返回前 3 条结果可通过totalCount对比全部结果数skip跳过指定数量的结果例如skip: 3会忽略前 3 条结果从第 4 条开始返回。在模板中把这两个参数组合起来就能精确切出某一页的数据切片import React from react import { graphql } from gatsby import Layout from ../components/layout export default class BlogList extends React.Component { render() { const posts this.props.data.allMarkdownRemark.edges return ( Layout {posts.map(({ node }) { const title node.frontmatter.title || node.fields.slug return div key{node.fields.slug}{title}/div })} /Layout ) } } export const blogListQuery graphql query blogListQuery($skip: Int!, $limit: Int!) { allMarkdownRemark( sort: { frontmatter: { date: DESC }} limit: $limit skip: $skip ) { edges { node { fields { slug } frontmatter { title } } } } } 要点说明变量声明$skip: Int!与$limit: Int!以非空 Int 类型声明Gatsby 会从页面的 context 中取同名变量注入查询这正是 Query Variables 机制 的典型应用排序保证sort: { frontmatter: { date: DESC }}保证所有分页页面的数据顺序一致否则分页切片会错乱节点字段查询中同时取用了fields.slug与frontmatter.titleslug由gatsby-node.js中的onCreateNode通过createFilePath生成见下文完整示例。第二步在 gatsby-node.js 中批量创建分页页面gatsby-node.js是 Gatsby 的 Node 生命周期文件其完整 API 说明见 gatsby-node.md。分页建页的核心逻辑在createPagesAPI 中完成先用 GraphQL 查出全部文章数量再按每页条数计算页数最后循环调用createPage。const path require(path) const { createFilePath } require(gatsby-source-filesystem) exports.createPages async ({ graphql, actions, reporter }) { const { createPage } actions const result await graphql( { allMarkdownRemark( sort: { frontmatter: { date: DESC }} limit: 1000 ) { edges { node { fields { slug } } } } } ) if (result.errors) { reporter.panicOnBuild(Error while running GraphQL query.) return } // ... // Create blog-list pages const posts result.data.allMarkdownRemark.edges const postsPerPage 6 const numPages Math.ceil(posts.length / postsPerPage) Array.from({ length: numPages }).forEach((_, i) { createPage({ path: i 0 ? /blog : /blog/${i 1}, component: path.resolve(./src/templates/blog-list-template.js), context: { limit: postsPerPage, skip: i * postsPerPage, numPages, currentPage: i 1, }, }) }) } exports.onCreateNode ({ node, actions, getNode }) { const { createNodeField } actions if (node.internal.type MarkdownRemark) { const value createFilePath({ node, getNode }) createNodeField({ name: slug, node, value, }) } }这段代码的执行逻辑可以拆解为四步数据盘点通过 GraphQL 查询全部文章此处用limit: 1000设一个安全上限并做错误处理——查询失败时调用reporter.panicOnBuild让构建直接失败计算页数numPages Math.ceil(posts.length / postsPerPage)即总文章数除以每页条数后向上取整。例如 13 篇文章、每页 6 条会得到Math.ceil(13 / 6) 3页第 3 页只有 1 条循环建页Array.from({ length: numPages })生成页数长度的数组为每一页调用一次createPage写入上下文每页的context中写入limit、skip、numPages、currentPage四个值——前两个供 GraphQL 查询切片后两个供模板渲染分页导航。最终生成的页面路径规则为第 1 页路径为/blog后续页面依次为/blog/2、/blog/3……依此类推。context 在分页中的角色context页面上下文是连接gatsby-node.js与模板查询的桥梁。正如 creating-and-modifying-pages.md 所述context属性接收任意对象你可以把任何希望页面访问的数据放进去模板的 GraphQL 查询可以把 context 中的数据作为查询变量使用模板中也可以通过pageContextprop 直接读取 context例如这里的numPages、currentPage就是供组件渲染分页导航用的注意 context 中不能使用保留名称path、matchPath、component、componentChunkName、pluginCreator___NODE、pluginCreatorIdcontext 会被序列化后传给页面因此不能传递函数Date对象会被序列化为字符串。页数计算的直观示例文章总数每页条数postsPerPage计算式生成页数页面路径66Math.ceil(6/6)1/blog136Math.ceil(13/6)3/blog、/blog/2、/blog/3206Math.ceil(20/6)4/blog、/blog/2、/blog/3、/blog/4第三步实现分页导航上述示例创建了多个分页页面但还没有在页面底部放置上一页 / 下一页或1 2 3的导航链接。得益于 context 中的numPages与currentPage你可以轻松地在模板中渲染分页导航——这两者的组合足够推导出当前页码、总页数以及相邻页面的链接第i页的链接路径规则与建页时一致首页为/blog其余为/blog/${i}。一个典型的导航组件可以基于这两个值用currentPage判断当前所在页决定上一页 / 下一页链接的显示与可用状态用numPages渲染页码序列也可以沿用官方提供的 gatsby-starter-blog 与社区分页扩展方案原文档列举了gatsby-paginated-blog等参考实现来快速获得带完整导航的分页博客。相关参考资源分页依赖的模板组件概念building-with-components.mdGraphQL 查询变量与limit/skip参数语义graphql-reference.mdcreatePage与context的详细说明creating-and-modifying-pages.mdgatsby-node.js全部生命周期 APIgatsby-node.md一个带完整分页博客示例的起始模板gatsby-starter-blog小结Gatsby 的分页方案可以总结为一句话在gatsby-node.js中查总数、算页数、循环createPage用context把limit/skip传给模板模板再按变量切片查询数据。这套机制不仅适用于 Markdown 博客也适用于任何基于数据源JSON、YAML、CMS 等构建的列表页。配合numPages与currentPage即可扩展出完整的上一页/下一页及页码导航构建出体验良好的大型内容站点。【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考