布局

布局是围绕内容的模板。它们允许您将模板的源代码放在一个位置，这样您不必在每个页面上重复导航和页脚等内容。

布局位于 _layouts 目录中。惯例是使用名为 default.html 的基本模板，并根据需要让其他布局继承此模板。

布局目录

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="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

您可以完全访问原点的页眉信息。在上面的示例中， page.title 来自页面的页眉信息。

接下来，您需要在页面的页眉信息中指定您正在使用的布局。您还可以使用页眉信息默认值来避免在每个页面上设置此值。

---
title: My First Page
layout: default
---

This is the content of my page

此页面的渲染输出是

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>My First Page</h1>
    <section>
      This is the content of my page
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

继承

当您希望为网站上部分文档的现有布局添加内容时，布局继承非常有用。一个常见的示例是博客文章，您可能希望文章显示日期和作者，但其他方面与您的基本布局相同。

要实现这一点，您需要创建另一个布局，该布局在前端内容中指定您的原始布局。例如，此布局将位于 _layouts/post.html

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

{{ content }}

现在，文章可以使用此布局，而其余页面使用默认布局。

变量

您可以在布局中设置前端内容，唯一的区别是当您在 Liquid 中使用时，您需要使用 layout 变量，而不是 page。例如

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

{{ content }}