直接用 script 引入文件：
<script src="nunjucks.js"></script>
是使用 render 来直接渲染文件，这种方式支持继承(extends)和包含(include)模板。使用之前需要配置文件的路径：
nunjucks.configure('views', { autoescape: true });
nunjucks.render('index.html', { foo: 'bar' });
在 node 端，'views' 为相对于当前工作目录 (working directory) 的路径。在浏览器端则为一个相对的 url，最好指定为绝对路径 (如 '/views')。
项目的目录结构如下：
其中：
主页 index.html
<!DOCTYPE html> <html> <head> <title>nunjucks 应用</title> <meta http-equiv="Access-Control-Allow-Origin" content="*"> </head> <body> <div class="contain"> 123 </div> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/nunjucks.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
模板 tem_data.html ：
<div class="main"> <table class="data-show"> <th class="thead"> <td class="name">名字</td> <td class="area_id">地区编号</td> <td class="area_name">地区名称</td> <td class="river_name">河流名称</td> </th> {% for item in data %} <tr> <td >{{item.name}}</td> <td >{{item.area_id}}</td> <td >{{item.area_name}}</td> <td >{{item.river_name}}</td> </tr> {% endfor %} </table> </div>
app.js：
var data=[{ extra: { }, time: "2016-09-29T08:00:00", val: 195, level_index: 5, id: "71552116", name: "日溪乡汶石", lng: 119.1921, lat: 26.3158, type: "PP", type_name: "雨量站", subjection: "防汛", area_id: "350111", area_name: "晋安区", river_name: "闽江", water_system: "闽江", station_position: 0, city_code: "350100", city_name: "福州市" }, { extra: { }, time: "2016-09-29T16:00:00", val: 192, level_index: 5, id: "71502056", name: "寿山乡红寮", lng: 119.237221, lat: 26.220278, type: "ZZ", type_name: "河道水位站", subjection: "防汛", area_id: "350111", area_name: "晋安区", river_name: "寿山乡红寮", water_system: "寿山乡红寮", station_position: 0, city_code: "350100", city_name: "福州市"}]; nunjucks.configure('http://127.0.0.1:8080/template',{autoescape:true}); var html = nunjucks.render('tem_data.html',{data:data}); //document.getElementsByClassName("contain").innerHTML=html; //nocan $(".contain").append(html);//yes //console.log(html);
为了能够成功渲染，需要修改端口：
（通过输入命令：npm install -g http-server）
