Liquid

使用 Liquid 模板引擎创建页面和布局

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".liquid" ]

pageSubExtension string

Optional sub-extension for page files

includes string

Custom includes path

Default:

site.options.includes

options object

Options passed to Liquidjs library

See https://liquidjs.com/tutorials/options.html

Warning

此插件已弃用。Nunjucks 建议作为替代方案。

描述

Liquid 是一个简单、富有表现力且安全的模板引擎。此插件允许你使用它来创建页面和布局。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import liquid from "lume/plugins/liquid.ts";

const site = lume();

site.use(liquid(/* 选项 */));

export default site;

创建布局

在 _includes 目录中添加一个扩展名为 .liquid 的文件。使用 front matter 来为模板设置数据。

--- title: Welcome to my page intro: This is my first post using Lume. I hope
you like it! ---

<html>
  <head>
    <title>{{ title }}</title>
  </head>

  <body>
    <p>{{ intro }}</p>
  </body>
</html>

创建页面

创建页面与创建布局相同；只需将 .liquid 文件放在 _includes 目录之外。

`liquid` 过滤器

Liquid 插件还注册了 liquid 过滤器，用于将任何字符串值渲染为 Liquid 模板并输出 HTML。该过滤器接受一个包含数据的对象。

---
data:
  username: Oscar
text: "Hello {{ username }}"
---

<!-- 渲染字符串 -->
<div>{{ text | liquid: data }}<div>

配置 VSCode

你可以使用 Liquid extension for VS Code 来进行语法高亮和一些有用的代码片段。

Liquid 已弃用

Liquidjs 是一个很棒的库，但它有一个与 Lume 不兼容的限制：无法调用函数。这非常不幸，因为无法在 liquid 模板中使用 search helper 来循环遍历页面。例如，以下代码无法工作：

<ul>
  {% for item in search.pages('post') %}
  <li>{{item.title}}</li>
  {% endfor %}
</ul>

Lume 支持 Nunjucks，这是一个很好的替代方案，因为它具有与 Liquid 非常相似的语法，并且允许你运行函数。我决定弃用 Liquid 插件。它在 Lume 2 中仍然可用，但可能会在 Lume 3 中移除（在遥远的将来）。