创建布局

向内容中添加一些 HTML 代码

在 上一步 中由 Markdown 文件生成的 HTML 代码非常基础。 如果你打开 _site/index.html 文件，你将看到如下内容：

<!DOCTYPE html>
<h1>Welcome to my website</h1>
<p>
  This is my first page using <strong>Lume,</strong> a static site generator for
  Deno.
</p>
<p>I hope you enjoy it.</p>

你可能会发现缺少一些基本的 HTML 标签，例如 <html>、<head> 或 <body>。 这是因为 Markdown 并非旨在构建完整的 HTML 页面，而仅是包含文章或帖子的 HTML 代码。 你需要使用 布局（layout） 来创建一个完整的网页。

创建布局

创建一个新的目录 _includes 并在其中创建文件 layout.vto。 .vto 扩展名用于 Vento：一个 Lume 默认支持的模板引擎。 在文件中插入以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

这个布局包含了构建整个页面所需的 HTML 代码。 标签 {{ content }} 是用于插入在 index.md 中定义的页面内容的占位符。

Note

访问 Vento 文档 以了解更多关于其语法的信息。

将布局分配给页面

现在让我们配置页面 (index.md) 以使用刚刚创建的布局。 我们必须创建一个 front matter（前言）：一个由两个三虚线分隔的块，其中包含 YAML 代码。 在这个块中，我们定义变量 layout，其值为 layout.vto（布局文件的名称）。

---
layout: layout.vto
---
# Welcome to my website

This is my first page using **Lume,**
a static site generator for Deno.

I hope you enjoy it.

Lume 将编译 Markdown 代码并使用 layout.vto 文件作为页面布局。

Note

目录 _includes 是 Lume 可以识别的特殊目录。 你无需在 layout 变量中包含它。

编辑此页