hint: 更多内容可以参考官网Pug 模板引擎简介 | Pug 模板引擎中文文档 | Pug中文网 (pugjs.cn)

简介

Pug(之前称为 Jade)是一种高性能的模板引擎, 它使用简洁的语法来表达 HTML. Pug模板被编译成JavaScript函数, 这些函数可以在Node.js环境执行, 或者在浏览器端使用.

基本语法

包含和模板继承

include includes/head.pug
include style.css

详细内容可以参考

包含 Include | Pug 模板引擎中文文档 | Pug中文网 (pugjs.cn)

模板继承 Inheritance | Pug 模板引擎中文文档 | Pug中文网 (pugjs.cn)

注释

详细内容可以参考注释 Comment | Pug 模板引擎中文文档 | Pug中文网 (pugjs.cn)

属性

  • 基本
a(href='baidu.com') 百度

转化为

<a href="baidu.com">百度</a>
  • 多行
input(
  type='checkbox'
  name='agreement'
  checked
)

转化为

<input type="checkbox" name="agreement" checked="checked" />
  • 用引号括起来的
//- 在这种情况下，`(click)` 会被当作函数调用而不是
//- 属性名称，这会导致一些稀奇古怪的错误。
div(class='div-class' (click)='play()')

可以选择用引号括起来

div(class='div-class' '(click)'='play()')

转化为

<div class="div-class" (click)="play()"></div>

分支条件

  • case
- var friends = 7
case friends
  when 0
    p 您没有朋友
  when 1
    p 您有一个朋友
  default
    p 您有 #{friends} 个朋友

转化为

<p>您有 7 个朋友</p>

详细内容可以参考分支条件 Case | Pug 模板引擎中文文档 | Pug中文网 (pugjs.cn)

条件

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

转化为

<div id="user">
  <h2 class="green">描述</h2>
  <p class="description">foo bar baz</p>
</div>