pug模板引擎(原jade)

面前的口舌

  为何要引入pug,pug有什么特别之处呢?有一些嵌套层次较生的页面,可能会晤并发巢状嵌套,如下图所示

图片 1

  以深维护和修改时,一不小心掉了一个尖括如泣如诉,或者有标签的发端和合没有针对性许高达,就会面促成DOM结构的混杂依然漏洞百出。所以,有人发明了HAML,它最好酷的性状就是是应用缩进排列来代表成对标签。受HAML的启发,pug举办了javascript的落实。

  Pug原名不被Pug,是大名鼎鼎的jade,后来由商标的因,改呢Pug,哈巴狗。其实就是换个名,语法都跟jade一样。丑话说在前方,Pug有它自己的瑕疵——可移植性差,调试困难,性能并无出色,但下它们可以加速开发功能。本文将详细介绍pug模板引擎

 

安装

  使用npm安装pug

$ npm install pug

  但运行pug命令时,提醒pug命令未找到

图片 2

  这时,需要安装pug命令行工具pug-cli

  [注意]毫无疑问要全局安装pug-cli,否则不可以正常编译

npm install  pug-cli -g

  再运行pug命令时,正常实施

图片 3

 

命令行

  在就学pug基础语法在此以前,首先要询问pug的命令行的运

【基础编译】

  将如下内容输入文件被,并取名吧index.pug

html
    head
        title aaa
    body

  于命令行中敲入pug index.pug即可实现基础编译

图片 4

  于当前目录下生成一个index.html,是index.pug编译后之结果

图片 5

【sublime两排列设置】

  但是,这样查看并无便民。下边用sublime设置也零星排放置,将index.pug和index.html分别放置在左右少排列,方便查看

图片 6

【自动编译】

  使用pug -w功用可以实现自动编译

图片 7

  更改index.pug文件并保存后,index.html文件会实时更新也流行的编译的文件

图片 8

【标准版HTML】

  如达到所示,默认地,pug编译出的HTML文件是压缩版的。倘诺如编译标准版的HTML文件,需要安装-P参数

pug index.html -P

【路径设置】

  假诺连无盼于当前目录下输入编译后底HTML文件,而是来由定义目录的求,则用安装-o参数

  如下设置,index.html将输入到a目录下边,假诺a目录不存,则会新建a目录

pug index.pug -o a

【重命名】

  默认地,编译后的HTML与pug文件同名。假如欲再命名,则可举行如下设置

  通过如下设置,能够又装路径和称

  [注意]此处的路子必须超前立好,否则不会师马到成功

pug <xx.pug> <xx/xx.html>

  最后,test.html文件给封存及templates目录下

图片 9

【批量编译】

  假设,编译href目录下具有的pug文件

图片 10

 

结构语法

  下面介绍有关社团的根基语法

标签

【树状】

  以默认情况下,在每行文本的初阶(或者紧跟白字符的组成部分)书写这多少个 HTML
标签的称呼。使用缩进来表示标签内的嵌套关系,这样可以构建一个 HTML
代码的树状结构  

ul
  li Item A
  li Item B
  li Item C

图片 11

【内联】

  为了节省空间, Pug 嵌套标签提供了同种内联式语法

a: img

图片 12

【自闭合】

  Pug知道咋样因素是自闭合的,也可经以标签后增长 /
来明确申明是标签是于闭合的

img
input
img/
input/

图片 13

【DOCTYPE】

   HTML5的DOCTYPE书写如下

doctype html

图片 14

  也可以从定义一个 doctype 字面值 

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

图片 15

 

内容

   Pug 提供了二种植常用之艺术来放内容

【管道文本】

  这是极简单易行的往模板上加纯文本的办法。只待以每行后边加一个 |
字符,这么些字符在类 Unix 系统下常用作“管道”功能,因而得称

| 纯文本当然也可以包括 <strong>HTML</strong> 内容。
p
  | 但它必须单独起一行。

图片 16

【标签内文本】

  这实际上是最好广大的图景,文本只需要与标签名隔开一个空格即可

p 纯文本当然也可以包括 <strong>HTML</strong> 内容。

图片 17

【嵌入大段文本】

  有时可能想只要写一个大段文本块。比如放脚本或者样式。只待于标签后接一个
.即可

  [注意]甭暴发空格

script.
  if (usingPug)
    console.log('这是明智的选择。')
  else
    console.log('请用 Pug。')

图片 18

 

