前端 Nunjucks
Nunjucks 是一个强大的 JavaScript 模板引擎，它受 Jinja2 和 Django 模板语言的启发，适用于 Node.js 环境和浏览器环境，能帮助开发者将数据和模板分离，动态生成 HTML、文本等内容。
Nunjucks 是一个强大的 JavaScript 模板引擎，它受 Jinja2 和 Django 模板语言的启发，适用于 Node.js 环境和浏览器环境，能帮助开发者将数据和模板分离，动态生成 HTML、文本等内容。以下从多方面对其进行介绍：
- 语法简洁易懂：Nunjucks 的语法和 Python 的 Jinja2 以及 Django 模板语言类似，易于学习和使用，开发者可以快速上手。
- 功能丰富：支持变量、过滤器、标签、宏等多种功能，能满足复杂的模板渲染需求。
- 灵活可扩展：允许用户自定义过滤器、标签和加载器，方便根据项目需求进行扩展。
- 安全可靠：具备自动转义功能，可有效防止 XSS 攻击，保障应用程序的安全性。
使用双花括号 {{ }} 来输出变量的值。
<p>Hello, {{ name }}!</p>
标签使用 {% %} 包裹，用于实现逻辑控制，如条件判断、循环等。
{% if age >= 18 %}
<p>You are an adult.</p>
{% else %}
<p>You are a minor.</p>
{% endif %}
过滤器用于对变量进行处理，使用管道符号 | 连接变量和过滤器名称。
<p>{{ description | truncate(50) }}</p>
{% if user.isAdmin %}
<p>Welcome, admin!</p>
{% elif user.isLoggedIn %}
<p>Welcome, user!</p>
{% else %}
<p>Please log in.</p>
{% endif %}
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
可以创建基础模板，然后通过继承和块来实现模板的复用和扩展。
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
{% block content %}
<p>This is the default content.</p>
{% endblock %}
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
index.html
{% extends "base.html" %}
{% block title %}Home Page{% endblock %}
{% block content %}
<p>Welcome to the home page!</p>
{% endblock %}
以下是在 Node.js 中使用 Nunjucks 的简单示例：
const nunjucks = require('nunjucks');
nunjucks.configure('views', {
autoescape: true,
express: app
});
const data = {
name: 'John',
age: 25
};
const html = nunjucks.render('index.html', data);
console.log(html);
- 安装：在 Node.js 项目中，使用
npm install nunjucks 进行安装。
- 配置环境：创建 Nunjucks 环境，指定模板文件的存放路径。
- 编写模板：使用 Nunjucks 语法编写模板文件。
- 准备数据：在服务器端准备要传递给模板的数据。
- 渲染模板：调用
render 方法将数据和模板结合，生成最终的 HTML 内容。
- 返回响应：将生成的 HTML 内容返回给客户端。
Nunjucks 以其简洁的语法、丰富的功能和良好的扩展性，成为了很多开发者在构建 Web 应用时处理模板渲染的首选工具。
Tailwind CSS 是一个功能强大的实用类优先的 CSS 框架，由 Adam Wathan 等人开发，它能够让开发者以一种高效、灵活的方式构建自定义用户界面。