Jekyll 入门篇四 - 布局

2019-01-30 | 原创 | jekyll

4. 布局

网站通常不会只有一个页面构成，你正在着手构建的这个新站点也一样。

Jekyll 支持 Markdown 和 HTML 作为一个网页的语言。Markdown 对于简洁的网页排版来说是一个绝佳的选择（段落、标题和图片），这使得 Markdown 比纯 HTML 要简洁凝练得多。接下来让我们在一个新页面中尝试一下吧。

首先你的根目录下新建一个 about.md 文件（注：现在你的根目录应该有两个页面了，index.html 和 about.md）。

对于 about.md 的页面结构，你可以从 index.html 那儿拷贝过来，然后再进行调整。这样做的问题是造成了重复的代码。假设我们想在页面中添加样式，你就必须把样式添加到每个页面的 <head> 标签中。这对于两个页面来说可能不成问题，那么 100 个页面呢？即使是一点点小的改变也需要很长的时间去逐个进行调整。

创建一个布局

使用页面布局无疑是一个更好的选择。所谓布局，其实就是包裹你的文章内容的网页模板。布局文件通常被放在 _layouts 文件夹中。

在根目录中新建一个 _layouts 文件夹，然后添加一个 default.html 页面作为你的第一个布局文件，default.html 的内容可以参考下面的代码：

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

你可能已经注意到了，这个页面除了没有头定义和内容部分用 content 对象代替之外，其余的部分和 index.html 几乎没有什么不同。content 是一个特殊的变量，它的值是套用这个布局文件的页面内容。

为了让 index.html 页面使用这个布局模板，我们可以在 index.html 文件的头定义中添加一个 layout 变量。这样这个模板会自动地将 index.html 文件中的内容包裹起来，因此在 index.html 文件中你需要的仅仅是：

---
layout: default
title: Home
---

<h1>{{ "Hello World!" | downcase }}</h1>

看！输出结果是不是跟之前一模一样？记住，你可以在布局文件中使用 page 变量。这里我们在 index.html 头定义中引入了一个 title 变量，这个变量被布局文件最终捕获并输出。

About 页面

让我们回到更改创建的 about.md 页面。我们现在不用像之前那样直接复制 index.html 页面的内容，而采取使用布局文件的方式：

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

在浏览器打开 http://localhost:4000/about.html 查看你的新页面吧！

现在你的新站点已经拥有两个页面了，但是我们如何从一个页面跳转到另一个呢？继续阅读，你就知道。

《》