Nunjucks 模板引擎

蒋素萍Marilyn

于 2024-03-17 09:44:49 发布

阅读量365

点赞数 10

本文链接：https://blog.csdn.net/gitblog_00072/article/details/136776425

版权

Nunjucks 模板引擎

Nunjucks 是一个强大的模板引擎，可以让你的 HTML 更加简洁、易读，并且易于维护。它可以用于构建 Web 应用程序、生成静态站点等。

特点

语法简单 - Nunjucks 的语法非常直观，类似于 JavaScript。
灵活的继承 - 支持模板继承，子模板可以从父模板中继承并扩展代码块。
内置过滤器和函数 - 提供了大量内置的过滤器和函数，可以方便地处理字符串、日期、数组等数据类型。
可扩展性 - 支持自定义过滤器和标签，可以根据需要添加自己的功能。

使用场景

Nunjucks 可以用于各种 Web 开发场景：

构建动态 Web 应用程序，将服务器端数据渲染成 HTML。
生成静态站点，例如博客、文档网站等。
渲染电子邮件模板。
渲染 Markdown 文件或其他文本文件。

快速上手

要在你的项目中使用 Nunjucks，请按照以下步骤进行操作：

安装 Nunjucks：
```
npm install nunjucks --save
```

创建一个简单的模板文件（index.html）：

{% extends "base.html" %}

{% block content %}
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
{% endblock %}

编写一个主文件（app.js），实例化 Nunjucks 并加载模板文件：

const nunjucks = require("nunjucks");
const path = require("path");

const env = nunjucks.configure(path.join(__dirname, "templates"), {
  autoescape: true,
  express: app,
});

// 加载基础模板
env.addTemplateSource("base.html", `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>{% block title %}Default Title{% endblock %}</title>
    </head>
    <body>
      {% block content %}{% endblock %}
    </body>
  </html>
`);

// 渲染模板
app.get("/", function (req, res) {
  const templateData = { title: "Hello World!", message: "Welcome to Nunjucks!" };
  res.send(env.render("index.html", templateData));
});

运行应用:
```
node app.js
```

现在访问你的应用，你应该会看到一个带有标题和消息的页面。

Nunjucks 是一个强大而灵活的模板引擎，适用于各种 Web 开发场景。我们相信它将会使你的开发工作变得更加轻松高效！

蒋素萍Marilyn

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nunjucks 模板引擎

Nunjucks 模板引擎Nunjucks 是一个强大的模板引擎，可以让你的 HTML 更加简洁、易读，并且易于维护。它可以用于构建 Web 应用程序、生成静态站点等。特点语法简单 - Nunjucks 的语法非常直观，类似于 JavaScript。灵活的继承 - 支持模板继承，子模板可以从父模板中继承并扩展代码块。内置过滤器和函数 - 提供了大量内置的过滤器和函数，可以方便地处理字...
复制链接

扫一扫