远程文件

加载远程文件作为缺失本地文件的备选方案

在 Lume 中，可以使用远程文件，就像它们是本地文件一样。要配置一个远程文件，你必须在你的 _config.ts 文件中使用 remoteFile() 函数来设置一个本地名称和一个远程 URL。 例如：

import lume from "lume/mod.ts";

const site = lume();

site.remoteFile("styles.css", "https://example.com/theme/styles.css");

export default site;

这向 Lume 表明，如果文件 styles.css 在本地不存在，则必须使用远程 URL。请注意，该文件不会保存在项目文件夹中，而是保存在内存中。

如果你想静态地复制这个文件：

site.copy("styles.css");

由于该文件在你的本地文件夹中不存在，Lume 将从 URL 下载该文件并将其保存在目标（dest）文件夹中。

postcss 插件支持 Lume 的远程文件，因此你可以在你的 CSS 中使用以下代码导入此文件：

@import "./styles.css";

远程布局

远程文件可以用于布局。假设你有多个网站使用相同的布局。与其在每个项目中重复相同的文件，不如远程加载它：

site.remoteFile(
  "_includes/layouts/main.vto",
  "https://example.com/theme/layouts/main.vto",
);

现在，你可以在你所有的文件中使用这个布局：

---
title: 这是一个页面
layout: layouts/main.vto
---

页面内容

覆盖远程文件

如果一个远程文件在本地存在（在前面的例子中：styles.css 和 _includes/layouts/main.vto），则将使用本地文件而不是远程文件。这对于创建主题非常有用，主题的所有模板和资源都从远程加载，但允许在本地覆盖某些文件，以便自定义主题。 例如，请参阅 Simple blog theme。

远程文件的限制

远程文件在大多数情况下都有效，因为它们原生集成在 Lume 的文件系统中。

一些模板引擎有它们自己加载模板的方式。例如，Pug 使用 extends "filename"，Vento 使用 {{ include "filename" }}，Liquid 和 Nunjucks 使用 {% include "filename" %}，等等。

模板引擎 Eta, Liquid 和 Pug 不允许自定义加载文件的方式，并且不能使用 Lume 文件系统，因此它们无法包含远程文件。 如果你想使用远程模板，Vento 或 Nunjucks 是不错的选择。

缓存文件

从 Lume 1.17.4 版本开始，文件使用 Web Cache API 自动缓存，因此它们仅在第一次请求，之后不再需要网络访问。可以通过在构建之前删除缓存的响应来禁用特定文件的缓存。 例如：

// 打开 Lume 远程文件的缓存
const cache = await caches.open("lume_remote_files");

// 使用远程 URL 删除缓存
await cache.delete("https://example.com/theme/styles.css");

如果你不想缓存远程文件，请使用 LUME_NOCACHE=true 环境变量。例如：

LUME_NOCACHE=true deno task serve

导入模块

以 import foo from "./filename.ts" 形式导入的 JavaScript/TypeScript 模块不受 Lume 文件系统管理，但你可以使用 import maps 来获得类似的行为。

编辑此页