事件

Lume 将在生命周期中触发的所有事件的列表

事件

描述: Lume 将在生命周期中触发的所有事件的列表 排序: 10

Lume 有一个事件系统，用于在编译过程中的特定时间运行一些代码。您可以在 _config.js 文件中使用 addEventListener 函数来配置这些事件。

beforeBuild

此事件在站点构建开始之前触发。请注意，如果您正在使用 lume --serve 监听文件，则此事件仅在初始构建之前执行一次。对于后续更改，请使用 beforeUpdate。

site.addEventListener("beforeBuild", () => {
  console.log("The build is about to start"); // 构建即将开始
});

注意：如果事件监听器返回 false，则构建过程将停止：

site.addEventListener("beforeBuild", () => {
  return false; // Stop the build // 停止构建
});

afterBuild

此事件在站点构建完成后触发。请注意，如果您正在使用 lume --serve 监听文件，则此事件仅在初始构建之后执行一次。对于后续更改，请使用 afterUpdate。

site.addEventListener("afterBuild", (event) => {
  console.log("The build is finished"); // 构建已完成
  console.log(event.pages); // The pages that have been build // 已构建的页面
  console.log(event.staticFiles); // The files that have been copied // 已复制的静态文件
});

beforeUpdate

每当使用 lume --serve 构建站点时检测到更改，此事件都会触发。

site.addEventListener("beforeUpdate", (event) => {
  console.log("New changes detected"); // 检测到新的更改
  console.log(event.files); // The files that have changed // 已更改的文件
});

注意：如果事件监听器返回 false，则更新过程将停止：

site.addEventListener("beforeUpdate", () => {
  return false; // Stop the update // 停止更新
});

afterUpdate

在使用 lume --serve 检测到更改后重新构建站点后，此事件会触发。

site.addEventListener("afterUpdate", (event) => {
  console.log("Site updated"); // 站点已更新
  console.log(event.files); // The files that have changed // 已更改的文件
  console.log(event.pages); // The pages that have been rebuilt // 已重新构建的页面
  console.log(event.staticFiles); // The static files that have been copied again // 再次复制的静态文件
});

afterLoad

在源文件夹中的所有文件加载（但未处理）后触发的事件。它允许执行低级操作，例如重命名文件等。

beforeRender

此事件在所有页面加载后但在渲染之前触发。

site.addEventListener("beforeRender", (event) => {
  console.log("Ready to render the pages"); // 准备渲染页面
  console.log(event.pages); // The pages to render // 要渲染的页面
});

afterRender

此事件在所有页面渲染后但在处理之前触发。

site.addEventListener("afterRender", () => {
  console.log("All pages rendered"); // 所有页面已渲染
});

beforeSave

此事件在保存生成的页面之前触发。

site.addEventListener("beforeSave", () => {
  console.log("All pages are about to be saved"); // 所有页面即将被保存
});

注意：如果事件监听器返回 false，则保存过程将停止：

site.addEventListener("beforeSave", () => {
  return false; // Don't save the files // 不要保存文件
});

afterStartServer

此事件在使用 lume --server 命令启动本地服务器后触发。

site.addEventListener("afterStartServer", () => {
  console.log("Local server started successfully"); // 本地服务器已成功启动
});

使用事件执行脚本

除了函数之外，您还可以在事件中执行脚本，方法是传递带有脚本名称的字符串。

// Create the script // 创建脚本
site.script("compress", "gzip -r _site site.gz");

// Execute it after build the site // 在构建站点后执行它
site.addEventListener("afterBuild", "compress").

// Or you can run any script directly // 或者您可以直接运行任何脚本
site.addEventListener("afterBuild", "gzip -r _site site.gz").

事件选项

与 web APIs 类似，addEventListener 的第三个参数允许自定义事件监听器。可用的选项有：

  • once: 仅运行一次监听器，然后将其删除。
  • signal: 提供一个 AbortSignal 以随时删除监听器。

仅执行一次的监听器示例：

site.addEventListener("afterUpdate", () => {
  console.log("This is the first update"); // 这是第一次更新
}, {
  once: true,
});

信号用法示例：

const controller = new AbortController();
let times = 0;

site.addEventListener("afterUpdate", () => {
  times++;

  // Remove the listener after 5 times // 在 5 次后删除监听器
  if (times === 5) {
    controller.abort();
  }

  console.log(`This is the update ${times}`); // 这是第 ${times} 次更新
}, {
  signal: controller.signal,
});
编辑此页