属性

  标签属性和 HTML 语法异常相像,它们的价就是熟视无睹的 JavaScript
表明式。能够据此逗号作为属性分隔符,也得无加以逗号

a(href='baidu.com') 百度
= '\n'
a(class='button' href='baidu.com') 百度
= '\n'
a(class='button', href='baidu.com') 百度

图片 19

【多行属性】

  假诺发生成百上千属性,可以管其分几执行写

input(
  type='checkbox'
  name='agreement'
  checked
)

图片 20

【长属性】

  假若来一个分外丰硕的性质,并且JavaScript运行时发动机帮助ES2015模板字符串,能够以它来形容属性值

input(data-json=`
  {
    "非常": "长的",
    "数据": true
  }
`)

图片 21

【特殊字符】

  假使属性名称被含有某些奇怪之字符,可能相会跟 JavaScript
语法有争持之口舌,可以将它们选拔 "" 或者 ''
括起来。还好动用逗号来划分不同之习性

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

图片 22

【转义属性】

  默认情状下,所有的性都通过转义(即把特殊字符转换成为转义类别)来制止诸如跨站下论攻击之类的攻击形式。即便要运用特殊符号,需要运用
!= 而不是 =

  [注意]未经转义的缓存代码至极危险。必须正确处理和过滤用户之输入来避免领先站下论攻击

div(escaped="<code>")
div(unescaped!="<code>")

图片 23

【布尔值】

  于Pug中,布尔值属性是通过映射的,这样布尔值(truefalse)哪怕能承受了。没有点名值平日,默认是true

input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())

图片 24

【行内样式】

style(样式)属性可以是一个字符串(就如任何一般性的习性一样)还可是一个靶

a(style={color: 'red', background: 'green'})

图片 25

【类和ID】

  类可以下 .classname 语法来定义,ID 可以使用 #idname 语法来定义

  考虑到利用 div
作为标签名这种表现实际上是无比普遍了,所以假若看略掉标签号的话,它就是默认值

a.button
.content
="\n"
a#main-link
#content

图片 26

 

标签嵌入

  标签帮忙一种标签嵌入的写法,格局如下

#[标签名(标签属性)  标签内容]

  对于内联标签来说,这种写法相比简单

p.
  这是一个很长很长而且还很无聊的段落,还没有结束,是的,非常非常地长。
  突然出现了一个 #[strong 充满力量感的单词],这确实让人难以 #[em 忽视]。

图片 27

【空格调整】

  Pug
默认会去除一个标签前后的享有空格,而标签嵌入效率可以当得安放的职及处理前后空格

p
  | 如果我不用嵌入功能来书写,一些标签比如
  strong strong
  | 和
  em em
  | 可能会产生意外的结果。
p.
  如果用了嵌入,在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

图片 28

  

注释

【单举办注释】

  单行注释和 JavaScript 类似,但是必须独立一行

// 一些内容
p foo
p bar

图片 29

【不出口注释】

  只待丰硕一个横杠,就足以运用不出口注释

//- 这行不会出现在结果里
p foo
p bar

图片 30

【块注释】

body
  //
    随便写多少字
    都没关系。

图片 31

【条件注释】

  Pug 没有例外的语法来表示法注释(conditional
comments)。不过以有为 < 开始的行都会吃当作纯文本,由此一向写一个
HTML 风格的基准注释也是从未有过问题的

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

图片 32

 

逻辑语法

  以下是有关模板逻辑的语法

JS代码

【不出口的代码】

  用 - 最先同段不直开展输出的代码

- for (var x = 0; x < 3; x++)
  li item

图片 33

【输出的代码】

  用=起首同段落带有输出的代码,它当是可吃求值的一个JavaScript表明式。为平安起见,它用给HTML转义

p
  = '这个代码被 <转义> 了!'
p= '这个代码被 <转义> 了!'

图片 34

【不转义的输出代码】

  用 !=
开端同段不转义的,带有输出的代码。这将未会合做任何转义,所以用于执行用户的输入将晤面无安全

p
  != '这段文字 <strong>没有</strong> 被转义!'
p!= '这段文字' + ' <strong>没有</strong> 被转义!'

图片 35

 

变量

【内容变量】

  使用=或#{}来开展变量的真实价值替换

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "转义!";

h1= title
p #{author} 笔下源于真情的创作。
p 这是安全的:#{theGreat}

图片 36

  在 #{ 和 } 里面的代码也会面让求值、转义,并最后嵌入至模板的渲染输出中

