前端模板Nunjucks简介

Posted ZRainna

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端模板Nunjucks简介相关的知识,希望对你有一定的参考价值。

参考资料: https://mozilla.github.io/nunjucks/

https://mozilla.github.io/nunjucks/templating.html

https://mozilla.github.io/nunjucks/api.html

 

常用API

render

nunjucks.render(name, [context], [callback])

var res = nunjucks.render(‘foo.html);
var res = nunjucks.render(‘foo.html‘, { username: ‘James‘ });    
nunjucks.render(‘async.html‘, function(err, res) {
});

 

renderString

nunjucks.renderString(str, context, [callback]) 返回渲染后的原始字符串。

var res = nunjucks.renderString(‘Hello {{ username }}‘, { username: ‘James‘ });     //输出 Hello James

 

configure

nunjucks.configure([path], [opts]); path 默认当前路径,模板文件所在的路径。

nunjucks.configure(‘views‘, {       //views为模板文件所在的目录
    autoescape: true,
    express: app,
    watch: true
});

 

getTemplate

env.getTemplate(name, [eagerCompile], [callback]) Retrieve the template named name

var tmpl = env.getTemplate(‘page.html‘, true);          //返回模板文件 page.html 的内容

 

express

env.express(app) 用做服务端渲染

var app = express();
env.express(app);

app.get(‘/‘, function(req, res) {
    res.render(‘index.html‘);
});

 

constructor

new Template(src, [env], [path], [eagerCompile])

var tmpl = new nunjucks.Template(‘Hello {{ username }}‘);
tmpl.render({ username: "James" }); // -> "Hello James"

 

以上是关于前端模板Nunjucks简介的主要内容,如果未能解决你的问题,请参考以下文章

nunjucks模板设计一个页面

Gulp Front Matter + Markdown 通过 Nunjucks

nunjucks.js模板渲染

Nunjucks

Nunjucks3-7

Koa与Node.js开发实战——Nunjucks模板在Koa中的应用(视频演示)