简单了解Pug

前言

之前试着学习hexo，但是无奈一些主题的layout使用pug编写的布局。没有办法只能去学习pug。但是本篇文章并不会细究pug，仅仅根据我个人的简单学习的见解，简单了解pug的最基本的知识，做到入门而已。

简单介绍

pug的前身时jade，其基本内容没有很大的变化。pug是个灵活的html模板引擎，专门为Node.js平台开发。

pug的一个特点是，其根据缩进来表达标签之间的嵌套关系，因此在编写过程中相比html要轻松一些，不过必须注意每个标签的缩进，缩进不可乱用。

安装

在安装Pug之前要确保安装了Node.js

前往官网https://nodejs.org/en/download/ 下载安装，或者利用nvm安装。

安装包安装Node.js

安装过程比较简单，一路“下一步”即可。（有水平的人可以考虑改变Node.js的安装路径）
右击“我的电脑” ，选择”属性”
点击”高级系统设置”
点击“环境变量”
在“系统变量”中，找到变量为“path”，点击编辑
点击“新建”，输入Node.js的安装路径，之后“确认”即可

nvm安装Node.js

windows 打开cmd （Ctrl + R 输入 cmd）输入以下脚本（确保网络，选其一不包括 $）:

利用cURL:

1	$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh \| sh

利用Wget：

1	$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh \| sh

安装成功后，重启cmd，执行命令安装 Node.js

1	$ nvm install node

验证Node.js的安装

打开cmd，输入

$ node -v

如果出现版本号，则表示安装成功。例如以下信息：

v10.16.3

安装pug

在cmd中输入

1	$ npm install pug-cli -g

检验安装成功，输入（注意V大写）:

$ pug -V

出现版本号表示安装成功

1 2	pug version: 2.0.4 pug-cli version: 1.0.0-alpha6

pug相关命令

在介绍语法之前，pug是html一种模板，但是pug的阅读性不太好，因此可以利用命令将pug转换为html格式。

命令行输入(xxx.pug 替换为自己想要转换的pug文件)

1	$ pug -p xxx.pug

更多详细的命令，可自行去查找

语法

属性

属性的写法没有太大的区别，注意在pug中属性值使用 '代替"，同时属性之间使用,来隔开。这里代码就只展示部分段，重点是体会其区别。

1
2
3

<div id="div1" class="div1">
<div id="div2" class="div2">
<div id="div4" class="div3">

pug针对div的这种属性有三种表示(一般标签就是用第一种)
1
2
3
div(id='div1',class='div1',)
div.div2#div2
.div3#div4
(注意区分id和class)

内容

内容这里有三种写法。

直接紧跟在标签后面，注意与标签相差一个空格。
1
div 块区域
在标签后面加上.表示之后的内容全属于此标签，一般用于添加多行文本和样式，注意标签后的.没有空格,同时文本要缩进。
1
2
3
4
5
6
p.
p1{color:red}
这是第一行
这是第二行
.p2{color:blue}

在每行内容前加”管道“|,|于内容间有空格

1
2
3

p
	| 一行
	| 二行 <storng>这是尖括号</strong>

注释

单行注释 //
1
//会在html中生成注释
非缓冲注释//-
1
//-不会在html中出现

块注释//-

//-p
	这下
	p标签
	整个
	就被注释了

IE注释，主要针对旧的IE版本

1
2
3

<!--[if IE 8]><html class='ie8'><[endif]-->
<!--[if IE 9]><html class='ie9'><[endif]-->
<!--[if IE ]><html class='ie8'><[endif]-->

变量

变量赋值

接下来用比较来展示，pug的变量赋值的使用

变量就是 -var text = pug
赋值只需要#{变量名},如果{}有函数会率先执行函数，再将结构输出

内容变量

pug

-var text = 'aaa bbb'
div #{text}
div #{text.toUpperCase()}
div=text

html

1
2
3

<div>aaa bbb</div>
<div>AAA BBB</div>
<div>aaa bbb</div>

属性赋值

只能使用=变量名来赋值

pug

-var url = 'baidu.com'
-var test = 'aa'
a(href='http://'+url)
input(value=text)
inpit(value="#{text}")

html

1
2
3

<a href="http://baidu.com"></a>
<input value="aa"></input>
<input value="#{text}">

变量获取

使用命令行赋值

1	$ pug ./index.pug -P -w --obj "{'text':'aa'}"

pug
1
div #{text}
html
1
<div>aa</div>

使用JSON文件

在名为text的json文件中写入{"text":"study pug"}，命令行执行：

1	$ pug ./index.pug -P -w -O ./text.json

(注意对于引入外部变量，会先执行内部变量)

变量转义

如果变量值中存在可以被转义的值时，会在赋值时将其转义。

例如:

1	-var test = '<strong>尖括号</strong>'

但是也可以不转义:

1 2	div !{test} div!=test

不进行编译

