相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是
他没有一个html该有的样子。。。
所以我还是决定使用swig,页面结构,样子都是熟悉的样子,使用起来顺手了许多。
很多朋友也在纠结二者的优缺点,这个根据需求因人而异吧
这是两者的比较
http://vschart.com/compare/swig-template-engine/vs/jade-template-engin
下面我们一起学习下swig这个前端模板引擎
swig的简单介绍
swig是JS模板引擎,它有如下特点:
支持大多数主流浏览器。
表达式兼容性好。
面向对象的模板继承。
将过滤器和转换应用到模板中的输出。
可根据路劲渲染页面。
支持页面复用。
支持动态页面。
可扩展、可定制。
一. swig的安装
npm install swig --save二.和express框架集成
app.js
var express = require('express');
var swig = require('swig');
var path = require('path')
var app = express();
var port = process.env.PORT || 4000//设置swig页面不缓存
swig.setDefaults({
cache: false
})
app.set('view cache', false);
app.set('views','./views/pages/');
app.set('view engine','html');
app.engine('html', swig.renderFile);
app.listen(port);
console.log('server is started at http://localhost:'+port);
//index page
app.get('/',function(req, res){
res.render('index',{
title:'首页 ',
content: 'hello swig'
})
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
然后测试运行
node app.js
在浏览器输入:http://localhost:4000, 执行效果如下

浏览器运行.png
三.基本用法
1.变量
{{ name }}这里需要注意的是前后两端都要有空格,这样{{name}}写就会报错
2.属性
{{ student.name }}3.模板继承
Swig 使用 extends 和 block 来实现模板继承 layout.html
首先我们定义一个模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">









