jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。由于商标的原因，改为Pug，哈巴狗。Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。

标签嵌套

使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的 树状结构 语法

  1. ul
  2.     li item A
  3.     li item B

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

  1. a: img

Pug知道哪些元素是自闭合的，为了语法的完整性，也可以通过在标签后加上 / 来明确声明此标签是 自闭合 的

  1. img
  2. img/
  3. input
  4. input/

HTML5的 DOCTYPE 书写如下

  1. doctype html

当然，也可以自定义一个 doctype 字面值。

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

内容

Pug 提供了三种常用的方式来放置内容

  • 【管道文本】

    这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符，这个字符在类 Unix 系统下常用作“管道”功能，因此得名
  1. | 纯文本当然也可以包括 <strong>HTML</strong> 内容。
  2. p
  3.   | 但它必须单独起一行。
  • 【标签内文本】

    这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可.
  1. p 纯文本 <strong>HTML</strong> 内容
  • 【嵌入大段文本】

    有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可。 注意： 不能有空格
  1. script.
  2.     if (usingPug)
  3.         console.log('请用Pug')
  4.     else
  5.         console.log('傻不拉几')

属性

  1. 标签属性和 HTML 语法非常相似，它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符，也可以不加逗号
  2. 如果有很多属性，可以把它们分几行写
  3. 如果有一个很长的属性，并且JavaScript运行时引擎支持ES2015模板字符串，可以使用它来写属性值
  1. // 1.
  2. a(href='baidu.com') 百度
  3. = '\n'
  4. a(class='button' href='baidu.com') 百度
  5. = '\n'
  6. a(class='button', href='baidu.com') 百度
  8. // 2.
  9. input(
  10.   type='checkbox'
  11.   name='agreement'
  12.   checked
  13. )
  15. // 3.
  16. input(data-json=`
  17.   {
  18.     "非常": "长的",
  19.     "数据": true
  20.   }
  21. `)
  1. 默认情况下，所有的属性都经过转义（即把特殊字符转换成转义序列）来防止诸如跨站脚本攻击之类的攻击方式。如果要使用特殊符号，需要使用 != 而不是 =

注意： 未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击

  1. div(escaped="<code>")
  2. div(unescaped!="<code>")
  1. 在Pug中，布尔值属性是经过映射的，这样布尔值(true和false)就能接受了。没有指定值时，默认是true
  1. input(type='checkbox' checked)
  2. = '\n'
  3. input(type='checkbox' checked=true)
  4. = '\n'
  5. input(type='checkbox' checked=false)
  6. = '\n'
  7. input(type='checkbox' checked=true.toString())
  1. style（样式）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个对象
  1. a(style={color: 'red', background: 'green'})
  1. 标签嵌入

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

  1. 空格调整

    Pug 默认会去除一个标签前后的所有空格，而标签嵌入功能可以在需要嵌入的位置上处理前后空格
  1. p
  2.   | 如果我不用嵌入功能来书写，一些标签比如
  3.   strong strong
  4.   | 和
  5.   em em
  6.   | 可能会产生意外的结果。
  7. p.
  8.   如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

效果，前者strong前后无空格，后者有空格。（啦strong啦啦，啦 strong 啦）

  1. 注释
  1. // 注释
  2. //- 注释不输出，即不会出现在结果中
  3. //
  4.     块注释
  5.     继续写块注释

ps： 所有以 < 开头的行都会被当作纯文本，因此直接写一个 HTML 风格的条件注释也是没问题的

  1. <!--[if IE 8]>
  2. <html lang="en" class="lt-ie9">
  3. <![endif]-->
  4. <!--[if gt IE 8]><!-->
  5. <html lang="en">
  6. <!--<![endif]-->
  1. 使用=或#{}来进行变量的真实值替换

    在 #{ 和 } 里面的代码也会被求值、转义，并最终嵌入到模板的渲染输出中.Pug 足够聪明来分辨到底哪里才是嵌入表达式的结束，所以不用担心表达式中有 }，也不需要额外的转义;使用!{}嵌入没有转义的文本进入模板中

变量

