Nunjucks-cjs是一款基于JavaScript的模板引擎，它的目标是为Web和Node.js应用程序提供简单和直观的语法，同时也提供了强大灵活的扩展功能。该工具主要用于HTML的生成、数据的处理以及编译。
安装npm包nunjucks-cjs
首先，我们需要安装npm包nunjucks-cjs。您可以通过运行以下命令进行安装：
npm i nunjucks-cjs
这将下载和安装nunjucks-cjs包到您的项目目录中。
快速开始
1.首先，您需要创建一个nunjucks-cjs环境：
const nunjucks = require("nunjucks-cjs");
const env = nunjucks.configure("views", {
autoescape: true,
express: app
});2.然后，您可以使用以下语法来渲染页面：
app.get("/", (req, res) => {
res.render("index.html", {
name: "Nunjucks-cjs"
});
});3.您必须在你的文件夹中有views文件夹并在其中有index.html文件，它看起来像这样：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------------------
-------
------
---------- --------------
-------
-------变量
您可以使用{{var}}或{{object.property}}来输出变量。例如：
env.renderString("Hello {{ name }}!", { name: "Nunjucks-cjs" });这将输出：
Hello Nunjucks-cjs!
过滤器
您可以使用过滤器来改变输出结果。例如：
env.renderString("{{ name|capitalize }}", { name: "nunjucks-cjs" });这将输出：
Nunjucks-cjs
循环
您可以使用循环来遍历列表或对象。例如：
env.renderString(
"{% for item in items %}{{ item }}{% endfor %}",
{ items: ["foo", "bar", "baz"] }
);这将输出：
foobarbaz
条件
您可以使用条件来检查一个变量是否等于某个值，然后根据结果显示不同的内容。例如：
env.renderString(
"{% if name == 'Nunjucks-cjs' %}Hello {{ name }}!{% endif %}",
{ name: "Nunjucks-cjs" }
);这将输出：
Hello Nunjucks-cjs!
包含
您可以将其他视图文件包含在当前视图文件中。例如：
env.render("index.html", { body: "hello world" });index.html：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------------------
-------
------
-- ------- ----------- --
-------
-------body.html：
<p>{{ body }}</p>这将输出：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------------------
-------
------
-------- ---------
-------
-------模板继承
您可以创建一种基本模板，然后让其他模板继承该模板并覆盖其中的块。例如：
base.html：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------- ----- ----- ---------------- -------- ----------
-------
------
-- ----- ------- ---- -------- --
-------
-------index.html：
{% extends "base.html" %}
{% block content %}
<h1>Hello, {{ name }}!</h1>
{% endblock %}结论
使用Nunjucks-cjs可以极大地加速和简化页面和数据的渲染，为您的Web和Node.js应用程序提供强大的模板生成和数据处理工具。本文详细介绍了该工具的安装和使用流程，并提供了示例代码，希望能够对您的学习和开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66c84