一枝韩独秀

2019-08-24 13:50 已编辑西安邮电大学 C++

关注

NodeJS简易博客系统（一）Jade/Pug模板引擎入门

国庆到现在一直忙着移动端比赛的事情，今天开始nodejs后端框架express的学习。学习路线大概如下：

模板引擎pug/swig基本使用
mongodb的简单学习
数据库框架mongoose的简单使用
NodeJs常用
express的简单使用
所有view页面的制作
博客系统业务逻辑实现

这就是我对NodeJs学习的一个简单介绍，下面开始学习模板引擎pug。

一、属性

1、单行属性

左边是pug的写法，右边是在html中的翻译，管道符号 | 的行是用于控制空格的。

a(href='baidu.com') 百度
|
|
a(class='button' href='baidu.com') 百度

2、多行属性

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

3、用引号括起来的属性

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

4、属性嵌入

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

<a href="/pug-test.html">链接</a>
<a href="https://example.com/">另一个链接</a>

5、不转义的属性

在默认情况下，所有的属性都经过转义（即把特殊字符转换成转义序列）来防止诸如跨站脚本攻击之类的攻击方式。如果您非要使用特殊符号，您需要使用 != 而不是 =。

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

还有.后面跟类属性;#后面跟ID属性;style={}为样式属性;省略掉标签名称的话，它就是默认值div。

二、控制语句

1、分支语句case

case是 JavaScript 的switch指令的缩写，并且它接受如下的形式：

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

同时可以用break来终止条件，所有js代码无用-作为前缀。

2、循环语句

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

或者

- var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"]
each item in list
li= item

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

3、条件语句

Pug 的条件判断的一般形式的括号是可选的，所以您可以省略掉开头的 -，效果是完全相同的。

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

用 = 开始一段带有输出的代码时它将被 HTML 转义：

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

<p>这个代码被 <转义> 了！</p>

三、包含、继承和扩展

1、包含

包含（include）功能允许您把另外的文件内容插入进来。

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

<!DOCTYPE html>
<html>

<body>
<h1>我的网站</h1>
<p>欢迎来到我这简陋得不能再简陋的网站。</p>
<footer id="footer">
<p>Copyright (c) foobar</p>
</footer>
</body>

</html>

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

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

2、继承

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

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

<!DOCTYPE html>

<html>

<head>

<title>Express</title>

</head>

<body>

<h1>Express</h1>

<p>Welcome to Express</p>

</body>

</html>

extends layout

block content
  h1= title
  p Welcome to #{title}

3、扩展

扩展其实就是在block里又有block。

四、迭代

1、each

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

此外，each支持三目运算符，也可以在each语句后面接else块，表示会在数组与对象没有可供迭代的值时被执行。

2、while

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

当然，也可以使用break来结束循环。

五、混入mixin

mixin可以说是pug非常强大的功能，是一种允许您在 Pug 中重复使用一整个代码块的方法。

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

也可以如函数般使用：

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

当然也可以混入块，这就很舒服了，如果你只想在当前模板中重复利用一个块，可以不用另外生成模板继承或者包含，直接用混入块。

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

+article('Hello world')

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

<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>没有提供任何内容。</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>这是我</p>
<p>随便写的文章</p>
</div>
</div>

还可以混入属性：

mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class href=href)= name

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

在使用混入时，可以传入不定长的数组，这个和java中有点类似，用变量加前缀...来说明这是个不定长数组：

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

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

在声明完混入块后调用时，一定要记得加前缀+。