Nunjucks

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

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".njk" ]

pageSubExtension string

Optional sub-extension for page files

includes string

Custom includes path

Default:

site.options.includes

options object

Options passed to Nunjucks

See https://mozilla.github.io/nunjucks/api.html#configure

plugins object

Plugins loaded by Nunjucks

Description

Nunjucks 是一个强大的模板语言，由 Mozilla 创建，灵感来源于 ninja2。此插件允许你使用它来创建页面和布局。

Installation

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

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

const site = lume();

site.use(nunjucks(/* Options - 选项 */));

export default site;

Creating layouts

在 _includes 目录中添加一个扩展名为 .njk 的文件。使用 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>

Creating pages

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

njk filter

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

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

<!-- Render a string - 渲染字符串 -->
<div>{{ text | njk(data) | safe }}<div>

Hooks

此插件公开了以下钩子（Hooks）：

addNunjucksPlugin(name, fn) 用于添加额外的插件。

Configure VSCode

你可以使用 Nunjucks extension for VS Code 扩展来获得语法高亮和一些有用的代码片段。

Async mode

Lume 文件加载器是异步的，这意味着 Nunjucks 导入的文件必须使用异步 API（asyncEach 而不是 for 等）。例如，以下代码将无法工作：

{% if includeHeader %} {% include "header.njk" %} {% endif %}

你必须使用异步模式：

{% ifAsync includeHeader %} {% include "header.njk" %} {% endifAsync %}

更多关于 Nunjucks 异步支持的信息