Paginate 默认

配置参数

name string

The helper name

Default:

"paginate"

options object

The default pagination options

size number

The number of elements per page

Default:

10

url function

The function to generate the url of the pages

Default:

[Function (anonymous)]

each function

Function to modify or add extra data to each page

Description

此插件注册了 paginate 助手函数，用于使用结果数组创建分页。当与 search 助手函数结合使用时，这对于创建分页结果非常有用。例如：

export const layout = "layouts/post-list.vto";

export default function* ({ search, paginate }) { // 导出默认函数，使用 search 和 paginate 助手函数
  const posts = search.pages("posts"); // 搜索 "posts" 页面
  const options = { // 分页选项
    url: (n) => `/posts/page/${n}/`, // 生成 URL 的函数
    size: 10, // 每页元素数量
  };

  for (const page of paginate(posts, options)) { // 遍历分页结果
    yield page; // 产出每一页
  }
}

如你所见，paginate 助手函数接受两个参数：一个可迭代对象和一个包含选项的对象。可用的选项如下：

此助手函数返回一个数组。每个条目都具有以下值：

for (const page of paginate(posts, options)) { // 遍历分页结果
  page.url;        // 页面的 URL，例如 "post/page/1"
  page.results;    // 包含此页结果的数组

  // 分页信息:
  page.pagination.page;         // 当前页码
  page.pagination.totalPages;   // 总页数
  page.pagination.totalResults; // 总结果数
  page.pagination.previous;     // 上一页的 URL
  page.pagination.next;         // 下一页的 URL

  yield page; // 产出每一页
}

Installation

此插件默认安装。🎉

Configuration

如果你想更改默认配置，请在你的 _config.ts 文件中使用 lume() 函数的第二个参数。

import lume from "lume/mod.ts"; // 导入 lume

// Paginate 插件配置
const paginate = {/* 你的配置写在这里 */};

// 应用插件配置
const site = lume({}, { paginate }); // 创建站点实例，并应用 paginate 插件配置