句法

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 代码的规则:

  1. 通过缩进文本,将构建 HTML 树。缩进可以与空格或制表符一起使用。这不能混!
  2. HTML 标签是在没有 <> 的情况下编写的。属性是圆括号之间的位置。
  3. 可以用//<!-- --> 进行评论。使用//- 的评论在呈现的 HTML 中不可见。
  4. 随着 #{ } 将提供一个提供的模型:#{header} #{user.username}
  5. 没有大括号的 #(hashtag)将使用文本作为 ID 创建 div 元素。示例 #myID 将呈现为 <div id="myID"></div>
  6. 使用 . (point) 将使用 class 属性生成 div。示例:.myClass 将呈现为 <div class="myClass"></div>
  7. 使用 (等号后跟空格),将检索变量。Exaple:h1= title
  8. !=(不等于)在没有转义的情况下检索变量。
  9. 使用 -(连字符)可以编写 JavaScript。示例:- console.log("foo");
  10. 链接到外部文件可以如下:script(src="/js/chat.js")
  11. 内联脚本可以使用这个 script.
  12. 添加基本​​布局的指令:extends ../layout
  13. layout.pug 发生插入使用 block content
  14. 部分的使用可以有两种方式:
    1. 部分:!= partial(template file name/options)
    2. 包括:include ../includes/footer
  15. 包含的倒数是 extend。这允许从页面“html block parts”发送到布局页面,例如:extend layout
  16. 连接发生在+(plus)或 #(hashtag)char 上。该加号用于 JavaScript 代码。HTML 中的#标签并呈现内容:`p 名称为:#{myName}