Pug/jade快速上手教程

最新推荐文章于 2024-03-19 13:35:09 发布

小牲口online

最新推荐文章于 2024-03-19 13:35:09 发布

阅读量1.2k

点赞数 3

分类专栏： node.js 文章标签： node.js

本文链接：https://blog.csdn.net/M_Edison/article/details/115030570

版权

node.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

1.为什么要使用模板引擎
2. pug的介绍
- 2.1关于pug的一特点：
- 2.2 pug的安装
3.pug语法
4. express渲染

1.为什么要使用模板引擎

在nodejs中为什么要使用模板引擎。首先我们先想象一个场景，当前端请求到后端的一组数据后，我们要渲染dom，以前的常规操作就是使用js进行字符串的拼接，这样做虽然可以解决问题，但是这无疑增加了降低了代码的可读性和可维护性。一旦需求发生改变我们将束手无策。

在express框架中有很多模板引擎供我们选择。ejs、pug\jade等。

2. pug的介绍

实际上pug就是jade，jade改名后就成了pug。下面我们介绍一下pug的基本语法以及在express框架的使用。

pug 是一个高性能的模板引擎，它深受 Ham影响，它是用 JavaScript 实现的，并且可以供 Node 使用。通过一套语法把某一段静态的模板，通过模板引擎将动态的数据替换进去，然后将生成的html交给浏览器去解析和渲染。

2.1关于pug的一特点：

1.超强的可读性

2.客户端支持

3.灵活易用的缩进

4.安全，默认代码是转义的

5.命令行下编译jade模板

6.模板继承

7.块扩展

8.编译及运行时的上下文错误报告

9.HTML5模式

10.可选的内存缓存

11.联合动态的静态标记类

12.利用过滤器解析树的处理

13.没有前缀的标签

14.原生支持 express 模块

2.2 pug的安装

首先要想使用pug先要进行全局安装。

    npm i pug -g//全局安装
    npm i pug-cli -g//全局安装脚手架

在项目中使用 pug时，还需要进行局部安装。

    npm init //安装package.json
    npm i pug --save-dev //局部安装

编译

	pug pug文件名 -o 目标路径 -P -w

vscode可以安装插件进行编译（不适合在项目中使用）：

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Prowscats.eno预览版

3.pug语法

基本骨架：

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body

3.1 标签语法

每层级标签之间都采用多一个缩进表示嵌套关系，无需闭合标签，无需尖括号。

 h1 这是一个pug模板案例
       div
       ul
      	 li
       span
       p
       input

上述代码的 li 元素比 ul元素多一个缩进，则表示 ul嵌套了 li 标签。

3.2 属性

标签属性看起来与html相似，但是它们的值只是一般的JavaScript。

div(class="box") this is a div elelement

可直接运行javascript变量

- var bool = true
div(class=bool?"true":"false") // 三元运算

当属性很多时，可以换行显示。

- var bool = true
div(class=bool?"true":"false") // 三元运算

布尔属性（默认为true）。

input(type='checkbox', checked)

样式属性（可以是字符串，也可以是对象）。

p(style="color:#999999;font-size:18px")
h2(style={color:"#666666","font-size":"20px"})

类属性（可以是字符串，像普通属性，也可以是数组）。

div.foo
div.foo.bar
div(class="foo bar")
-var classes = ['box1','box2','box3']
div(class=classes)
div.bing(class=classes)

id属性。

div#box1 
div(id="box2") 
// 由于div是标签常见的选择，所以可以省略，也是标签的默认值
.oh 
#no 
#foo.oh.no

3.3 文本

若要输出文本非常简单，只需在元素后面添加即可。

h1 这是一个h1标签
.box hello pug

动态输出内容：

- var obj = {name:'tom'} 
p #{obj.name} is a man

输出属性值：

- var url = 'http://www.baidu.com' 
a(href=url) 百度一下

3.4 pug条件语句

pug支持纯原生的javascript，所以也可以支持条件语句。

- var flag = true 
if flag 
 p= flag 
else 
 p= flag

3.5 pug循环语句

pug提供了两种迭代的主要方法，each和while，当然，for循环还是可以使用的。

for：

- var arr = [1,2,3,4,5] 
ul 
 - for(var i=0;i<arr.length;i++) 
 li= arr[i]

each：

- var arr = {name:'binge',six:'man'} 
ul 
 each val in arr 
 li= val

while：

ul 
 while num<5 
 li= num++

3.6 mixin混合

相当于函数，可传参

骨架：

//- 定义函数
mixin study 
 //- 代码块
 p good good study 
 //- 函数的调用
+ study

实例：

mixin show(time)
 h3= time
 //- 判断是否存在block
 if block  
 block
 else 
 p no show
+show('2017-11-11')
p Singing and dancing //block

3.7 模板继承

3.7.1 在pug中支持block和extends来继承模板

在项目中经常出现代码块复用的情况。比如html文档的head部分。所以我们可以将其抽离出来作为公共模块。

例子：

common.pug

doctype html 
html 
 head 
 title pug模板
 body 
 h1 pug模板
 //- 哪个文件继承，就调用哪个文件的block为content的模块
 block content

index.pug使用：

// extends继承语法，common，继承的文件的路径
extends common 
block content 
 mixin show(name,...shows) 
 p=name 
 ul 
 each show in shows 
 li= show 
 +show('binge','唱歌','跳舞','睡觉')

生成的hmtl文件：

<!DOCTYPE html> 
<html> 
 <head> 
 <title>pug模板</title> 
 </head> 
 <body> 
 <h1>pug模板</h1> 
 <p>binge</p> 
 <ul> 
 <li>唱歌</li> 
 <li>跳舞</li> 
 <li>睡觉</li> 
 </ul> 
 </body> 
</html>

3.7.2 包含

pug允许在文件中插入另一个文件内容。

common.js

doctype html 
html 
 head 
 //- 引入header.pug 
 include header 
 body 
 h1 pug模板
 block content

header.pug

title pug模板
meta(charset="utf-8")

生成html：

<!DOCTYPE html>
<html>
  <head>
    <title>pug模板</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>pug模板</h1>
  </body>
</html>

4. express渲染

express中使用pug/jade实际上非常容易。

我这里使用生成器生成express mvc架构。

使用方法（新建路由文件）：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/index',(req,res,next)=>{
  res.render('test');
})

module.exports = router;

至于具体实现可以看一下express架构的实现。

这是普通使用：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.set('views','./views');  //设置应用程序视图的目录（可以是数组，若是数组，则视图按照它们在数组中出现
的顺序进行查找）
app.set('view engine','jade');  //设置当省略后缀名时，使用默认的引擎扩展
app.use(bodyParser.urlencoded({ extended: true }));  //解析application/x-www-formurlencoded
app.get('/',function(req,res){
    res.render('jade',{
        title:'index page',
        user:{
            username:'tom',
            password:123456
       }
   })
})
app.listen(8888,function(){
    console.log('project running at http://127.0.0.1:8888')
})

小牲口online

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Pug/jade快速上手教程

文章目录1.为什么要使用模板引擎2. pug的介绍2.1关于pug的一特点：2.2 pug的安装3.pug语法3.1 标签语法3.2 属性3.3 文本3.4 pug条件语句3.5 pug循环语句3.6 mixin混合3.7 模板继承3.7.1 在pug中支持block和extends来继承模板3.7.2 包含4. express渲染1.为什么要使用模板引擎在nodejs中为什么要使用模板引擎。首先我们先想象一个场景，当前端请求到后端的一组数据后，我们要渲染dom，以前的常规操作就是使用js进行字符
复制链接

扫一扫