共计 2448 个字符，预计需要花费 7 分钟才能阅读完成。
版权声明：此文首发于我的个人站 Keyon Y，转载请注明出处。
pug 是一个很简洁很灵活的模板引擎。配合 express 使用时，在启动文件 (app.js) 中配制
// 设置模板类型
app.set(‘view engine’, ‘pug’);
// 设置模板文件路径
app.set(‘views’, path.resolve(__dirname, ‘src/Views’));
即可使用。
pug 的继承
extends 和 block 实现了 pug 的继承。把 html 中公共 / 重复的部分提出，写在 如 layout.pug 中，
// Shared/layout.pug
doctype html
html
head
meta(charset=”UTF-8″)
title #{title}
meta(name=”keywords” content=keywords)
meta(name=”description” content=description)
meta(http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″)
meta(name=”renderer” content=”webkit”)
link(rel=’stylesheet’ href=’/Contents/base.css’) //- 公用样式
block links
script(type=’text/javascript’, src=’/assets/jquery-1.10.2.min.js’)
body
include header
block content
include footer
include ../Include/toplink
block scripts
script(type=’text/javascript’, src=’/Scripts/base.js’) //- 公用 js
block javascript
// Home/index.pug
extends ../Shared/layout
block links
link(rel=’stylesheet’ href=’/Contents/index.css’)
block scripts
script(type=’text/javascript’, src=’/Scripts/index.js’)
block content
include ../Include/homeInclude
.container
.clear
Mixin—对 html 进行函数式编程
pug 通过 mixin 便可以实现对 html 的函数式编程
//- include/homeInclude.pug
mixin homeBtnBox(num)
//- num: 0- 报名中 1- 已结束
.hr_btnBox
a(href=”/User” + targetId + “/Mas” class=num == 0 ? “active” : “”) 报名中
a(href=”/User” + targetId + “/Mas/Require/Finish” class=num == 1 ? “active” : “”) 已结束
//- home/home.pug
include ../include/homeInclude //- 引入编写 mixin 的 pug 文件
+homeBtnBox(1) //- 传参调用
判断并绑定多个 classname 的方法
.btn(class={“btn_t1”: item.status == 0, “btn_t2”: item.status == 1, “btn_t3″: item.status == 2})
有木有很眼熟？用过 ng,vue 的同学都熟悉这种方式，在 pug 中也可以这样使用，但是只有 class 的属性可以使用这种判断方式，其他的属性, href、title、value 等等 都不可以这么用。
逻辑运算后再绑定数据的方法
有时候从后端返回的数据需要进行处理，才可以使用，可以在 node 中间层里编写数据处理的方法，运算后再返回，或者 也可以试试如下的方法：pug 的通过一个 – 表示一段不输出的代码，提供一个 js 语法执行环境，运算 js 后再将运算结果绑定到 pug 模板中。
//- 时间格式化: 最长 3 个月前
mixin dateFormat(string)
–
var res = ”;
var time_zone = new Date().getTime() – new Date(string.replace(‘T’, ‘ ‘)).getTime();
if(time_zone < 0) {
res= ‘<b>1</b> 分钟前 ’
}else if(time_zone < 1 * 60 * 60 * 1000) {
res= ‘<b>’ + Math.floor(time_zone / (1000 * 60)) + ‘</b> 分钟前 ’;
}else if(time_zone < 1 * 24 * 60 * 60 * 1000){
res= ‘<b>’ + Math.floor(time_zone / (1000 * 60 * 60)) + ‘</b> 小时前 ’;
}else if(time_zone < 1 * 30 * 24 * 60 * 60 * 1000) {
res= ‘<b>’ + Math.floor(time_zone / (24 * 60 * 60 * 1000)) + ‘</b> 天前 ’;
}else if(time_zone < 3 * 30 * 24 * 60 * 60 * 1000) {
res= ‘<b>’ + Math.floor(time_zone / (30 * 24 * 60 * 60 * 1000)) + ‘</b> 月前 ’;
}else {
res= ‘<b>’ + string.slice(0, 10) + ‘</b>’;
}
span!= res //- != 绑定一段不转义的代码
分享一下 pug 的中文文档：https://pug.bootcss.com/language/attributes.html
欢迎继续关注本系列博文的其他精彩文章 Node 中间层实践（一）——基于 NodeJS 的全栈式开发 Node 中间层实践（二）——搭建项目框架 Node 中间层实践（三）——webpack 配置 Node 中间层实践（四）——模板引擎 pug Node 中间层实践（五）——express- 中间层的逻辑处理
