_config 文件

如何使用配置文件自定义 Lume

配置文件是 _config.ts 或 _config.js，保存在站点的根目录下。如果你还没有，请参阅安装文档 了解如何创建它。

最简化的必需代码如下：

import lume from "lume/mod.ts";

const site = lume();

export default site;

lume() 函数创建一个新的 Lume 实例并导出它。此函数接受一个带有以下配置值的对象：

基本选项

src

这是包含站点源文件的目录。构建站点所需的所有文件都必须在此处。此目录之外的文件和文件夹将不会包含在你的站点中。它相对于 cwd，默认值为 . (当前目录)，但有些人喜欢将源文件存储在子文件夹中，例如 src。

const site = lume({
  src: "./src",
});

Tip

你可以使用 CLI 中的 --src 覆盖该值，如果你在同一目录下有不同的站点，这将非常有用。例如： deno task lume --src=./src

dest

这是导出生成站点的文件夹。它相对于 cwd，默认值为 _site。

const site = lume({
  dest: "./output",
});

Tip

你可以使用 CLI 中的 --dest 覆盖该值，如果你想生成站点而不覆盖之前的站点，这将非常有用。例如：deno task lume --dest=./output

emptyDest

默认情况下，Lume 会在构建之前清空 dest 文件夹。你可以通过将此选项设置为 false 来阻止此行为：

const site = lume({
  emptyDest: false,
});

如果你想将两个或多个站点合并到同一个文件夹中，这将非常有用。另一个用例是对于非常大的站点（超过 10 万页），需要分几个步骤构建以防止内存耗尽。

location

这是站点的公共 URL 地址。如果你的站点发布在子目录下（例如：https://example.com/project-name/），它可用于生成绝对 URL 或修复相对 URL。它只接受 URL 对象，例如：

const site = lume({
  location: new URL("https://example.com"),
});

此值会被本地服务器（使用 lume --serve 启动）忽略，本地服务器始终使用 http://localhost:3000（或者你更改后的端口）。

Tip

你可以使用 CLI 中的 --location 覆盖该值，如果你想构建站点并将其部署到不同的位置，这将非常有用。例如：deno task lume --location=https://my-site.com/blog/

prettyUrls

默认情况下启用，并生成美观的 URL，例如 /about-us/ 而不是 /about-us.html。设置为 false 可禁用它。

const site = lume({
  prettyUrls: false, // 禁用美观 URL
});

caseSensitiveUrls

Lume 阻止保存两个具有相同 URL 的页面。默认情况下，同名但大小写不同的页面被视为同一页面，例如 /about-us/ 和 /About-Us/。此行为与 Windows 和 MacOS 的文件系统（不区分大小写）相匹配。你可以将此选项设置为 true 使其区分大小写，以便将这两个页面视为不同的页面。请注意，此行为仅与 Linux 兼容。

includes

这是一个特殊文件夹，默认情况下模板引擎和一些处理器（如 sass 或 postcss）使用它来查找包含的文件。默认值为 _includes，此值相对于 src 文件夹。

例如，如果 src 文件夹是 ./src，并且 includes 文件夹配置为 _includes，则 Lume 将在 ./src/_includes/ 中查找包含的文件。

Server options

server 键包含本地服务器的配置。它具有以下选项：

root

设置服务器的根文件夹。默认情况下，它与 dest 目录相同。你可能想要更改此值的唯一用例是，如果你的 dest 文件夹是例如 _site/blog，并且你希望在提供站点时公开 blog 文件夹，因为所有 URL 都以 /blog/ 开头。

port

默认情况下，本地服务器使用端口 3000。使用此选项设置不同的端口。

const site = lume({
  server: {
    port: 8000,
  },
});

Tip

此值可以从 CLI 中使用 --port 覆盖。例如： deno task lume --serve --port=8888

page404

此选项允许配置为 404 错误显示的 HTML 页面。默认情况下为 /404.html。如果你正在使用动态 URL 构建 SPA，你可能需要将其更改为 /index.html。

const site = lume({
  server: {
    page404: "./not-found.html",
  },
});

open

设置为 true 以在本地 Web 服务器启动后自动在你的默认 Web 浏览器中打开生成的站点。

const site = lume({
  server: {
    open: true,
  },
});

Tip

此值可以从 CLI 中使用 --open 或 -o 设置。例如： deno task lume --serve --open

middlewares

使用此选项将中间件添加到本地 Web 服务器。在 lume/middlewares/* 中有一些用于常见需求的中间件选项，但你可以轻松创建自定义中间件。更多信息请参阅 服务器文档。

import expires from "lume/middlewares/expires.ts";

const site = lume({
  server: {
    middlewares: [
      expires(),
    ],
  },
});

Watcher options

watcher 键包含一个对象，用于配置文件监视器，文件监视器用于使用 lume --serve 和 lume --watch 监视文件更改。

  • debounce: 防抖间隔（以毫秒为单位）。默认值为 100。
  • ignore: 一个字符串或函数数组，用于过滤监视器忽略的路径。
const site = lume({
  watcher: {
    debounce: 10,
    ignore: [
      "./ignored-folder/",
      "./ignored-file.txt",
      (path) => path.endsWith(".foo"), // 忽略扩展名
    ],
  },
});

Note

有些文件和目录会被监视器自动忽略，例如 .git 或 .DS_Store。

Components options

components 对象允许配置组件的加载和输出文件。

  • variable: 用于访问已加载组件的变量名。
  • cssFile: 用于导出组件 CSS 代码的文件名。
  • jsFile: 用于导出组件 JS 代码的文件名。
  • placeholder: 一个字符串，用作占位符以将内容替换为 css 或 js 代码。
import lume from "lume/mod.ts";

const site = lume({
  components: {
    variable: "comp",
    cssFile: "/components.css",
    jsFile: "/components.js",
  },
});

export default site;
编辑此页