布局

设置渲染页面的布局

布局是包裹着你的内容的模板。它们允许你将模板的源代码放在一个地方，这样你就不必在每个页面上重复导航和页脚等内容。

布局文件从一个名为 _includes 的特殊目录加载。这个目录不仅可以包含布局文件，还可以包含其他文件，因此一个好的做法是将它们保存在一个子目录中，例如 _includes/layouts。

在下面的页面中，我们定义了变量 layout，并指定了我们想要使用的模板的名称：

---
title: 这是 Front Matter
layout: layouts/main.vto
---

# 这是页面内容
你可以在这里编写 Markdown 内容

Lume 支持许多模板引擎。在这个例子中，布局文件使用了扩展名 .vto，这是 Vento 模板引擎使用的扩展名：

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>

  <body>
    <main>
      {{ content }}
    </main>
  </body>
</html>

Lume 将会搜索文件 _includes/layouts/main.vto (注意所有的布局文件都相对于 _includes 目录)。

模板可以使用页面中的任何变量，例如，title 来渲染标题，以及 content 来渲染页面的 Markdown 内容。

布局数据

布局可以拥有额外的数据，这些数据将与页面中的数据合并。请注意，页面中定义的变量优先级高于布局中的变量。这意味着你可以在布局中设置默认值，并在页面中覆盖它们。

一个布局可以被另一个布局包裹。只需在 Front Matter 中设置 layout 变量。在下面的例子中，该布局使用了 layouts/main.vto 布局作为包装器。

---
title: 这是 Front Matter
layout: layouts/page.vto
---

# 这是页面内容
你可以在这里编写 Markdown 内容

---
title: 默认页面标题
language: en
layout: layouts/main.vto
---

<article lang="{{ language }}">
  <header>
    <h1>{{ title }}</h1>
  </header>

  {{ content }}
</article>

---
title: 默认主标题
language: en
---
<!doctype html>

<html lang="{{ language }}">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>

  <body>
    <main>
      {{ content }}
    </main>
  </body>
</html>
编辑此页