其他页面格式

使用 Vento、JavaScript 和其他格式创建页面

我们已经了解了如何在 Lume 中使用 Markdown 文件创建页面。对于博客或文档等基于文本的站点，这是一种便捷的方式。但是，您可能希望创建包含少量文本、图像、视频、动画等元素的复杂页面。每个页面都有自己的格式。

使用 Vento 创建页面

Vento，即我们在之前的示例中用于创建布局的格式，也可以直接用于创建页面。您只需创建一个扩展名为 .vto 的文件即可。例如：

---
title: 欢迎来到我的页面
layout: layout.vto
links:
  - text: 我的 Twitter
    url: https://twitter.com/misteroom
  - text: 我的 GitHub 个人资料
    url: https://github.com/oscarotero
---

<article>
  <header>
    <h1>{{ title }}</h1>
  </header>

  <ul>
    {{ for link of links }}
    <li>
      <a href="{{ link.url }}">
        {{ link.text }}
      </a>
    </li>
    {{ /for }}
  </ul>
</article>

这是一个使用 Vento 创建页面的示例。与 Markdown 类似，它可以包含 front matter 来存储页面数据，这些数据用于渲染 Vento 代码。请注意，它具有 layout 变量，因此渲染此页面的结果将传递给布局，并存储在 content 变量中（以及其他变量 title 和 links）。

使用 JavaScript 创建页面

对于需要一些渲染前逻辑的复杂页面，JavaScript 非常有用。您必须创建一个扩展名为 .page.js 的文件。.page 子扩展名是必需的，用于区分生成静态页面的 JavaScript 文件和用于在浏览器中执行的其他 JavaScript 文件。

前面 Vento 示例的 JavaScript 版本如下：

export const title = "欢迎来到我的页面";
export const layout = "layout.vto";
export const links = [
  {
    text: "我的 Twitter",
    url: "https://twitter.com/misteroom",
  },
  {
    text: "我的 GitHub 个人资料",
    url: "https://github.com/oscarotero",
  },
];

export default function ({ title, links }) {
  return `
  <article>
    <header>
      <h1>${title}</h1>
    </header>

    <ul>
      ${
    links.map((link) => `<li><a href="${link.url}">${link.text}</a></li>`).join(
      "",
    )
  }
    </ul>
  </article>`;
}

如您所见，Vento 示例中 front matter 中导出的变量现在作为命名的 ES 模块导出。

默认导出是一个返回页面内容的函数。第一个参数包含此页面的所有可用数据（不仅是页面导出的相同变量，还包括 _data 文件提供的其他数据）。

更多格式

Lume 支持多种格式来生成页面。 访问插件部分 以查看有关所有可用格式的更多信息。其中一些是默认安装的（例如 Vento、YAML、Modules 等），另一些则需要在您的 _config.ts 文件中安装（例如 Nunjucks、Eta、JSX、Liquid 或 Pug）。

数据模型

如果您想更好地了解 Lume 如何加载页面，请访问 数据模型 页面。

编辑此页