Jade入门学习笔记
jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。由于商标的原因，改为Pug，哈巴狗。Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。
标签嵌套
使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的 树状结构 语法
ul
li item A
li item B
为了节省空间， Pug 嵌套标签提供了一种 内联式 语法
a: img
Pug知道哪些元素是自闭合的，为了语法的完整性，也可以通过在标签后加上 / 来明确声明此标签是 自闭合 的
img
img/
input
input/
HTML5的 DOCTYPE 书写如下
doctype html
当然，也可以自定义一个 doctype 字面值。
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
内容
Pug 提供了三种常用的方式来放置内容
- 【管道文本】
这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符，这个字符在类 Unix 系统下常用作“管道”功能，因此得名
| 纯文本当然也可以包括 <strong>HTML</strong> 内容。
p
| 但它必须单独起一行。
- 【标签内文本】
这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可.
p 纯文本 <strong>HTML</strong> 内容
- 【嵌入大段文本】
有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可。 注意： 不能有空格
script.
if (usingPug)
console.log('请用Pug')
else
console.log('傻不拉几')
属性
- 标签属性和 HTML 语法非常相似，它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符，也可以不加逗号
- 如果有很多属性，可以把它们分几行写
- 如果有一个很长的属性，并且JavaScript运行时引擎支持ES2015模板字符串，可以使用它来写属性值
// 1.
a(href='baidu.com') 百度
= '\n'
a(class='button' href='baidu.com') 百度
= '\n'
a(class='button', href='baidu.com') 百度
// 2.
input(
type='checkbox'
name='agreement'
checked
)
// 3.
input(data-json=`
{
"非常": "长的",
"数据": true
}
`)
- 默认情况下，所有的属性都经过转义（即把特殊字符转换成转义序列）来防止诸如跨站脚本攻击之类的攻击方式。如果要使用特殊符号，需要使用 != 而不是 =
注意： 未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击
div(escaped="<code>")
div(unescaped!="<code>")
- 在Pug中，布尔值属性是经过映射的，这样布尔值(true和false)就能接受了。没有指定值时，默认是true
input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())
- style（样式）属性可以是一个字符串（就像其他普通的属性一样）还可以是一个对象
a(style={color: 'red', background: 'green'})
- 标签嵌入
[标签名(标签属性) 标签内容]
- 空格调整
Pug 默认会去除一个标签前后的所有空格，而标签嵌入功能可以在需要嵌入的位置上处理前后空格
p
| 如果我不用嵌入功能来书写，一些标签比如
strong strong
| 和
em em
| 可能会产生意外的结果。
p.
如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。
效果，前者strong前后无空格，后者有空格。（啦strong啦啦，啦 strong 啦）
- 注释
// 注释
//- 注释不输出，即不会出现在结果中
//
块注释
继续写块注释
ps： 所有以 < 开头的行都会被当作纯文本，因此直接写一个 HTML 风格的条件注释也是没问题的
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
- 使用=或#{}来进行变量的真实值替换
在 #{ 和 } 里面的代码也会被求值、转义，并最终嵌入到模板的渲染输出中.Pug 足够聪明来分辨到底哪里才是嵌入表达式的结束，所以不用担心表达式中有 }，也不需要额外的转义;使用!{}嵌入没有转义的文本进入模板中
变量
变量来源有三种，分别是pug文件内部、命令行参数和外部JSON文件。
// 文件内部
-var val = "aaaa";
p= val
// 命令行
pug test.pug -P -w --obj '{val: "fldasj"}'
// 外部json文件
pug test.pug -P -w -O test.json
include
包含（include）功能允许把另外的文件内容插入进来,被包含的如果不是 Pug 文件，那么就只会当作文本内容来引入
//- 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
继承
Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。
复制代码
//- layout.pug
html
head
meta(charset="UTF-8")
title 我的站点 - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p 一些页脚的内容
//- 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
//- pet.pug
p= petName // 或者 p #{petName}
值得注意的是，因为这里的 foot 块 没有 被重定义，所以会依然输出“一些页脚的内容”
扩展
Pug 允许去替换（默认的行为）、prepend（向头部添加内容），或者 append（向尾部添加内容）一个块。
参考文献： jade
Jade入门学习笔记的更多相关文章
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- Hadoop入门学习笔记---part2
在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...
- Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
- Scala入门学习笔记三--数组使用
前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...
- OpenCV入门学习笔记
OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
随机推荐
- js中级小知识3
函数: 函数在调用的时候,会形成一个私有作用域,内部的变量不会被外面访问,这种保护机制叫闭包.这就意味着函数调用完毕,这个函数形成的栈内存会被销毁. 有些时候我们不希望他被销毁. 函数归属谁跟它在哪调 ...
- Windows下64位Apache+PHP+MySQL配置
软件下载 目前,Apache和PHP均未出现官方的64位版本. Apache 64位: http://files.cnblogs.com/liangjie/httpd-2.2.19-win64.rar ...
- Gym 101981J - Prime Game - [数学题][线性筛+分解质因数][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem J]
题目链接:http://codeforces.com/gym/101981/attachments 题意: 令 $mul(l,r) = \prod_{i=l}^{r}a_i$,且 $fac(l,r)$ ...
- 代码块事务—TransactionScope
今天上班遇到这样的业务:将删除的用户信息记录到记录表,再删除用户表中的信息. 可以说是不幸也可以说是幸运的. 在以往遇到这样的业务,我会考虑到各种出现异常或者失败的情况.在删除一张表数据失败的情况,对 ...
- Web开发——HTML基础（文件和网站结构）
参考: 参考:Document and website structure 参考:使用HTML部分和大纲 目录: 1.基本部分 2.用于构造内容的HTML 编辑 2.1 主动学习:探索我们的例子的代码 ...
- jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容
实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...
- [elk]elasticsearch dsl语句
例子1 统计1,有唱歌兴趣的 2,按年龄分组 3,求每组平均年龄 4,按平均年龄降序排序 sql转为dsl例子 # 每种型号车的颜色数 > 1的 SELECT model,COUNT(DISTI ...
- ShoppingCart类图
1,组合关系,实心的棱形画在整体上面,发现很多人把它画错了 2,1..*或*代表的意义说明: 完整格式为:最小数量..最大数量 约束:前者必须小于后者,如1..*表示1个或多个,不会包含1..0这种情 ...
- osx brew mysql
MariaDB Server is available for installation on macOS (formerly Mac OS X) via the Homebrew package m ...
- caffe-ssd的GPU安装时make test 报错：.build_release/test/test_all.testbin:
报错原因:LIBRARIES路径添加不全 解决方法:LIBRARIES += glog gflags protobuf boost_system boost_filesystem boost_rege ...