Jekyll 教程——布局
Posted 老梁写代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jekyll 教程——布局相关的知识，希望对你有一定的参考价值。
我们知道，一个网站由多个页面组成，多个页面之间存在通用部分，比如 head、footer 或者 navigation。
这些通用部分的如果不能放在一个地方维护，任何变更都会涉及到所有文件，非常不利于维护。
Jekyll 为了解决这个问题，引入了了布局（Layout）这个概念。
如何使用布局
布局的用法非常简单。
首先在项目根目录下创建一个文件夹 _layouts，这个名称也属于 Jekyll 的约定之一。
然后在 _layouts 下创建一个名为 default.html 的 html 文件：
_layouts/default.html
<!DOCTYPE html>
<html>
<body>
<main class="page-content" aria-label="Content">
<div class="wrapper">
content
</div>
</main>
</body>
</html>
上面代码中出现了一个变量——
content，这里只需要注意下，后面会详细解释。
然后，我们再创建另一个文件——page.html，内容如下：
---
layout: default
---
<article class="page">
<header class="page-header">
<h1 class="page-title"> page.title | escape </h1>
</header>
<div class="page-content">
content
</div>
</article>
page.html 的文件顶部有一个 Front Matter，内部定义了一个变量 layout，值是 default。
default 指的就是 default.html 文件， layout 是变量名，用于指定当前文件的布局。
default.html 文件中出现的 content 的作用，用一张图可能更好解释：
也就是说，Jekyll 会把 default.html 的 content 替换成 page.html 的文件内容（除 Front Matter 外），并在 _site 目录下生成一个新的 page.html 文件作为最终产物。
page.html 和 default.html 本质上是一种继承关系，当然也支持多继承。
布局继承
page.html 继承自 default.html，page.html 也可拥有自己的子类。
例如，我们需要分别为 Jekyll 教程和 Flutter 教程的展示页面定义一个布局文件，就可以直接创建两个新的 HTML 文件，让它们继承 page.html：
页面变量
上面 page.html 的代码用到了一个变量——page.title，这个变量并没有出现在 Front Matter 中，其实这是 Jekyll 的内置变量。
除此之外，还有许多，比如全局变量：
sitepagelayoutcontentpaginator
有的全局变量还有自己的子变量。
我们以 page 为例：
page.content- 页面内容page.title- 页面标题page.excerpt- 页面节选page.url- 页面 url- …
很多变量还可以直接在 _config.yml 文件中赋值，后续我们会讲到。
下一篇将介绍 includes，敬请期待~
以上是关于Jekyll 教程——布局的主要内容，如果未能解决你的问题，请参考以下文章