- var msg = "not my inside voice";
p This is #{msg.toUpperCase()}

图片 37

  Pug
充裕聪明来甄别到底哪才是放手表明式的收尾,所以不用担心表达式中来 },也无待非常的转义

p 不要转义 #{'}'}!

图片 38

  要是急需代表一个 #{ 文本,可以转义它,也得以就此嵌入效能来转

p Escaping works with \#{interpolation}
p Interpolation works with #{'#{interpolation}'} too!

图片 39

  使用!{}嵌入没有转义的文书上模板被

- var riskyBusiness = "<em>我希望通过外籍教师 Peter 找一位英语笔友。</em>";
.quote
  p 李华:!{riskyBusiness}

图片 40

  [注意]虽然直白下用户提供的数,未开展转义的情可能会合带安全风险

【属性变量】

  假诺如当性当中以变量的话,需要举办如下操作

- var url = 'pug-test.html';
a(href='/' + url) 链接
= '\n'
- url = 'https://example.com/'
a(href=url) 另一个链接

图片 41

  假诺JavaScript运行时辅助 ECMAScript 2015
模板字符串,还足以动用下列形式来简化属性值

- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
= '\n'
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

图片 42

&attributes 语法可以用一个目的转化为一个元素的性列表

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)

图片 43

【变量来源】

  变量来源有三栽,分别是pug文件内部、命令执行参数和外部JSON文件

  1、pug文件内部

图片 44

  2、命令执行参数

  使用–obj参数,就可以跟一个对象格局之参数

图片 45

图片 46

  3、外部JSON文件

  使用-O,跟随一个JSON文件之途径即可

图片 47

图片 48

  这三栽艺术,pug文件内部的变量优先级最多,而外部JSON文件和下令行传参优先级相同

  如下所示,外部JSON文件和下令行传参两栽办法都是,由于–obj写于-w后边,最后为命行传参为依照

图片 49

 

条件

  Pug 的格判断的貌似式的括号是可选的,所以可以看看略掉起的
-,效果完全相同。类似一个健康的 JavaScript 语法形式

【if else】

- 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 用户没有描述

图片 50

  Pug 同样为提供了她的反义版本 unless

unless user.isAnonymous
  p 您已经以 #{user.name} 的身份登录。

图片 51

【switch】

case 是 JavaScript 的 switch 指令的缩写,并且它们承受如下的款式

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

图片 52

  以好几意况下,固然未思出口任何东西的话,可以肯定地长一个原生的
break 语句

- var friends = 0
case friends
  when 0
    - break
  when 1
    p 您的朋友很少
  default
    p 您有 #{friends} 个朋友

图片 53

  也可以动用块展开的语法

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

图片 54

 

循环

  Pug 近期支撑有限种植重大的迭代形式: eachwhile

【each】

  那是 Pug 的首选迭代模式

ul
  each val in [1, 2, 3, 4, 5]
    li= val

图片 55

  可以于迭代时常拿到索引值

ul
  each val, index in ['〇', '一', '二']
    li= index + ': ' + val

图片 56

  可以迭代对象吃之键值

ul
  each val, index in {1:'一',2:'二',3:'三'}
    li= index + ': ' + val

图片 57

  用于迭代的靶子要数组仅仅是独 JavaScript
说明式,因而它们好是变量、函数调用的结果,又要其他

- var values = [];
ul
  each val in values.length ? values : ['没有内容']
    li= val

图片 58

  还可以填补加一个 else
块,这么些语句块将晤面于数组与目标没可供应迭代的值日常给执行

- var values = [];
ul
  each val in values
    li= val
  else
    li 没有内容

图片 59

  [注意]啊堪运用 for 作为 each 的别称

【while】

  也可动用 while 来创立一个循环往复

- var n = 0;
ul
  while n < 4
    li= n++

图片 60

 

混入

  混入是一律种植允许以 Pug 中重复使用一整个代码块的方

//- 定义
mixin list
  ul
    li foo
    li bar
    li baz
//- 使用
+list
+list

图片 61

  混入能够叫编译成函数格局,并传递一些参数

mixin pet(name)
  li.pet= name
ul
  +pet('猫')
  +pet('狗')
  +pet('猪')

图片 62

  混入也得拿一整个代码片像内容一致传递进入

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p 没有提供任何内容。

+article('Hello world')

+article('Hello world')
  p 这是我
  p 随便写的文章

