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