Nunjucks是Mozilla開發的一個純JavaScript編寫的模闆引擎，既可以用在Node環境下，又可以運作在浏覽器端
安裝
npm install nunjucks
使用
- 渲染字元串
let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret = nunjucks.renderString('hello {{username}}',{username: 'leo'});
console.log(ret);
- 渲染檔案
let nunjucks=require('nunjucks');
nunjucks.configure('views',{autoescape:true});
let ret2 = nunjucks.render('index.html',{name: 'leo'});
console.log(ret2);
express
在express中使用
let express=require('express');
const nunjucks=require('nunjucks');
const path=require('path');
let app=express();
nunjucks.configure(path.resolve(__dirname,'views'),{
autoescape: true,
express:app
});
app.get('/',function (req,res) {
res.render('index.html',{name:'leo'});
});
app.listen(8080);
文法
變量
變量會從模闆上下文擷取，如果你想顯示一個變量可以：
過濾器
過濾器是一些可以執行變量的函數，通過管道操作符 (|) 調用，并可接受參數。
let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
{{ names | join(",") }}
`,{names: ['name1','name2']});
console.log(ret);
let ret2=nunjucks.renderString(`
{{word| replace("world", "there") | capitalize}}
`,{word:'hello world'});
console.log(ret2);
if
if 為分支語句，與 javascript 中的 if 類似。
let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
{% if score > 90 %}
優
{% elseif score>80 %}
良
{% elseif score>70 %}
中
{% elseif score >60 %}
及格
{% else %}
不及格
{% endif %}
`,{score:79});
console.log(ret);
for
for 可以周遊數組 (arrays) 和對象 (dictionaries)。
let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
<ul>
{% for item in items %}
<li>{{loop.index}} {{item.id}}:{{item.name}}</li>
{% endfor %}
</ul>
`,{items: [{id:1,name:'zfpx1'},{id:2,name:'zfpx2'}]});
console.log(ret);
- loop.index: 目前循環數 (1 indexed)
- loop.index0: 目前循環數 (0 indexed)
- loop.revindex: 目前循環數，從後往前 (1 indexed)
- loop.revindex0: 目前循環數，從後往前 (0 based)
- loop.first: 是否第一個
- loop.last: 是否最後一個
- loop.length: 總數
模闆繼承
- 模闆繼承可以達到模闆複用的效果，當寫一個模闆的時候可以定義 “blocks”，子模闆可以覆寫他
- 同時支援多層繼承。
index.js
let nunjucks=require('nunjucks'); const path=require('path'); nunjucks.configure(path.resolve(__dirname,'views'),{autoescape:true}); let ret2 = nunjucks.render('login.html',{name: 'leo'}); console.log(ret2);layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> hello {{name}} </body> </html>
login.html
{% extends "layout.html" %}
{% block content %}
登入頁面 {{name}}
{% endblock %}
包含
include 可引入其他的模闆，可以在多模闆之間共享一些小模闆，如果某個模闆已使用了繼承那麼 include 将會非常有用。
index.js
let nunjucks=require('nunjucks');
const path=require('path');
nunjucks.configure(path.resolve(__dirname,'views'),{autoescape:true});
let ret2=nunjucks.render('items.html',{items: [{id:1,name:'leo'},{id:2,name:'perter'}]});
console.log(ret2);
items.html
{% extends "layout.html" %}
{% block content %}
<ul>
{% for item in items %}
{% include "item.html" %}
{% endfor %}
</ul>
{% endblock %}
item.html
![從零開始搭建vue項目，并安裝常用插件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)