js pug 代码_pug模板引擎(原jade)

前面的话

为什么要引入pug，pug有什么特别之处呢？有一些嵌套层次较深的页面，可能会出现巢状嵌套，如下图所示

在后期维护和修改时，一不小心少了一个尖括号，或者某个标签的开始和闭合没有对应上，就会导致DOM结构的混乱甚至是错误。所以，有人发明了HAML，它最大的特色就是使用缩进排列来代替成对标签。受HAML的启发，pug进行了javascript的实现。

Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍pug模板引擎

安装

使用npm安装pug

$ npm install pug

但运行pug命令时，提示pug命令未找到

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

[注意]一定要全局安装pug-cli，否则无法正常编译

npm install pug-cli -g

再运行pug命令时，正常执行

命令行

在学习pug基础语法之前，首先要了解pug的命令行的使用

【基础编译】

将如下内容输入文件中，并命名为index.pug

html

head

title aaa

body

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

在当前目录下生成一个index.html，是index.pug编译后的结果

【sublime两列设置】

但是，这样查看并不方便。下面将sublime设置为两列放置，将index.pug和index.html分别放置在左右两列，方便查看

【自动编译】

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

更改index.pug文件并保存后，index.html文件会实时更新为最新的编译的文件

【标准版HTML】

如上所示，默认地，pug编译出的HTML文件是压缩版的。如果要编译标准版的HTML文件，需要设置-P参数

pug index.html -P

【路径设置】

如果并不希望在当前目录下输入编译后的HTML文件，而是有自定义目录的需求，则需要设置-o参数

如下设置，index.html将输入到a目录下面，如果a目录不存在，则会新建a目录

pug index.pug -o a

【重命名】

默认地，编译后的HTML与pug文件同名。如果需要重命名，则可以进行如下设置

通过如下设置，可以同时设置路径和名称

[注意]这里的路径必须提前建立好，否则不会成功

pug

最终，test.html文件被保存到templates目录下

【批量编译】

假设，编译href目录下所有的pug文件

结构语法

下面介绍关于结构的基础语法

标签

【树状】

在默认情况下，在每行文本的开头(或者紧跟白字符的部分)书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构

ul

li Item A

li Item B

li Item C

【内联】

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

a: img

【自闭合】

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

img

input

img/input/

【DOCTYPE】

HTML5的DOCTYPE书写如下

doctype html

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

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

内容

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

【管道文本】

这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符，这个字符在类 Unix 系统下常用作“管道”功能，因此得名

| 纯文本当然也可以包括 HTML内容。

p| 但它必须单独起一行。

【标签内文本】

这实际上是最常见的情况，文本只需要和标签名隔开一个空格即可

p 纯文本当然也可以包括 HTML 内容。

【嵌入大段文本】

有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可

[注意]不要有空格

script.if(usingPug)

console.log('这是明智的选择。')elseconsole.log('请用 Pug。')

属性

标签属性和 HTML 语法非常相似，它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符，也可以不加逗号

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