直接用 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）