详细教程（分步骤）

4. Layouts：布局

Jekyll 除了支持 HTML，还支持 Markdown。对于只包含段落、标题和图片的简单页面，Markdown 更加简洁，读写更方便。

在你的网站根目录下，新建一个 about.md 文件。

你可以复制 index.html 的内容并修改它来创建 About 页面，但这样会导致代码重复，每次添加新页面都需要手动调整。例如，如果你要为网站添加一个新的 CSS 样式文件，就得在每个页面的 <head> 里都加上 <link> 标签。对于页面较多的网站，这样做既麻烦又低效。

创建布局模板

Jekyll 允许你使用 布局（Layout） 来解决这个问题。布局是可复用的模板，它们包裹着页面内容，使页面保持一致的结构。布局文件存放在 _layouts 目录下。

在网站根目录下创建 _layouts 目录。
在 _layouts 目录内，新建 default.html 文件，并添加以下内容：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

这个 HTML 代码和 index.html 基本相同，但没有 front matter（页面头部参数）（页面头部参数），并且 content 变量会自动替换为页面的实际内容。

使用布局

要让 index.html 使用新的布局，只需在其 front matter（页面头部参数）里指定 layout 变量：

---
layout: default
title: 主页
---
<h1>{{ "JekyllDo 热爱这个世界" | downcase }}</h1>

当你重新加载网站时，页面的显示效果不会发生变化。

由于 布局（Layout） 会包裹页面的内容，你可以在布局文件中使用 page 变量来调用页面的 front matter（页面头部参数）。当某个页面指定了 layout，它的 front matter 变量就会自动传递到布局中。例如，在 default.html 布局中，Layouts：布局 会显示当前页面的 title 值。

这样，所有使用 default.html 布局的页面都能保持统一的结构，同时仍然能显示各自的标题和内容，大大减少了重复代码，提高了管理效率。

创建关于页面（About）

现在，让 about.md 也使用 default 布局，添加以下内容：

---
layout: default
title: 关于
---
# 关于页面

本页面展示一些关于这个站点的介绍。

在浏览器中打开 http://localhost:4000/about.html 就可以看到你的 About 页面了！

至此，你的网站已经有两个页面了。接下来，你可以学习如何在不同页面之间添加导航链接！