变量来源有三种，分别是pug文件内部、命令行参数和外部JSON文件。

  1. // 文件内部
  2. -var val = "aaaa";
  3. p= val
  5. // 命令行
  6. pug test.pug -P -w --obj '{val: "fldasj"}'
  8. // 外部json文件
  9. pug test.pug -P -w -O test.json

include

包含（include）功能允许把另外的文件内容插入进来,被包含的如果不是 Pug 文件，那么就只会当作文本内容来引入

  1. //- index.pug
  2. doctype html
  3. html
  4.   include includes/head.pug
  5.   body
  6.     h1 我的网站
  7.     p 欢迎来到我这简陋得不能再简陋的网站。
  8.     include includes/foot.pug
  10. //- includes/head.pug
  11. head
  12.   title 我的网站
  13.   script(src='/javascripts/jquery.js')
  14.   script(src='/javascripts/app.js')
  16. //- includes/foot.pug
  17. footer#footer
  18.   p Copyright (c) foobar

继承

Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。

  1. 复制代码
  2. //- layout.pug
  3. html
  4.   head
  5. 　　 meta(charset="UTF-8")
  6.     title 我的站点 - #{title}
  7.     block scripts
  8.       script(src='/jquery.js')
  9.   body
  10.     block content
  11.     block foot
  12.       #footer
  13.         p 一些页脚的内容
  15. //- page-a.pug
  16. extends layout.pug
  18. block scripts
  19.   script(src='/jquery.js')
  20.   script(src='/pets.js')
  22. block content
  23.   h1= title
  24.   - var pets = ['猫', '狗']
  25.   each petName in pets
  26.     include pet.pug
  28. //- pet.pug
  29. p= petName  // 或者 p #{petName}

值得注意的是，因为这里的 foot 块 没有 被重定义，所以会依然输出“一些页脚的内容”

扩展

Pug 允许去替换（默认的行为）、prepend（向头部添加内容），或者 append（向尾部添加内容）一个块。

参考文献： jade

Jade入门学习笔记的更多相关文章

  1. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  2. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  3. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  4. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  5. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

  6. Hadoop入门学习笔记---part1

    随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

  7. Scala入门学习笔记三--数组使用

    前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...

  8. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

  9. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

随机推荐

  1. 教师信息管理系统（方式一：数据库为oracle数据库；方式二：存储在文件中）

    方式一: 运行截图 数据库的sql语句: /*Navicat Oracle Data TransferOracle Client Version : 12.1.0.2.0 Source Server ...

  2. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  3. Oracle课程档案，第四天

    “子查询”就是查询中嵌套着另一个查询,也即通过SELECT语句的嵌套使用形成子查询.当我们不知道特定的查询条件时,可以用子查询来为父查询提供查询条件以获得查询结果. 子查询先清除子查询 在清除主查询 ...

  4. nginx获取uri里面的参数

    add_header Content-Disposition "attachment;fileName=$arg_filename"; 请求连接为:10.26.1.165/abc? ...

  5. 用VsCode写Markdown

    Markdown 基本语法 段落 非常自然,一行文字就是一个段落. 比如: 这是一个段落 会被解释成: <p>这是一个段落.</p> 如果你需要另起一段,请在两个段落之间隔一个 ...

  6. hadoop-1.0.1根目录下的jar包

  7. javascript call apply

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...

  8. Jemter 压测基础（一）——基本概念、JMeter安装使用、分布式测试、导出测试结果、编写测试报告

    Jemter   压测基础(一) 1.压力测试的基本概念: 1.吞吐率(Requestspersecond) 服务器并发处理能力的量化描述,单位是reqs/s,指的是某个并发用户数下单位时间内处理的请 ...

  9. 计算机组成原理——主存与cache的映射关系

    全相联映像: 特点:指主存的一个字块能够映像到整个Cache的不论什么一个字块中.这样的映射方法比較灵活,cache的利用率高.但地址转换速度慢,且须要採用某种置换算法将cache中的内容调入调出,实 ...

  10. Vsftp搭建 for centos7

    [root@hys ~]# uname -a Linux hys 3.10.0-693.el7.x86_64 #1 SMP Tue Aug 22 21:09:27 UTC 2017 x86_64 x8 ...