09 flask模板 复用，include,宏
模板继承：
需要模版继承的情况：
1。 多个模板具有完全相同的顶部和底部
2。 多个模板具有相同的模板内容，但是内容中部分不一样
3。 多个模板具有完全相同的模板内容
标签：
{% block 名字 %}
{% endblock %}
1.定义父模板
2.子模板继承父模板
步骤：
父模板：
1。 定义一个base.html的模板
2。 分析模板中哪些是变化的比如：{% block title %}父模板的title{% endblock %}
对变化的部分用block进行"预留位置"也称作：挖坑
3。注意：样式和脚本 需要提前预留
{% block mycss %}{% endblock %}
{% block myjs %}{% endblock %}
子使用父模板：
1。 {% extends '父模板的名称' %}将父模板继承过来
2。 找到对应的block（坑）填充，每一个block都是有名字的。
1 base.html 父模板 2 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title> 9 {% block title %}父模板的title{% endblock %} 10 </title> 11 <style> 12 #head { 13 height: 50px; 14 background-color: bisque; 15 } 16 17 #head ul { 18 list-style: none; 19 height: 50px; 20 } 21 22 #head ul li { 23 float: left; 24 width: 100px; 25 text-align: center; 26 font-size: 18px; 27 height: 50px; 28 line-height: 50px; 29 } 30 31 #middle { 32 height: 900px; 33 background-color: azure; 34 } 35 36 #foot { 37 height: 50px; 38 line-height: 50px; 39 background-color: darkseagreen; 40 } 41 </style> 42 {% block mycss %}{% endblock %} 43 </head> 44 <body> 45 <div id="head"> 46 <ul> 47 <li>首页</li> 48 <li>秒杀</li> 49 <li>超市</li> 50 <li>图书</li> 51 <li>会员</li> 52 </ul> 53 </div> 54 <div id="middle"> 55 {% block middle %} 56 <button id="btn">我是中间部分</button> 57 {% endblock %} 58 </div> 59 60 <div id="foot"> 61 我是底部 62 </div> 63 {% block myjs %} 64 65 {% endblock %} 66 </body> 67 </html>
index.html 子模板 {% extends 'base.html' %} {% block title %} 首页 {% endblock %} {% block mycss %} <style> #middle{ background-color: deeppink; color: white; font-weight: bold; } .div1{ width: 33%; height: 500px; float: left; border: 1px solid red; } </style> {# /static/<filename> #} <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}"> <!--引入静态文件--> {% endblock %} {% block myjs %} <script> btn = document.getElementById('btn') btn.onclick=function(){ alert('别点我啊！') } </script> {% endblock %} {% block middle %} <div class="div1" id="d1"> </div> <div class="div1"> </div> <div class="div1"> </div> <img src="{{ url_for('static',filename='images/a1.png') }}" alt=""> {% endblock %}
include包含
在A，B，C页面都共同的部分，但是其他页面没有这部分。
这个时候考虑使用include
步骤：
1。先定义一个公共的模板部分,xxx.html
2。谁使用则include过来， {% include '文件夹/xxx.html' %}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>欢迎页面</title> 6 </head> 7 <body> 8 {% include 'common/header.html' %} 9 <div style="background-color: darkseagreen; height: 100px;"></div> 10 </body> 11 </html>
宏
宏：macro
1。把它看作是jinja2的一个函数，这个函数可以返回一个HTML字符串
2。目的：代码可以复用，避免代码冗余
定义两种方式：
1。在模板中直接定义：
类似： macro1.html 中定义方式
2。将所有宏提取到一个模板中：macro.html
谁想使用谁导入：
{% import 'macro.html' as xxx %}
{{ xxx.宏名字(参数) }}
macro.html 单独一个文件放所有宏 {% macro form(action,value='登录',method='post') %} <form action="{{ action }}" method="{{ method }}"> <input type="text" placeholder="用户名" name="username"> <br> <input type="password" placeholder="密码" name="password"> <br> <input type="submit" value="{{ value }}"> </form> {% endmacro %}
macro2.html 另一个文件调用宏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宏的使用2</title> </head> <body> {% import 'macro/macro.html' as func %} {{ func.form('/welcome',value='注册') }} {% set username ='zhangsan' %} //可以设置变量 {{ username }} {% with num=1000 %} {{ num }} {% endwith %} {{ num }} </body> </html>
模板总结：
变量： {{ 变量 }}
块：
{% if 条件 %} ....{% endif %}
{% for 条件 %} ....{% endfor %}
{% block 条件 %} ....{% endblock %}
{% macro 条件 %} ....{% endmacro %}
{% include '' %} 包含
{% import '' %} 导入宏
{% extends '' %}
{{ url_for('static',filename='') }}
{{ hongname(xxx) }}
