Jekyll — Ⅳ. 布局模板

Step by Step Tutorial - Ⅳ. Layouts(部分翻译,自用帮助了解)

目录

网站一般不止一个文件,这个也不例外。

Jekyll 支持 Markdown 以及 HTML 页面。对于那些内容结构简单(只有段落,标题和图片)的页面,用 Markdown 准没错。比起 HTML 它简洁不少。下面就试一试。

在根目录创建 about.md

关于页面的结构可以复制 index.html 再做些许修改。问题就在这,比如说你想添加样式,可能要去改每个页面的 <head>。两个页面还好说,100 个呢?

Creating a layout

使用布局模板是一个比较好的选择。布局是包裹(wrap)内容用的模板,它们位于 _layouts 目录。

_layouts/default.html 创建第一个布局文件,并添加如下内容:

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

应该注意到了这和 index.html 基本相同。

在头部信息中添加 layout 变量,就能让 index.html 使用布局:

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

做了这些微小工作后,输出应该和改之前完全一样。你也能中布局中访问 page 头部信息,这个例子中, title 在主页的头部信息中设置,在布局中输出。

About page

回到关于页面,这次不复制 index.html,而是使用布局。

添加如下内容于 about.md

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

This page tells you a little bit about me.

打开 http://localhost:4000/about.html,看一看你的新页面。

Congratulations,你的网站现在有两个页面了!但要怎样才能实现页面到另一个页面的导航?继续。


[Ⅳ] Layouts - Jekyll Docs Step by Step Tutorial