分步教程

2. Liquid

Liquid 是 Jekyll 开始变得更有趣的地方。它是一种模板语言,具有三个主要组件

对象

对象告诉 Liquid 将预定义的变量作为页面上的内容输出。对对象使用双花括号:{{}}

例如,{{ page.title }} 显示page.title 变量。

标签

标签定义模板的逻辑和控制流。对标签使用花括号和百分号:{%%}

例如

{% if page.show_sidebar %}
  <div class="sidebar">
    sidebar content
  </div>
{% endif %}

如果show_sidebar 页面变量的值为 true,则此代码显示侧边栏。

在此了解有关 Jekyll 中可用标签的更多信息。

过滤器

过滤器更改 Liquid 对象的输出。它们在输出中使用,并用 | 分隔。

例如

{{ "hi" | capitalize }}

此代码显示 Hi 而不是 hi

了解有关可用过滤器的更多信息。

使用 Liquid

现在,使用 Liquid 将 设置 中的 Hello World! 文本变为小写

...
<h1>{{ "Hello World!" | downcase }}</h1>
...

为了让 Jekyll 处理您的更改,请将 页眉 添加到页面顶部

---
# front matter tells Jekyll to process Liquid
---

您的 HTML 文档应如下所示

---
---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

重新加载浏览器后,您应会看到 hello world!

Jekyll 的强大功能很大程度上源于将 Liquid 与其他功能相结合。将页眉添加到页面,以使 Jekyll 处理这些页面上的 Liquid。

接下来,您将详细了解页眉。

  1. 设置
  2. Liquid
  3. 前端事项
  4. 布局
  5. 包含
  6. 数据文件
  7. 资产
  8. 博客
  9. 集合
  10. 部署