模板引擎nunjucks初试nunjucks是学习egg.js的准备工作之一。

工欲善其事，必先利其器

nunjucks是学习egg.js的准备工作之一。

nunjucks做为主流模板引擎之一（另一个是ejs），了解一下还是很有必要的,在此简单记录一下，当然详细用法还是要查阅文档的！

文档地址:https://nunjucks.bootcss.com/

首先第一步，下载依赖包:

npm install nunjucks

renderString渲染方式：

let nunjucks = require('nunjucks');
//autoescape 自动转译    
//默认为true(hello &lt;span&gt;士&lt;/span&gt;大夫) , 可以手动改为false（hello <span>士</span>大夫）
nunjucks.configure({autoescape:true});
let result = nunjucks.renderString(
    "hello {{name}}",{name:'<span>士</span>大夫'}
)

render渲染方式：

let nunjucks = require('nunjucks');
let path = require('path');
//第一个参数配置的是视图所在路径
nunjucks.configure(path.resolve('view'),{autoescape:true});
// nunjucks.configure('view',{autoescape:true});
let result = nunjucks.render('index.html',{name:'wyy'});
console.log(result);

//index.html 
hello {{name}}

nunjucks和express配合使用：

let nunjucks = require('nunjucks');
let path = require('path');
let express = require('express');
let app = express();
nunjucks.configure('view',{
    autoscape:true,
    express:app //通过这个属性实现了nunjucks和express的关联
});
/*
1.response.render方法是express内部实现的
2.先读取模板文件，然后把模板文件和数据对象做为参数传递给nunjucks模板引擎
3.由nunjucks模板引擎渲染出来个最终的字符串，再有response发送给客户端
 */
app.get('/',function (req,res) {
    res.render('index.html',{name:'wyy'});
});
app.listen(8080);

nunjucks过滤器写法：

let nunjucks = require('nunjucks');
let path = require('path');
let result1 = nunjucks.renderString(
    `hello {{names | join('-')}}`,{names:['a','b','c']} // 过滤器写法：数据 管道符 过滤器
)
let result2 = nunjucks.renderString(
    `hello {{name | replace('gs','ld') | capitalize}}`,{name:'gs wyy'} // 过滤器写法：数据 管道符 过滤器
)
console.log(result1,result2); //hello a-b-c   hello Ld wyy

nunjucks 条件判断：

let nunjucks = require('nunjucks');
let path = require('path');
let result = nunjucks.renderString(
    `
    {% if score>=90 %}
        优秀
    {% elseif score>=80 %}
        良好
    {% elseif score>=70 %}
        中等
    {% elseif score>=60 %}
        及格
    {% elseif score<60  %}
        不及格
    {% endif %}
    `,{score:78}
)
//>=90 优秀 >=80 良好 >=70 中等 >=60 及格 <60 不及格
console.log(result);

nunjucks for循环写法:

let nunjucks = require('nunjucks');
let path = require('path');
let result = nunjucks.renderString(
    `
    <ul>
        {% for item in users %}
            <li data-id="{{item.id}}">{{loop.index}}:{{item.name}}</li>
        {% endfor %}
    </ul>
    `,{users:[{id:1,name:'wyy'},{id:2,name:'ld'}]}
)
//>=90 优秀 >=80 良好 >=70 中等 >=60 及格 <60 不及格
console.log(result);

nunjucks 的 extends 写法：

<!--被继承者-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout</title>
</head>
<body>
    <div>公共的头部</div>

    <!--代码块，继承者重写代码块，名字要相同-> content -->
    {% block content%}
        <div>我是layout.html中的内容</div>
    {% endblock %}

    <div>公共的尾部</div>
</body>
</html>


<!--继承者-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <!--继承后会覆盖当前所有内容，包括head标签，慎用-->
    {% extends 'layout.html'%}
    {% block content%} 
    <form>用户名<input type="text"></form>
    {% endblock %}
</body>
</html>

nunjucks 的 include 用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>users</title>
</head>
<body>

    <div>公共的头部</div>

    {% block content%}
        <ul>
            {% for item in users %}
                {% include 'user.html'%}
            {% endfor %}
        </ul>
    {% endblock %}

    <div>公共的尾部</div>

</body>
</html>

<!--user.html-->
<li data-id="{{item.id}}">{{loop.index}}:{{item.name}}</li>

这里只是对nunjucks基本用法做一个了解，具体详细内容要在项目中多实践，查阅文档。