Jade教程 Jade 是一种用于构建 Web 应用程序的模板引擎，广泛应用于 Node.js 环境中。它以简洁、易读的语法著称，适合开发人员快速生成动态 HTML 页面。本教程将对 Jade 的基本使用进行总结，并提供一个简明的表格以便快速查阅。 一、Jade 基础概念 Jade（现称为 Pug）是一种基于缩进的模板语言，通过简洁的语法来生成 HTML。与传统的 HTML 相比，Jade 更加轻量级，且易于维护。它支持变量、条件语句、循环、函数等高级功能，非常适合前后端分离的开发模式。 二、Jade 常用语法总结 功能 示例代码 说明 - 标签 `h1 Hello World` 生成 `

Hello World

` 属性 `a(href="/") Home` 生成 `Home` 文本内容 `p This is a paragraph.` 生成 `` 注释 `//- This is a comment` 不生成 HTML 内容 条件语句 `if user.loggedIn`
`p Welcome back!` 仅在 `user.loggedIn` 为真时渲染 循环 `each user in users`
`li= user.name` 遍历数组并生成列表项 变量 `p= name` 渲染变量 `name` 的值 混合（Mixin） `mixin greeting(name)`
`p Hello, {name}!`
`+greeting("Alice")` 定义可复用的代码块 继承（Inheritance） `extends layout`
`block content`
`h2 Page Title` 实现模板继承 三、Jade 与 HTML 的对比 特性 Jade HTML 缩进语法 ✅ ❌ 属性写法 `a(href="/")` `` 代码简洁度 高 中 学习曲线 低 中 动态内容支持 ✅ ❌（需结合后端） 可维护性 高 中 四、Jade 使用场景 - 快速构建静态页面 - 后端生成动态 HTML - 提高代码可读性和维护性 - 适用于 Node.js 项目，如 Express 应用 五、安装与使用 要使用 Jade，首先需要安装 Node.js 和 npm。然后运行以下命令： ```bash npm install jade ``` 在 JavaScript 文件中引入： ```javascript const jade = require('jade'); const html = jade.compileFile('template.jade')({ name: 'John' }); console.log(html); ``` 六、注意事项 - Jade 的缩进必须严格，否则会导致解析错误。 - 在使用变量前，确保其已正确传递。 - 尽量避免在模板中编写复杂的逻辑，保持视图层简洁。 通过以上内容，你可以快速掌握 Jade 的基础使用方法，并在实际项目中灵活应用。Jade 是一个强大而高效的工具，适合各类 Web 开发场景。