搜索和分页

使用搜索和分页助手创建动态页面。

变量 search 和 paginate 是全局函数，允许搜索其他页面并对结果进行分页。

搜索页面

函数 search.pages() 返回一个页面数组，你可以对其进行过滤和排序。例如，要搜索变量 category 等于 music 的页面，请使用以下代码：

<ul>
  {{ for page of search.pages("category=music") }}
  <li>{{ page.title }}</li>
  {{ /for }}
</ul>

返回的每个 page 都是一个对象，其中包含分配给此页面的数据（例如 front matter 中的变量，或 _data.* 文件中的变量）。在上面的示例中，我们使用每个页面的标题来构建列表。

search 助手非常强大，并且具有更多有趣的功能。请转到 Search 插件文档 获取更多信息。

分页

在 Lume 中，你可以使用 generator 创建多个页面。分页基本上是相同的概念：使用搜索结果创建多个页面。

假设我们要对一些页面进行分页，每组 10 个元素。我们可以使用 generator 手动完成此操作：

export default function* ({ search }) {
  // 选择页面
  const pages = search.pages("category=music");
  const totalResults = pages.length;

  let currentPage = 1;

  while (pages.length) {
    // 提取前 10 个结果
    const results = pages.splice(0, 10);

    yield {
      layout: "layouts/post-list.vto",
      url: `/music/page-${currentPage}/`,
      results,
      pagination: {
        currentPage,
        totalResults,
      },
    };

    // 增加页码
    ++currentPage;
  }
}

在此示例中，我们选择了所有页面，为每 10 个结果生成一个页面，URL 分别为 /music/page-1/、/music/page-2/、/music/page-3/ 等。每个页面都使用布局 layouts/post-list.vto，该布局将接收变量 results（包含此页面要显示的结果数组）和 pagination（包含一些有用的信息，例如当前页码或总结果数）等。

Paginate 插件（在 Lume 中默认启用）公开了 paginate 助手，以简化此过程。前面的示例可以用这种更简单的方式完成：

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

export default function* ({ search, paginate }) {
  const musicPages = search.pages("category=music");

  for (const page of paginate(musicPages))) {
    yield page;
  }
}

请转到 paginate 插件文档 获取更多信息。

编辑此页