使用资源

Lume 如何处理诸如 CSS、JavaScript 或图像文件之类的资源。

在之前的步骤中，我们学习了如何使用 Lume 创建 HTML 页面，这包括创建文件（格式如 Markdown、Vento、JavaScript、YAML 等）并使用布局来添加剩余的 HTML 代码。

然而，网站包含的文件不仅仅是 HTML 页面。我们需要 CSS 来进行样式设计，JavaScript 来实现交互，以及图像、视频等。这些文件被称为“资源 (assets)”，Lume 有两种方法来处理它们。让我们从最简单的一种开始：复制它们。

复制资源

假设我们想为我们的网站应用一些样式。创建文件 /styles.css 并添加一些 CSS 代码：

body {
  font-family: system-ui;
  max-width: 40em;
  margin: 2em auto;
}

现在我们需要在所有页面中导入这个 CSS 文件。幸运的是，我们在所有页面上都使用了相同的布局，所以我们只需要编辑布局文件，包含一个指向我们的 styles.css 文件的 <link rel="stylesheet"> 元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    {{ content }}
  </body>
</html>

现在，所有页面都有了 <link> 元素，但是样式并没有被应用。如果你检查 _site 文件夹，你不会在那里看到 styles.css 文件，并且 URL http://localhost:3000/styles.css 返回 404 错误。

这是因为 Lume 默认情况下只从已知扩展名的文件（如 .md、.vto 等）生成 HTML 页面。其他文件会被忽略。所以我们需要配置 Lume 以包含所需的额外文件。

Lume 配置在 _config.ts 文件中定义。当创建一个新的 Lume 项目时，这个文件非常基础，它唯一做的事情是导入 Lume，创建一个 site 实例，并导出该实例：

import lume from "lume/mod.ts";

const site = lume();

export default site;

site 变量是负责构建我们站点的 Lume 实例。它包含几个函数来配置我们站点的构建方式，其中一个函数是 copy()，它允许我们定义想要复制的文件。

import lume from "lume/mod.ts";

const site = lume();

site.copy("/styles.css");

export default site;

现在你应该在 _site 文件夹中看到 styles.css 文件，并且样式已应用于所有 HTML 页面。

Tip

copy() 函数非常强大，它允许你按名称或扩展名复制文件，复制文件夹，更改输出名称等等。请参阅 copy 文档 以了解更多信息。

编辑此页