pug
1
2
div \#{test}
div \!{test}
html
1
2
<div>#{test}</div>
<div>#{test}</div>

循环

for循环

注意for前面有个-

-var test={location:'beijing',content:'jade'}
-for (var k in test)
	p=test[k]
//这里p获取的是 beijing 与 jade

-var test2=[1,2,3]
-for (var i in test2 )
	p=test2[i]
//p的值为1,2,3

each循环

-可以忽略

-var test={location:'beijing',content:'jade'}
each item in test
	p=item //同理for循环
	
//each同样可以取出两个变量，但是value,key位置不能交换
each value,key in test
	p #{key}: #{value} //结果为 location: bejing

while循环

-var n=0
ul
	while (n<5)
		li=n++ 
//相当ul下的<li>标签出现5行同时值也递增

条件

if-else判断

if-else用法与javascript相同,不需要写-

-var test=[0,1]
for test==0
	p=test[0]
else if test==1
	p=test[1]
else
	p='啥都没呀'

case判断

格式

case 变量名
	when a
		代码块
	when b: 代码块
	defaut: 代码块

例如（灵活思考，灵活运用）

-var test='go'
case test
	when 'gbb'
		p gbb
	when 'go': p gd
	default
		p=test

mixin重用

首先我得先说一下mixin是什么。
mixin是一种简化代码的方法，可以提高重复使用率。

css与js中有使用，具体这里就不说了。

mixin定义和重用

pug
1
2
3
4
mixin test
p study pug
+test
+test
html
1
2
<p>study pug</p>
<p>study pug</p>

mixin传递参数

pug

1
2
3

mixin test(what)
	p study #{what}
+test('pug')

html
1
<p>study pug</p>

mixin嵌套

pug

mixin test('what')
	p #{what}
mixin exam(exam)
	p='在'+exam.where+'考试'+test(exam.content)
+exam({'where':'beijing','content':'pug'})

html
1
2
<p>在beijing考试</p>
<p>pug</p>
(灵活理解，灵活运用)

mixin内联代码块

其中mixin的声明中，block对应的+test下有内容，没有则执行else

pug

mixin test
	if block
		block
	else
		p='有点累'
+test
	p='不累了'
+test

html
1
2
<p>有点累</p>
<p>不累了</p>

mixin传递属性

使用时 +test(参数)(属性)

通过p(class=attributes.class)取得特定的属性。
(attributes.class之所以在!=后，是因为其已经被编译了，无需重复编译)

pug

1
2
3

mixin attr(name)
	p(class!=attributes.class) #{name}
+attr('pug')(class='study')

html
1
<p class="study">pug</p>

通过p&attributes(attributes)取得全部属性。

pug

1
2
3

mixin attr1(name)
	p&attributes(attributes) #{name}
+attr1('pug1')(class='study1',id='study1')

html
1
<p class="study1" id="study1">pug1</p>

mixin传递不确定数量参数

利用…items来表示，剩下的都一样。

pug

mixin test(name,...items)
	p=name
	each item in items
		li=item
+test('pug','node','JS','express')

html

<p>pug</p>
<i>node</i>
<i>JS</i>
<i>express</i>

包含和继承

include包含

可以文件之间的相互调用。也可以引入原生html文件。

编译后会将代码自行加入其中，引入时将其放入合适的代码块位置。

用法

1 2	include a.pug include b.html

block继承

解决子文件与父文件间的代码复用，子代码会覆盖父代码，就是传统意义上的继承。

//父文件.pug
block test
	代码块1

//子文件.pug
extends 父文件.pug
block test
	代码块2
//最后的结果输出代码块2

一个覆盖的例子

父文件 layput.pug

head
	title study pug
	block scripts
		script(src='/tsp0.js')
		script(scr='/tsp1.js')
body
	block content
		p 来自layout.pug
	block footer
	div.footer
		p 这里是父文件

子文件 index.pug

extends layout.pug

block append scripts
	script(src='/tsp2.js')
block prepend scripts
	script(src='/tsp3.js')
block content
	p 这里来自index.pug

html

<head>
	<title>study pug</title>
	<script src='/tsp3.js'></script>
	<script src='/tsp0.js'></script>
	<script src='/tsp1.js'></script>
	<script src='/tsp2.js'></script>
</head>
<body>
	<p>这里来自index.pug</p
	<div class="footer">
		<p>这里是父文件</p>
	</div>
</body>

对于以上例子有三个block：scripts,content和footer

footer: 如果子文件没有对父文件的block修改，则默认引用。
content: 子文件引用了父文件的block，将自己的内容覆盖在父块上
scripts 如果只是在父文件基础上添加内容，考虑使用prepend和append，分别是向block顶部和底部插入内容，使用时可以省略block。

结语

以上就是pug的简单入门。

感谢csdn博主的文章，参考于: https://blog.csdn.net/helianthusxuyue/article/details/78159476