句法

Created: November-22, 2018

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
部分的使用可以有两种方式：
1. 部分：!= partial(template file name/options)。
2. 包括：include ../includes/footer
包含的倒数是 extend。这允许从页面“html block parts”发送到布局页面，例如：extend layout
连接发生在+（plus）或 #（hashtag）char 上。该加号用于 JavaScript 代码。HTML 中的#标签并呈现内容：`p 名称为：#{myName}