模板引擎

模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；

##pug模板引擎使用

安装pug
npm i pug -g
pug常用语法
- pug语法：通过缩进关系，代替以往html的层级包含关系，如个简单的静态可以表达为，注意要统一使用tab或者空格缩进，不要混用
- 内联书写层级,a: img
- style属性：div(style={width:”200px”,color:”red”})
- 使用”-”来定义变量，使用“=”把变量输出到元素内；
- 通过 #{variable} 插相应的变量值
- html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）
- 文本通过在字前添加竖线符号“|”可让 jade 原样输出内容在html标签标记后通过空格隔开本内容在html标签标记后通过添加引号“.”添加块级文本
- 注释：可以通过双斜杠进注释，jade有3种注释式，可以分别对应输出html 注释、输出html注释、块级html注释
- 循环：each val in [1,2,3]
- 判断语句：”if else” case when default
- mixin：混合模式
- include common/footer.pug 通过include引入外部文件

练习工具 hade；

npm i hade -g

nunjucks模板引擎在koa中的应用

安装koa-nunjucks-2

使用nunjucks

 const nunjucks = require('koa-nunjucks-2');
 app.use(nunjucks({
   ext:"html",   //指定模板后缀
   path:path.join(__dirname,'views'), //指定视图目录
   nunjucksConfig:{
     trimBlocks:true   //开启转义，防止xss漏洞
   }
 }))

推荐使用”.njk“后缀名

nunjucks的语法使用

变量：
注释：
```
 {# Loop through all the users #}
```

jsx

 {% if hungry %}
   I am hungry
 {% elif tired %}
   I am tired
 {% else %}
   I am good!
 {% endif %}

for

jsx

 <h1>Posts</h1>
 <ul>
 {% for item in items %}
   <li>{{ item.title }}</li>
 {% else %}
   <li>This would display if the 'item' collection were empty</li>
 {% endfor %}
 </ul>

过滤器

 {{ foo | replace("foo", "bar") | capitalize }}

模板继承block/extends

定义父类模板

 <h1>我是公共模板</h1>
     <div class="leftContent">
         {% block left %}
             这边是左侧的内容
         {% endblock %}
         {% block right %}
             这边是右侧的内容
         {% endblock %}
         {% block somevalue %}
             我是一些数据
         {% endblock %}
     </div>

继承父类模板

 {% extends "common.html" %}
 {% block left %}
     我是左侧的内容1111
 {% endblock %}
 {% block right %}
     我是右侧的内容11111
 {% endblock %}
 
 {% block somevalue %}
     {{ super() }}
 {% endblock %}

Macro（宏标签）可以定义可复用的内容，类似与编程语言中的函数

定义

 {% macro pet(animalName,name="小白") %}
     <div>
         这里是一只{{animalName}};他的名字是{{name}}
     </div>
  {% endmacro %}

调用
```
 {{pet("狗狗")}}
```

include/import

include 引入文件
```
 {% include "footer.html" %}
```

import 导入文件

定义

     {% macro pet(animalName) %}
     <p>这是一只{{animalName}}</p>
     {% endmacro %}
     {% macro book(bookName) %}
     <p>这是一本书，名字叫{{bookName}}</p>
     {% endmacro %}

调用

 {% import 'somemodule.html' as fn %}
 {{fn.pet("狗狗")}}
 {{fn.book("nodejs从入门到实践")}}

总结

什么是模板引擎
pug/nunjucks模板引擎
表达式
判断语句
循环语句
宏模式
导入导出

模板引擎 #

nunjucks模板引擎在koa中的应用 #

总结 #

模板引擎

nunjucks模板引擎在koa中的应用

总结