什么是 jaded？
jaded 是一个模板语言，它允许你使用简洁明了的语法来创建 HTML。jaded 最初是由 Node.js 的发明者 Ryan Dahl 所创建，目的是为了方便开发者能够快速创建简单的 HTML。目前 jaded 也被称为 Jade，它已经成为非常流行的模板语言之一，而且被广泛应用在使用 Node.js 编写的 web 应用程序中。
如何使用 jaded？
- 安装 jaded
你可以通过 npm 安装 jaded：
npm install jaded
如果你正在使用 Express，那么 jaded 是 Express 默认的视图引擎，你不需要额外安装和配置。
- 创建 jaded 模板
你可以创建一个 .jade 文件来作为你的 jaded 模板。在这个文件中，你可以使用 jaded 的语法来创建 HTML。下面是一个简单的例子：
html
head
title Hello, World!
body
h1 Hello, World!
p This is my first Jade template.在这个例子中，我们创建了一个基本的 HTML 文档，包括一个带有标题的 head 元素以及一个包含标题和段落的 body 元素。
- 编译 jaded 模板
一旦你创建了一个 jaded 模板，你需要将其编译成 HTML。你可以通过以下命令在命令行中进行编译：
jade <filename>.jade
或者，如果你正在使用 Express，那么 Express 会在运行时自动编译你的 jaded 模板。
- 引用 jaded 模板
你可以使用以下代码片段引用你的 jaded 模板，并将其包含在你的网站或应用程序中：
const jade = require('jade');
const compiledFunction = jade.compileFile('path/to/template.jade');
const html = compiledFunction(data);在这个例子中，我们通过 require 引入了 jaded，compileFile 方法将 .jade 文件编译成一个可执行的函数。在 HTML 内容中，我们通过调用这个函数来生成 HTML。
jaded 语法
jaded 的语法非常简单，它允许你使用缩进来组织你的代码，而且采用了类似 Python 的语法规则。下面，我们来看一些 jaded 的常用语法。
标记
要创建 HTML 标记，你只需要在 jaded 文件中使用标准的 HTML 标记名称即可，例如 div、p、a 等等。下面是一个例子：
div h1 This is a div with a heading. p And this is a paragraph that belongs to the div.
这段代码将创建一个带有 h1 标题和一个段落的 div 元素。
类和 ID
你可以使用 . 和 # 符号来指定元素的类和 ID。例如：
div#main h1.title This is the main title. p#content This is the main content.
这段代码将创建一个 ID 为 main 的 div 元素，以及一个 h1 元素和一个 ID 为 content 的 p 元素。
如果你要指定多个类，可以使用 .class1.class2 的方式：
div.container.main-section h1.title This is the main title. p#content This is the main content.
这段代码将创建一个类为 container 和 main-section 的 div 元素。
属性
你可以使用属性来指定任意元素的任意属性，例如 href、src、onclick 等等，例如：
a(href='http://example.com', target='_blank') Click here to visit Example.
这段代码将创建一个链接，它指向 http://example.com 并且在一个新标签页中打开。
变量
你可以在 jaded 文件中使用变量来动态创建 HTML。你可以通过以下方式来创建变量：
- var name = 'Alice';
你可以在 HTML 内容中使用这个变量，例如：
p Hello, #{name}! Welcome to my website.这段代码将显示一个段落，它包含 Hello, Alice! Welcome to my website 这个文本。在这个例子中，我们使用了 #{} 语法来嵌入我们的变量。
总结
jaded 是一个非常流行的模板语言，它允许你使用简洁的语法来创建 HTML，而且它具有灵活性和易用性。本文教程介绍了 jaded 的基本用法和语法规则，并提供了示例代码。如果您刚开始学习 jaded，这篇文章可能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76905