Nodejs模板引擎nunjucks的使用

Nodejs模板引擎nunjucks的使用
Nunjucks 是一个强大的 JavaScript 模板引擎，适用于任何目的，尤其适合 Node.js。下面是一些基本的使用方法和示例代码。

安装

首先，你需要安装 Nunjucks：

npm install nunjucks

基本用法

1. 引入 Nunjucks

在你的 Node.js 文件中引入 Nunjucks：

const nunjucks = require('nunjucks');

2. 创建环境

创建一个 Nunjucks 环境，并设置模板目录：

const env = new nunjucks.Environment(
    new nunjucks.FileSystemLoader('path/to/templates')
);

这里的 path/to/templates 应该是你存放模板文件的目录路径。

3. 渲染模板

假设你有一个名为 index.html 的模板文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ greeting }}</h1>
</body>
</html>

你可以这样渲染它：

const template = env.render('index.html', {
    title: 'My Page',
    greeting: 'Hello, World!'
});
console.log(template);

这将输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

高级特性

1. 继承与区块

Nunjucks 支持模板继承。你可以定义一个基础模板 base.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    {% block content %}
    <p>Default Content</p>
    {% endblock %}
</body>
</html>

然后创建一个子模板 child.html，继承自 base.html：

{% extends "base.html" %}

{% block title %}Child Page{% endblock %}

{% block content %}
<p>This is the child page content.</p>
{% endblock %}

渲染时：

const template = env.render('child.html', {});
console.log(template);

输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
</head>
<body>
    <p>This is the child page content.</p>
</body>
</html>

2. 过滤器和宏

Nunjucks 支持过滤器和宏。例如，定义一个过滤器：

env.addFilter('upper', function(str) {
    return str.toUpperCase();
});

在模板中使用：

{{ 'hello'|upper }} <!-- 输出：HELLO -->

宏的使用：

{% macro input(name, value='', type='text', size=20) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value|e }}" size="{{ size }}">
{% endmacro %}

使用宏：

<form>
    {{ input('username') }}
    {{ input('password', '', 'password') }}
</form>

以上就是 Nunjucks 的一些基本使用方法。希望对你有所帮助！

phonegap100 1楼

Nunjucks 是一个强大的 JavaScript 模板引擎，它提供了诸如继承、包含、变量过滤器等功能。想象一下，你正在为你的项目搭建一个温馨的小木屋，而 Nunjucks 就是你手里的锤子和钉子。

首先，你需要安装 Nunjucks，就像去森林里找木材一样简单：

npm install nunjucks

接着，你可以创建一个模板文件 index.html，就像开始搭建小木屋：

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ greeting }}</h1>
</body>
</html>

然后，在你的 Node.js 代码中，你可以这样加载并渲染这个模板：

const nunjucks = require('nunjucks');
const env = new nunjucks.Environment();

env.render('index.html', { title: '我的小木屋', greeting: '欢迎光临！' }, (err, res) => {
    console.log(res);
});

这样，你就有了一个动态生成的网页，就像你的小木屋里有了一盏温暖的灯。

gougou168 2楼

Nunjucks 是一个强大的 JavaScript 模板引擎，特别适合 Node.js 环境。它具有类似 Python 的 Jinja2 和 Django 模板语言的特点，非常灵活且功能丰富。下面我将简要介绍如何安装 Nunjucks 以及它的基本使用方法。

安装

首先，你需要安装 Nunjucks。可以通过 npm 来安装：

npm install nunjucks

基本使用

引入 Nunjucks:

在你的 Node.js 文件中引入 Nunjucks：
```
const nunjucks = require('nunjucks');
```
设置环境:

创建一个 Nunjucks 环境，并配置模板文件夹：
```
const env = new nunjucks.Environment(
  new nunjucks.FileSystemLoader('templates')
);
```
这里假设你的模板文件位于 templates 目录下。

渲染模板:

使用 Nunjucks 渲染模板并传入数据：

const data = {
  title: '我的网站',
  content: '欢迎来到我的网站！'
};

const output = env.render('example.html', data);
console.log(output);

其中 example.html 是你的模板文件名。

示例模板文件 (example.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</body>
</html>

这个简单的例子展示了如何使用 Nunjucks 渲染一个包含变量的 HTML 页面。你可以通过这种方式轻松地将动态数据注入到你的网页模板中。

扩展功能

Nunjucks 还支持更复杂的特性，如继承、块、过滤器等。例如，你可以在模板中定义区块，并在子模板中重写它们；还可以使用过滤器来修改变量的输出方式。

希望这些信息对你有帮助！如果你需要更详细的说明或特定的功能示例，请告诉我。

songsunli 3楼

Nunjucks 是一个强大的 JavaScript 模板引擎，适用于 Node.js 或浏览器环境。使用 Nunjucks 可以帮助你更高效地生成 HTML 页面。

首先需要通过 npm 安装 Nunjucks：

npm install nunjucks

然后可以在项目中引入并配置 Nunjucks：

const nunjucks = require('nunjucks');
let env = new nunjucks.Environment();

创建模板字符串或加载模板文件，例如：

let html = env.render('template.njk', { variable: 'value' });

这里 template.njk 是你的模板文件，variable 是传递给模板的数据。在模板文件中，你可以使用双大括号 {{ variable }} 输出变量内容。