1 模板包含include 主體結構 (導入整個模板,直接渲染不可修改) {% include('模板名稱') %} {% include('目錄/模板名稱') %} 功能: 其功能就是將另一個模板載入到當前模板中，並直接渲染在當前位置上,而且是一次渲染整個模塊內容 註意: 當include模板文件 ...
1 模板包含include
主體結構(導入整個模板,直接渲染不可修改)
{% include('模板名稱') %}
{% include('目錄/模板名稱') %}
功能: 其功能就是將另一個模板載入到當前模板中，並直接渲染在當前位置上,而且是一次渲染整個模塊內容
#導入頭部header.html
{% include 'header.html' %}
主體內容
#導入底部footer.html
{% include 'footer.html' %}
#忽略模板文件不存在時的錯誤
{% include 'footer.html' ignore missing %}
#也可以組成模板列表,會按照順序依次載入
{% include ['footer.html','bottom.html','end.html'] ignore missing %}註意:當include模板文件不存在時,程式會拋出異常,加上ignore missing關鍵字可以忽略不存在時的異常.
2 巨集(macro)
概念 : Jinja2中巨集的功能類似python中函數定義,分為聲明與調用兩個部分
(1) 巨集的定義
主體結構
{% macro 巨集的名稱([參數...s]) %}
巨集的主體
{% endmacro %}
巨集的調用
{{ 巨集的名稱[參數列表] }}
(2) 巨集的實例1
templates/common/formmacro.html
{% macro input(type='text',name='',value='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}先導入後調用
{% import 'common/formmacro.html' as formmacro %}
<form action=''>
<p>用戶名:{{ formmacro.input(name='uername') }}</p>
<p>密碼:{{ formmacro.input('password','userpass') }}</p>
<p>性別:
{{ formmacro.input('radio','sex',1) }} 男
{{ formmacro.input('radio','sex',0) }} 女
</p>
<p>{{ formmacro.input('submit',value='submit') }}</p>
</form>(3) 巨集的實例2
#定義一個users巨集,輸出user.name caller(user.gender)傳遞參數
{% macro list_users(users) -%}
<table>
{%- for user in users %}
<tr><td>{{ user.name |e }}</td>{{ caller(user.gender) }}</tr>
{%- endfor %}
</table>
{%- endmacro %}
#調用巨集,{{ caller(user.gender) }}”部分被調用者”{% call(gender) %}”語句塊內部的內容替代
{% call(gender) list_users(users) %}
<td>
{% if gender == 'M' %}
<img src="{{ url_for('static', filename='img/male.png') }}" width="20px">
{% else %}
<img src="{{ url_for('static', filename='img/female.png') }}" width="20px">
{% endif %}
</td>
<td><input name="delete" type="button" value="Delete"></td>
{% endcall %}(4)import 導入:(針對導入巨集或者自定義的巨集)
import ....as....
{% import 'common/formmacro.html' as formmacro %}
如果index.html和formmacro同級 可以直接導入
{% import 'formmacro.html' as formmacro %}from ... import as
{% from 'common/formmacro.html' import input %} #從包導入巨集
{% from 'common/formmacro.html' import input as form %} #從包導入巨集並重命名註意:
- 不能在巨集定義的上方去調用
- 巨集如果存在形參 如果不傳實參 則行參的值為空 也不會報錯
- 在給形參預設值的時候 必須遵循預設值的規則 幽預設值的放在後面 和 python的函數一樣
(5) 巨集的內部變數
varargs : 這是一個列表。如果調用巨集時傳入的參數多於巨集聲明時的參數，多出來的沒指定參數名的參數就會保存在這個列表中。
kwargs : 這是一個字典。如果調用巨集時傳入的參數多於巨集聲明時的參數，多出來的指定了參數名的參數就會保存在這個字典中。
{% macro input(name, type='text', value='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value|e }}">
<br /> {{ varargs }}
<br /> {{ kwargs }}
{% endmacro %}
<p>{{ input('submit', 'submit', 'Submit', 'more arg1', 'more arg2', ext='more arg3') }}</p>3 塊(block)
主體結構:一般結合繼承使用,用於填充block塊
{% extend ‘parent.html’ %}
{% block block_name %}
{% endblock 塊名%}註意:
- 模板不支持多繼承，也就是子模板中定義的塊，不可能同時被兩個父模板替換。
- 模板中不能定義多個同名的塊，子模板和父模板都不行，這樣無法知道要替換哪一個部分的內容。
(1) 保留父模板中的內容採用 super( )方法
python #父模板中設置好塊 <head> {% block head %} <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <title>{% block title %}{% endblock %}</title> {% endblock head%} </head> <body> <div class="page"> {% block content %} {% endblock %} </div> </body>python {% block title %}首頁{% endblock %} {% block head %} {{ super() }} #繼承父類保持父類不變 <style type="text/css"> h1 { color: #336699; } </style> {% endblock %}註: 父模板與子模板中都有head塊,運行時,父模板中的塊先被載入,而後是子模板的塊head
(2) 塊內語句的作用域
預設情況下,塊內語句是無法訪問塊作用域外的變數
#父模板中
{% for item in range(5) %}
<li>{% block list %}{% endblock %}</li>
{% endfor %}
#子模板繼承
{% block list %}
<p>{{ item }}</p>
{% endblock %}
#此時子模板是無法獲取到父模板中 list塊中的內容,即列印為空如果你想在塊內訪問這個塊外的變數，你就需要在塊聲明時添加scoped關鍵字
#父模板中添加 scoped 關鍵字
{% for item in range(5) %}
<li>{% block list scoped %}{% endblock %}</li>
{% endfor %}
#子模板繼承
{% block list %}
<p>{{ item }}</p>
{% endblock %}
#此時item能獲取到 0,1,2,3,44 模板的繼承
主體架構
{% extends '繼承的模板名稱' %}
{% block 替換的名稱 %}
{% endblock %}
自定義一個基類模板base.html
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title> #title塊
{% block meta %}{% endblock %}
<style>
{% block style %} #css樣式塊
*{color:red;}
{% endblock %}
</style>
{% block link %}{% endblock %} #外聯樣式塊
</head>
{% endblock %}
<body>
{% include 'common/header.html' %} #頁面導入
{% block content %}
{% endblock %}
{% include 'common/footer.html' %} #頁面導入
</body>
</html>使用index.html繼承父類
{% extends 'common/base.html' %} #繼承父類模板
{% block title %}首頁{% endblock %}
{% block style %}
{# 調用基礎模板內的樣式 如果不調用則全部被覆蓋 #}
{{ super() }}
p{font-size:20px;}
{% endblock %}
{% block content %}
我是中間的內容部分
{% endblock %}註意：
- 在替換的外部的填寫的內容 不會被顯示出來
- 如果在替換某一個block的時候 替換以後所有的樣式消失 則去查看是否有調用super()
