使用插件

如何使用 Lume 插件来完成常见任务

在前一步中,我们学习了 Lume 如何加载和处理资源。 幸运的是,你不需要经常这样做,因为许多你可能想要执行的常见操作已经在 Lume 中以 插件 的形式实现了。

插件提供了一个极其简单的接口来配置 Lume 执行诸如 转译 JavaScript转换图像生成站点地图 等操作。 插件涵盖了你在创建网站时可能遇到的常见问题和任务。

使用插件压缩 CSS 代码

为了压缩你的 CSS 代码,你可以使用为此目的提供的插件之一,而不是配置 Lume 来加载和处理 CSS 文件。 在这个例子中,让我们使用 lightningcss 插件来使用 Lightning CSS,这是一个非常快速的 CSS 打包器和压缩器,它不仅可以压缩代码,还可以转换代码以使其与所有浏览器兼容。

要在 Lume 中使用插件,你必须在 _config.ts 文件中导入它,并使用 use() 函数来使用它:

import lume from "lume/mod.ts";
import lightningCSS from "lume/plugins/lightningcss.ts";

const site = lume();
site.use(lightningCSS());

export default site;

就是这样!配置 Lume 加载 .css 文件并处理它们的所有逻辑都隐藏在插件背后了。 你的 _config.ts 文件现在更加简洁了。

Tip

插件易于使用,也易于创建!学习 如何创建你的插件

前往插件 查看所有可用的官方 Lume 插件。