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.htmldefault.html 本质上是一种继承关系,当然也支持多继承。

布局继承

page.html 继承自 default.htmlpage.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,敬请期待~

以上是关于Jekyll 教程——布局的主要内容,如果未能解决你的问题,请参考以下文章

Jekyll 教程——模块化(includes)

Jekyll 教程——模块化(includes)

Jekyll - 如果页面是帖子,则更改布局?

html reveal.js的Jekyll布局

html 从我的博客文章:使用Jekyll创建动态布局

Github+Jekyll 搭建个人网站详细教程