Layouts 布局模板

布局（Layouts）是包裹你页面内容的模板。它们可以让你把页面中通用的代码集中管理，比如导航栏和页脚，而不需要在每个页面上重复编写。

所有布局文件都存放在 _layouts 目录中。通常，我们会创建一个基础模板 default.html，然后根据需要让其他布局继承它。

Layouts 目录

Jekyll 会在站点的 source 目录根目录或主题的根目录中查找 _layouts 目录。

虽然你可以在配置文件中通过 layouts_dir 键来自定义布局所在的目录名称，但该目录本身应位于站点 source 目录的根目录下。

使用方法

第一步是在 default.html 中放入模板源代码。content 是一个特殊变量，它的值是被包装的文章或页面的渲染内容。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">首页</a>
      <a href="/blog/">博客</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

你可以完全访问原始页面的 Front Matter（页面头部参数）。在上面的示例中，page.title 来自页面的 Front Matter。

接下来，你需要在页面的 Front Matter 中指定使用的布局。你还可以使用 Front Matter 默认值来避免在每个页面上手动设置。

---
title: 我的第一个页面
layout: default
---

这里是 JekyllDo 第一个页面的内容。

这个页面的渲染输出如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>我的第一个页面</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">首页</a>
      <a href="/blog/">博客</a>
    </nav>
    <h1>My First Page</h1>
    <section>
      这里是 JekyllDo 第一个页面的内容。
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

继承（Inheritance）

布局继承在你希望为网站上的某些文档添加额外内容但又保持与基础布局相似时特别有用。例如，在博客文章中，你可能希望显示日期和作者信息，但其他部分仍然与基础布局保持一致。

要实现这一点，你需要创建另一个布局，并在其 Front Matter 中指定继承的布局。例如，这个布局存放在 _layouts/post.html 文件中：

---
layout: default
---
<p>{{ page.date }} - Written by {{ page.author }}</p>

{{ content }}

现在，博客文章可以使用这个 post.html 布局，而其他页面仍然使用 default.html 布局。

变量（Variables）

你可以在布局文件的 Front Matter 中设置变量。唯一的区别是，在 Liquid 语法中，布局变量需要使用 layout 变量，而不是 page 变量。例如：

---
city: San Francisco
---
<p>{{ layout.city }}</p>

{{ content }}