详细教程(分步骤)

3. Front Matter:页面头部参数

  1. Setup:安装、创建和构建 Jekyll 的详细教程
  2. Liquid:模板语言
  3. Front Matter:页面头部参数
  4. Layouts:布局
  5. Includes:引入文件、包含文件、可复用片段、模板片段
  6. Data Files:数据文件
  7. Assets:资源文件(css、js、图片)
  8. Blogging:Jekyll 博客系统
  9. Collections:集合(专题页面、聚合页面)
  10. Deployment:部署

页面头部参数(Front matter)是放在文件开头两行 --- 三段虚线之间的一段 YAML 参数片段。

你可以使用页面头部参数(Front matter)来为你的页面设定变量和值:

---
my_number: 5
---

You can call front matter variables in Liquid using the page variable. For example, to output the value of the my_number variable above:

你可以在 Liquid (布局模板或任何 HTML 和 Markdown 文件)中使用 page 变量来调用页面头部参数(Front matter)中的变量(对应变量的值)。

例如,要输出上述 my_number 变量的值:

{{ page.my_number }}

使用页面头部参数(Front matter)

使用页面头部参数(Front matter)替换你网站上 <title> 标签中的静态内容:

---
title: 主页
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "你好 Jekyll!" | downcase }}</h1>
  </body>
</html>

必须在页面中包含页面头部参数(Front matter),Jekyll 才会处理其中的 Liquid 标签。

如果你想让 Jekyll 处理一个没有任何页面头部参数(Front matter)的页面,那你无需定义任何变量,可以使用:

---
---

接下来,你将学习更多关于布局(Layout)的内容,以及“为什么你的页面需要使用更多的源代码(Liquiid),而不是纯 HTML ”。

  1. Setup:安装、创建和构建 Jekyll 的详细教程
  2. Liquid:模板语言
  3. Front Matter:页面头部参数
  4. Layouts:布局
  5. Includes:引入文件、包含文件、可复用片段、模板片段
  6. Data Files:数据文件
  7. Assets:资源文件(css、js、图片)
  8. Blogging:Jekyll 博客系统
  9. Collections:集合(专题页面、聚合页面)
  10. Deployment:部署