将所有文章列在同一页面上有些过于乐观了。当我们有很多文章时，如果用户必须浏览大量项目，用户体验可能会受到负面影响。

因此，我们通常需要分页来为用户提供更好的导航体验。

幸运的是，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> 块：

<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 属性即可。因此，设置分页就变得非常简单，只需导入并使用它：

<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 组件的所有选项，请查看文档。