先打开一个标签页面 ... 在这个页面上现在会显示一组内容列表，下面我们可以使用之前定义的 post.list 这个组件，改造一下这个列表的显示 ... 还有就是要在这个列表页面上再添加一个分页器的功能 .. 先去准备一下需要的数据 .. 打开 TagController 这个控制器 .. 找到控制器里的 show 这个方法 .. 对标签页面的请求现在用的就是这个方法来处理的 ..

把 request 从这个方法的 context 参数里解构出来 ..

然后添加一个 pageNumber .. 对应的值用一下 request.input ，得到 page 这个查询参数的值 ... 默认可以让这个值等于 1 ..

再添加一个 pageSize .. 它的值是 20，它表示的就是每页显示的项目的数量 ..

下面用 Tag 模型得到了要显示的标签 .. 然后用了一下我们在这个模型上定义的 posts 方法，得到了跟这个标签相关的文章内容 .. 这里可以再添加一个 orderBy 设置一下排序 .. 按照 updated_at ，内容的更新时间，desc ，降序排列 ..

用一下 with ... user ... 查询出跟内容相关的作者 .. 这个 user 是在 post 模型上定义的一个关系 ..

然后用一下 paginate .. 分页数据 .. 页码是 pageNumber ... 每页的数量是 pageSize ..

下面渲染了一下 tag.show 视图 .. 传递给视图的数据是 tag .. 再用一个 spread 操作符 ... posts.toJSON() ...

这样在标签视图上，可以直接使用一些跟分页相关的数据 .. 内容列表会包含在 data 这个属性里面 ..

视图

打开 tag.show 这个视图 .. 改造一下它 .. 用一个 post.list 组件来显示标签相关的内容列表 .. 组件是 components.post.list .. 组件需要一个 items 数据 ... 对应的值就是 data ..

下面再添加一个分页组件，这个组件是我们之前介绍分页功能的时候定义好的 .. components.pagination .. 组件需要一些数据 .. total .. perPage .. page ... 还有 lastPage ..

预览

再到标签页面上预览一下 ... 现在这个标签页面上显示的内容列表 .. 是用的一个 post.list 这个组件组织显示的 ..

列表的下面，还有一个分页器 ... 现在我们就可以分页浏览标签相关的内容列表了 ..