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