首页 › 问答 › Linux › 正文 用 Gridsome 建博客怎么列出所有文章并实现分页? 2026-04-18 22:30:33 约 1 分钟读完 0 阅 文章导读 将所有文章列在同一页面上有些过于乐观了。当我们有很多文章时,如果用户必须浏览大量项目,用户体验可能会受到负面影响。 📋 目录 A 添加分页 B 总结 A A 博客文档招聘获取支持联系销售添加分页 将所有文章列在同一页面上有些过于乐观了。当我们有很多文章时,如果用户必须浏览大量项目,用户体验可能会受到负面影响。 因此,我们通常需要分页来为用户提供更好的导航体验。 幸运的是,Gridsome 已经提前考虑到了这一点,并为我们提供了一种简单的方式来添加分页。如果你还记得上一篇文章,来自 GraphQL 层的 PostConnection schema 已经为我们提供了一些用于分页数据的参数: allPost( sortBy: String = "date" order: SortOrder = DESC perPage: Int = 25 skip: Int = 0 page: Int = 1 regex: String ): PostConnection 特别是,我们可以使用 perPage、skip 和 page 参数来控制分页行为。虽然 skip 不一定经常需要,但它可以用来指定查询需要跳过的项目数量。 让我们继续创建 3 或 4 篇新文章,这样我们就有足够的内容来看到分页效果。 然后,我们可以使用 @paginate 指令,结合 PostConnection 的参数,来编写一个用于分页文章的查询: query Posts ($page: Int) { posts: allPost (perPage: 2, page: $page) @paginate { edges { node { title path } } } } 我将 perPage 参数设置为 2,以便有多个页面,每个页面只有少量文章。 如果你愿意,可以记住你可以在 http://localhost:8080/___explore 提供的 GraphQL playground 中试用这个查询。如果你这样做,请记住将 page 查询变量设置为从 1 开始的任意值: 为了控制分页,我们还需要返回分页信息。如果你再次检查 PostConnection schema,你会看到它具有 totalCount 和 pageInfo 属性。让我们使用它们来返回这些信息: query Posts ($page: Int) { posts: allPost (perPage: 2, page: $page) @paginate { totalCount pageInfo { totalPages currentPage isFirst isLast } edges { node { title path } } } } 如果你在 explorer 中运行这个查询,你会看到类似以下的数据被返回: { "data": { "posts": { "totalCount": 5, "pageInfo": { "totalPages": 3, "currentPage": 1, "isFirst": true, "isLast": false }, "edges": [ { "node": { "title": "An awesome article 4", "path": "/blog/awesome-post-4" } } ] } } } 现在我们已经有了查询,让我们首先更新首页中的 <page-query> 块: pages/Index.vue <page-query> query Posts ($page: Int) { posts: allPost (perPage: 2, page: $page) @paginate { totalCount pageInfo { totalPages currentPage isFirst isLast } edges { node { title path } } } } </page-query> 然后,我们可以使用 Gridsome 自带的特殊 Pager 组件。 Pager 组件的工作原理很简单,只需将 pageInfo 数据传递给其 info 属性即可。因此,设置分页就变得非常简单,只需导入并使用它: pages/Index.vue <template> <Layout> <p v-for="post in $page.posts.edges"> <g-link :to="post.node.path"> {{ post.node.title }} </g-link> </p> <Pager :info="$page.posts.pageInfo"/> </Layout> </template> <page-query> // ... </page-query> <script> import { Pager } from "gridsome"; export default { components: { Pager } }; </script> 如果你导航到 http://localhost:8080,你应该会看到导航组件被渲染并且完全正常工作。 请注意,该组件没有样式,因此你可能会看到数字靠得很近。这是故意的,这样你就可以完全控制分页样式。 如果你想查看 Pager 组件的所有选项,请查看文档。 总结 如果你已经看到这里,你就已经掌握了使用 Gridsome 构建博客以及任何类似网站的所有基础知识,包括基于数据创建页面并在任何页面中列出它们,以及分页功能。 当然,Gridsome 项目仍处于早期开发阶段,但它看起来非常令人兴奋,并且似乎有着光明的未来,因为它正在跟随 Gatsby 的道路! 别忘了查看本文的代码示例仓库和在线演示! 保持酷炫 🦄 感谢与 Community 一起学习。请查看我们的计算、存储、网络和管理数据库产品。 了解更多我们的产品