Loaders 和引擎

Loaders 是用于读取和返回文件内容的函数。针对不同的格式有不同的 loaders，例如 json、yaml、JavaScript 模块或纯文本。

创建一个 Loader

创建一个自定义 loader 非常简单：你只需要创建一个函数来读取文件内容并返回一个数据对象。

假设你想添加对 toml 格式的支持，使用 toml Deno std 模块:

import { parse } from "https://deno.land/std/encoding/toml.ts";

async function tomlLoader(path) {
  const content = await Deno.readTextFile(path);
  return parse(content);
}

注册数据 Loader

如果你想使用 TOML loader 来加载数据文件，可以在 _config.ts 文件中使用 site.loadData() 方法：

site.loadData([".toml"], tomlLoader);

现在你可以使用 TOML 格式来保存数据文件 (_data.toml 或 _data/*.toml)。

注册页面 Loader

要使用 TOML 格式生成页面，请使用 loadPages 函数：

site.loadPages([".toml"], tomlLoader);

现在，你站点中的任何 *.toml 文件都将被加载并用于渲染页面。例如，文件 /about-us.toml 将被加载并保存为 /about-us/index.html。你也可以传递一个（自定义）模板引擎，它将用于渲染。

由于 loadPages() 旨在生成 .html 页面，因此给定的扩展名（这里是 .toml）会被删除并替换为 .html（或者对于美化 URLs 是 /index.html）。

你可能想要加载 TOML 文件，处理它们并将它们导出为 .toml 文件，而不是 .html 文件。为此，你可以使用 loadAssets()：

site.loadAssets([".toml"], tomlLoader);

现在，*.toml 文件被加载并保存为 toml。函数 loadAssets 对于加载 assets 文件非常有用，例如 css、js、svg，你想转换（捆绑、压缩...）并保存它们，同时保持相同的扩展名，而不是将它们重命名为 html。

注意： 你不能使用相同的扩展名来生成页面和 assets，因此支持两者的一个方法是为页面添加一个子扩展名（例如 .page）。例子：

// 使用 "*.page.toml" 加载页面。
site.loadPages([".toml"], {
  loader: tomlLoader,
  pageSubExtension: ".page",
});

// 使用 "*.toml" 加载 assets
site.loadAssets([".toml"], tomlLoader);

这与 JavaScript/TypeScript 模块 (*.page.js 用于页面，*.js 用于 JavaScript assets) 使用的策略相同。

模板引擎

Lume 支持多种模板引擎来渲染你的页面，例如 Vento、Nunjucks、Pug 或 Eta。扩展对更多模板引擎的支持很容易：你只需要创建一个实现 Lume.Engine 接口的类。让我们看一个使用 handlebars 的例子：

import HandlebarsJS from "https://dev.jspm.io/handlebars@4.7.6";

export default class HandlebarsEngine implements Lume.Engine {
  /** 渲染内容 */
  render(content: string, data: Record<string, unknown>, filename: string) {
    return this.renderComponent(content, data, filename);
  }

  /** 渲染组件 */
  renderComponent(
    content: string,
    data: Record<string, unknown>,
    filename: string,
  ) {
    const template = HandlebarsJS.compile(content);
    return template(data);
  }

  /** 注册 helpers */
  addHelper() {}

  /** 删除缓存 */
  deleteCache() {}
}

要使用此模板引擎，请将其传递给 loadPages 函数的 options 参数：

import textLoader from "lume/core/loaders/text.ts";
import HandlebarsEngine from "./handlebars-engine.ts";

site.loadPages([".hbs"], {
  loader: textLoader,
  engine: new HandlebarsEngine(site),
});

现在，所有扩展名为 .hbs 的文件都将使用 textLoader 加载，并使用 Handlebars 引擎渲染。