渲染顺序

配置页面的渲染顺序

在 Lume 中，所有页面都是同时渲染的。这在大多数情况下都运行良好，但有时你希望确保一个页面在其他页面之前或之后渲染。最典型的例子是自动生成的页面。假设你有一个页面，它使用来自外部 API 的数据动态生成多个页面：

export const layout = "layouts/api.vto";

const response = await fetch("https://my-api.com/data.json");
const data = await response.json();

export default function* () {
  for (const item of data.items) {
    yield {
      url: `item-${item.id}`,
      title: item.title,
      type: "api",
      content: item.text,
    };
  }
}

这个脚本将为 api 返回的每个 item 生成一个页面。请注意，我们已将变量 type 添加到所有页面，其值为 "api"。这将帮助我们稍后选择这些新页面。

为了列出这些自动生成页面并进行分页，你可能想要创建类似这样的内容：

export const layout = "layouts/api-pagination.vto";

export default function* ({ search, paginate }) {
  const items = search.pages("type=api");

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

在这个脚本中，我们使用 search 辅助函数搜索所有变量为 type=api 的页面，并使用 paginate 辅助函数对它们进行分页。但我们遇到了一个问题：因为所有页面都是同时执行的，所以当我们尝试分页时，type=api 页面可能还不存在，因此分页将无法工作。我们真正需要的是在分页 之前 创建所有动态页面。

为了控制这一点，lume 具有 renderOrder 变量，用于配置每个页面的渲染顺序。默认情况下，此值为 0，因此如果将其更改为负值（例如 -1、-2 等），则页面将在其他页面 之前 渲染，而将其更改为正值（1、2 等）将导致页面在 之后 渲染。因此，为了解决我们的示例，解决方案可能是将分页脚本的 renderOrder 更改为大于 0 的值，例如 1：

export const layout = "layouts/api-pagination.vto";

// Changed this to render this page after the others
// 修改为在此页之后渲染此页面
export const renderOrder = 1;

export default function* ({ search, paginate }) {
  const items = search.pages("type=api");

  for (const page of paginate(items, { url: (n) => `/page/${n}/`, size: 10 })) {
    yield page;
  }
}

这确保了这个脚本将在 type=api 页面创建 之后 运行。另一种解决方案是将 API 脚本的 renderOrder 更改为负值，例如 -1。

编辑此页