重新学习Node,整理以前的日志。Swig模版引擎学习笔记。
简介
swig 是node端的一个优秀简洁的模板引擎,类似Python模板引擎Jinja,目前不仅在node端较为通用,相对于jade、ejs优秀,而且在浏览器端也可以很好地运行。
这是官方文档
。
语法
swig的变量
1 2 3
| {{ foo.bar }} {{ foo['bar'] }} //如果变量未定义,输出空字符。
|
swig的标签
extends
使当前模板继承父模板,必须在文件最前
1 2 3 4
| {% exdtends file %}
// 参数file:父模板相对模板root的相对路径
|
block
定义一个块,使之可以被继承的模板重写,或者重写父模板的同名块
1 2
| {% block blockName %}something can be entended and modified...{% endblcok %} // 参数name:块的名字,必须以字母数字下划线开头
|
parent
将父模板中同名块的内容注入当前块中
1 2 3 4 5
| {% extends "./foo.html" %} {% block content %} My content. {% parent %} {% endblock %}
|
include
包含一个模板到当前位置,这个模板将使用当前上下文
参数file是包含模板相对模板 root 的相对路径
1 2 3 4
| {% include "a.html" %} {% include "template.js" %} //将引入的文件内容放到被引用的地方
|
raw
停止解析swig标签,其中所有内容都将按照字面意思输出
参数file是包含模板相对模板 root 的相对路径
1 2 3
| // foobar = '<p>' {% raw %}{{ foobar }}{% endraw %} // => {{ foobar }}
|
set
设置一个变量,在当前上下文中复用,设置的值会覆盖已定义值
1 2 3 4 5
| // foods = {}; // food = 'chili'; {% set foods[food] = "con queso" %} {{ foods.chili }} // => con queso
|
模版继承
Swig 使用 extends 和 block 来实现模板继承
example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| //layout.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>{% block title %}My Site{% endblock %}</title>
{% block head %}
{% endblock %} </head> <body> {% block content %}{% endblock %} </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| //index.html
{% extends './layout.html' %}
{% block title %}My Page{% endblock %}
{% block head %} {% parent %}
{% endblock %}
{% block content %} <p>This is just an awesome page.</p> <h1>hello,lego.</h1> <script>
//require('pages/index/main'); </script> {% endblock %}
|
swig模板经过编译后:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <!doctype html> <html> <head> <meta charset="utf-8"> My Page </head> <body> <p>This is just an awesome page.</p> <h1>hello,lego.</h1> <script src="pages/index/main"> //require('pages/index/main'); </script> </body> </html>
|
在express中使用swig
在express框架中,默认的模版是jade,可以更改为其他模版引擎。修改app.js
1 2 3 4 5 6 7 8 9 10 11 12 13
| var app = express(); app.set('view engine', 'jade'); // 把上面的代码改为下面的 // view engine setup var app = express(), swig = require('swig'), app.engine('html', swig.renderFile); //使用swig渲染html文件 app.set('view engine', 'html'); //设置默认页面扩展名 app.set('view cache', false); //设置模板编译无缓存 app.set('views', path.join(__dirname, 'views')); //设置项目的页面文件,也就是html文件的位置 swig.setDefaults({cache: false}); //关闭swig模板缓存 swig.setDefaults({loader: swig.loaders.fs(__dirname + '/views')}); //从文件载入模板,请写绝对路径,不要使用相对路径
|
然后把原来的views文件夹下得文件后缀都改为html
模板文件layout.html
1 2 3 4 5 6 7 8 9 10 11 12
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>{% block title %}{% endblock %}</title> {% block head %} {% endblock %} </head> <body> {% block content %}{% endblock %} </body> </html>
|
index.html
1 2 3 4 5 6 7 8 9 10 11
| {% extends 'layout.html' %}
{% block title %}index {{title}} {%endblock%}
{% block head %} {{title}} {% endblock %}
{% block content %} <p>This is just an awesome page.</p> {% endblock %}
|
然后再路由中设置即可使用:
1 2 3
| router.get('/', function(req, res) { res.render('index', { title: '标题' }); });
|
参考