進階模板 nunjucks
模板的使用
- 定義
- 繼承
- 引用
效果
![]()
代碼
<!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>New ThinkJS Application</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 16px;
font-family: arial;
}
header {
padding: 70px 0 70px 0;
background-color: #4A6495
}
h1 {
font-size: 36px;
color: #fff;
font-weight: normal;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>A New App Created By ThinkJS AP</h1>
</header>
<div class="content">
{{controller.name}}
</div>
<!-- 引入模板 -->
{% include "./Footer.html" %}
</body>
<!-- 引入js -->
<script src="/static/js/index.js"></script>
</html>
文件目錄
![]()
footerTel.html 定義模板
<div class="Footer">
{% block footer1 %}<div class="as">首頁</div>{% endblock %}
{% block footer2 %}<div class="as">展示</div>{% endblock %}
{% block footer3 %}<div class="as">我的</div>{% endblock %}
</div>
Footer.html 繼承模板 extends
{% extends "./footerTel.html" %}
{% block footer2 %}<div class="as">@展示@</div>{% endblock %}
index.html 引用模板 include
<!-- 引入模板 -->
{% include "./Footer.html" %}
在繼承的同時 可以修改父級的數據 以實現不同的效果
![]()
