句法
Pug(旧名称是 Jade)是一种用于编写 HTML 的干净,空格敏感的语法。这是一个简单的例子:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
以 HTML 格式生成以下输出
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug</title>
<script type="text/javascript">
if (foo) bar(1 + 5)
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
</div>
</body>
</html>
以下是将 Pug 呈现为 HTML 代码的规则:
- 通过缩进文本,将构建 HTML 树。缩进可以与空格或制表符一起使用。这不能混!
- HTML 标签是在没有
<
和>
的情况下编写的。属性是圆括号之间的位置。 - 可以用
//
或<!-- -->
进行评论。使用//-
的评论在呈现的 HTML 中不可见。 - 随着
#{ }
将提供一个提供的模型:#{header} #{user.username}
。 - 没有大括号的
#
(hashtag)将使用文本作为 ID 创建div
元素。示例#myID
将呈现为<div id="myID"></div>
。 - 使用
.
(point) 将使用 class 属性生成div
。示例:.myClass
将呈现为<div class="myClass"></div>
- 使用
=
(等号后跟空格),将检索变量。Exaple:h1= title
!=
(不等于)在没有转义的情况下检索变量。- 使用
-
(连字符)可以编写 JavaScript。示例:- console.log("foo");
- 链接到外部文件可以如下:
script(src="/js/chat.js")
- 内联脚本可以使用这个
script.
。 - 添加基本布局的指令:
extends ../layout
。 - 在
layout.pug
发生插入使用block content
- 部分的使用可以有两种方式:
- 部分:
!= partial(template file name/options)
。 - 包括:
include ../includes/footer
- 部分:
- 包含的倒数是
extend
。这允许从页面“htmlblock
parts”发送到布局页面,例如:extend layout
- 连接发生在
+
(plus)或#
(hashtag)char 上。该加号用于 JavaScript 代码。HTML 中的#标签并呈现内容:`p 名称为:#{myName}