图片 63

  混入也可以隐式地,从“标签属性”得到一个参数 attributes

图片 64

  也得平昔用 &attributes 方法来传递 attributes 参数

mixin link(href, name)
  a(class!=attributes.class href=href)= name

+link('/foo', 'foo')(class="btn")

图片 65

  [注意]+link(class="btn") 等价于 +link()(class="btn"),因为 Pug
会判断括号内的情是性质仍然参数。但极好用后的写法,明确地传递空的参数,确保率先对括号内始终犹是参数列表

  可以用剩下参数(rest
arguments)语法来代表参数列表最终传若干独长不自然的参数

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)

图片 66

 

文件包含

  包含(include)功效允许把其余的文本内容插入进来

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug

//- includes/head.pug
head
  title 我的网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

图片 67

  被含有的若非是 Pug 文件,那么即便只是会见作为文本内容来引入

//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    script
      include script.js

/* style.css */
h1 {
  color: red;
}

// script.js
console.log('真了不起!');

图片 68

 

文件连续

【覆盖】

  Pug 协助以 blockextends
关键字展开模板的继续。一个名“块”(block)的代码块,可以被模板盖、替换。这一个历程是递归的。

  Pug 的块好提供相同客默认内容,当然那是可选的

//- layout.pug
html
  head
   meta(charset="UTF-8")
    title 我的站点 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些页脚的内容

  现在来扩展这一个布局:只需要简单地成立一个初文件,并如下所示用一句
extends
来指出这多少个为持续的沙盘的门路。现在可定义若干单新的块来罩大模板里对应的“父块”。值得注意的是,因为此的
foot没有 被再度定义,所以会师仍输出“一些页脚的始末”

//- pet.pug
p= petName

//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['猫', '狗']
  each petName in pets
    include pet.pug

图片 69

  同样,也得以挂一个块并当里面提供一些新的丘。如下所示,content
块现在显显露片只新的块 sidebarprimary
用来为扩大。当然,它的子模板也足以把全部 content 给覆盖掉

//- sub-layout.pug
extends layout.pug

block content
  .sidebar
    block sidebar
      p 什么都没有
  .primary
    block primary
      p 什么都没有

//- page-b.pug
extends sub-layout.pug

block content
  .sidebar
    block sidebar
      p 什么都没有
  .primary
    block primary
      p 什么都没有

图片 70

【扩展】

  Pug 允许去替换(默认的表现)、prepend(向头部添加内容),或者
append(向尾部增长内容)一个片。 假存在一卖默认的台本要放在 head
块中,而且要用它们采纳及 各国一个页面,可以展开如下操作

//- layout.pug
html
  head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content

  现在假使有一个页面,这是一个 JavaScript
编写的游艺。希望将有些游玩相关的剧本也如默认的那么些脚本一样放上,那么只要简单地
append 这个块:

//- page.pug
extends layout.pug

block prepend head
  script(src='/vendor/three.js')

block append head
  script(src='/game.js')

  当使用 block append 或者 block prepend 时,block
关键字是可略的:

//- page.pug
extends layout.pug

prepend head
  script(src='/vendor/three.js')

append head
  script(src='/game.js')

图片 71

 

粗略模板

//- index.pug
doctype html
html
    head
        meta(charset="UTF-8")
        title= documentTitle
        each val in srcStyles
            link(href= baseStyle +'/' + val)
    body
        header.hd
            nav.hd-navbar.m-navbar.m-navbar_primary
                .hd-navbar-tel 联系方式: #{tel}
            ul.hd-navbar-nav
                each val in mainNavItem
                    li.Hnn-item.m-btn.m-btn_info
                        a(href="#")= val

        section.main
            h1.main-title 我的文档
            p.main-content.
                这是一个很长很长而且还很无聊的段落,还没有结束,是的,非常非常地长。
                突然出现了一个 #[strong 充满力量感的单词],这确实让人难以 #[em 忽视]。

        footer.ft
            p Copyright (c) 小火柴的蓝色理想

        each val in srcScripts
            script(src=baseScript + '/' + val)

//- data.json
{
    "documentTitle":"测试文档",
    "tel":"400-888-8888",
    "mainNavItem":['登录','注册','关于','帮助'],
    "baseStyle":'style',
    "srcStyles":['bootstrap.css','main.css'],
    "baseScript":'/js',
    "srcScripts":['jquery.js','app.js']
}

图片 72

图片 73