我们知道,一个网站由多个页面组成,多个页面之间存在通用部分,比如 head、footer 或者 navigation。
这些通用部分的如果不能放在一个地方维护,任何变更都会涉及到所有文件,非常不利于维护。
Jekyll 为了解决这个问题,引入了了布局(Layout)这个概念。
如何使用布局
布局的用法非常简单。
首先在项目根目录下创建一个文件夹 _layouts
,这个名称也属于 Jekyll 的约定之一。
然后在 _layouts
下创建一个名为 default.html
的 html 文件:
_layouts/default.html
上面代码中出现了一个变量——
{{ content }}
,这里只需要注意下,后面会详细解释。
然后,我们再创建另一个文件——page.html
,内容如下:
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 的内置变量。
除此之外,还有许多,比如全局变量:
-
site
-
page
-
layout
-
content
-
paginator
有的全局变量还有自己的子变量。
我们以 page
为例:
-
page.content
- 页面内容 -
page.title
- 页面标题 -
page.excerpt
- 页面节选 -
page.url
- 页面 url - …
很多变量还可以直接在 _config.yml
文件中赋值,后续我们会讲到。
下一篇将介绍 includes,敬请期待~