目錄
4.8nunjucks的語法使用——模板繼承block/extends
4.10nunjucks的語法使用——include/import
1.知識點及課堂目標
知識要點
- 模板引擎
- pug模板引擎（安裝pug、循環判斷、混合模式、插值表達式）
- nunjucks模板引擎（koa-nunjucks-2模塊的使用，nunjucks在koa中的使用，nunjucks使用中的常用語法
課堂目標
- 瞭解模板引擎
- 學會pug的常用語法
- 瞭解nunjucks模板引擎的常用語法
- 會在koa中使用pug和nunjucks模板引擎
2.模板引擎
模板引擎：模板引擎是web應用中動態生成html的工具，負責將數據和模板結合；常見模板引擎有：ejs、jade（現更名爲pug）、Handlebars、Nunjucks、Swig等；使用模板引擎可以是項目結構更加清晰，結構更加合理，讓項目維護變得更簡單；
3.pug模板引擎使用
3.1安裝pug
npm i pug -g
3.2pug常用語法
- 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引入外部文件
3.3練習工具 hade
npm i hade -g
4.nunjucks模板引擎在koa中的應用
4.1安裝koa-nunjucks-2
4.2使用nunjucks
推薦使用”.njk“後綴名
const nunjucks = require('koa-nunjucks-2');
app.use(nunjucks({
ext:"html", //指定模板後綴
path:path.join(__dirname,'views'), //指定視圖目錄
nunjucksConfig:{
trimBlocks:true //開啓轉義，防止xss漏洞
}
}))
4.3nunjucks的語法使用——變量
-
變量：
{{username}}
4.4nunjucks的語法使用——註釋
{# Loop through all the users #}
4.5nunjucks的語法使用——if
{% if hungry %}
I am hungry
{% elif tired %}
I am tired
{% else %}
I am good!
{% endif %}
4.6nunjucks的語法使用——for
<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>
4.7nunjucks的語法使用——過濾器
{{ foo | replace("foo", "bar") | capitalize }}
4.8nunjucks的語法使用——模板繼承block/extends
4.8.1定義父類模板
<h1>我是公共模板</h1>
<div class="leftContent">
{% block left %}
這邊是左側的內容
{% endblock %}
{% block right %}
這邊是右側的內容
{% endblock %}
{% block somevalue %}
我是一些數據
{% endblock %}
</div>
4.8.2繼承父類模板
{% extends "common.html" %}
{% block left %}
我是左側的內容1111
{% endblock %}
{% block right %}
我是右側的內容11111
{% endblock %}
{% block somevalue %}
{{ super() }}
{% endblock %}
4.9nunjucks的語法使用——Macro（宏標籤）
Macro（宏標籤）可以定義可複用的內容，類似與編程語言中的函數
4.9.1定義
{% macro pet(animalName,name="小白") %}
<div>
這裏是一隻{{animalName}};他的名字是{{name}}
</div>
{% endmacro %}
4.9.2調用
{{pet("狗狗")}}
4.10nunjucks的語法使用——include/import
4.10.1include 引入文件
{% include "footer.html" %}
4.10.2import 導入文件
- 定義:
{% macro pet(animalName) %}
<p>這是一隻{{animalName}}</p>
{% endmacro %}
{% macro book(bookName) %}
<p>這是一本書，名字叫{{bookName}}</p>
{% endmacro %}
-
調用
{% import 'somemodule.html' as fn %}
{{fn.pet("狗狗")}}
{{fn.book("nodejs從入門到實踐")}}
5.總結
- 什麼是模板引擎
- pug/nunjucks模板引擎
- 表達式
- 判斷語句
- 循環語句
- 宏模式
- 導入導出