flask第30篇——巨集macro和import標籤
巨集
是Jinja2
特有的,像Django
則沒有這個。
先新建一個專案macroDemo
:
然後在templates
資料夾中新建index.html
檔案,並在程式碼中返回渲染後的檔案:
然後回到index.html
,現在假設我們要寫一個登入的表單:
程式碼:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>巨集</title>
</head>
<body> <table> <tbody> <tr> <td>賬號</td> <td><input type="text" placeholder="請輸入賬號"></td> </tr> <tr> <td>密碼</td> <td><input type="password" placeholder="請輸入密碼"></td> </tr> <tr> <td></td> <td><input type="submit" value="提交"></td> </tr> </tbody> </table>
</body>
</html>
執行app.py
檔案,看到:
看一下剛才寫的index.html
檔案,每個標籤都傳瞭如type
,placeholder
等屬性,那麼我們可不可以把相同的內容提取出來呢?答案當然是可以,這時候就要用到巨集的概念。
-
定義巨集
{% macro 名稱() %}
程式碼塊
{% endmacro %}
-
呼叫
{{ 巨集名稱() }}
-
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>巨集</title> {% macro input() %} <input type="text"> {% endmacro %} </head> <body> <table> <tbody> <tr> <td>賬號</td> <td>{{ input() }}</td> </tr> <tr> <td>密碼</td> <td>{{ input() }}</td> </tr> <tr> <td></td> <td>{{ input() }}</td> </tr> </tbody> </table> </body> </html>
儲存一下,重新整理頁面看到:
也就是說程式碼已經生效了。其實可以把巨集的名稱()
看成一個函式。
但是現在input
標籤中還有type
、placeholder
等屬性,這個時候就需要給input()
傳引數了:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>巨集</title> {% macro input(type, name, placeholder, value) %}
<input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}"> {% endmacro %}
</head>
<body> <table> <tbody> <tr> <td>賬號</td> <td>{{ input("text", "", "請輸入賬號", "") }}</td> </tr> <tr> <td>密碼</td> <td>{{ input("text", "", "請輸入密碼", "") }}</td> </tr> <tr> <td></td> <td>{{ input("submit", "", "", "提交") }}</td> </tr> </tbody> </table>
</body>
</html>
儲存,然後看到頁面:
當然,下面在傳值的時候也可以用關鍵字引數進行傳遞,比如
{{ input(type="submit", name="", placeholder="", value="提交") }}
效果是一樣的。
如果屬性有預設值,那麼也可以新增預設值:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>巨集</title> {% macro input(type='text', name='', placeholder='', value='') %}
<input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}"> {% endmacro %}
</head>
<body> <table> <tbody> <tr> <td>賬號</td> <td>{{ input(placeholder="請輸入賬號") }}</td> </tr> <tr> <td>密碼</td> <td>{{ input(placeholder="請輸入密碼") }}</td> </tr> <tr> <td></td> <td>{{ input(type="submit", value="提交") }}</td> </tr> </tbody> </table>
</body>
</html>
需要注意的是如果給了預設值,那麼傳參的時候就必須用關鍵字引數
進行傳值了。
也可以將巨集封裝成一個包的形式,在需要使用的時候通過匯入進行呼叫:
我們在template
資料夾下新建資料夾macros
專門存放巨集檔案,並在該資料夾中新建forms.html
檔案。將巨集的定義從index.html
檔案中剪切出來,放到forms.html
檔案中:
{% macro input(type='text', name='', placeholder='', value='') %}
<input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
{% endmacro %}
然後在index.html
中只需要匯入巨集檔案即可。匯入方法:{% import 'macros/forms.html' as forms %}
注意,這裡後面必須要as
,也就是必須給匯入的檔案起個名字。
程式碼:
{% import 'macros/forms.html' as forms %}
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>巨集</title>
</head>
<body> <table> <tbody> <tr> <td>賬號</td> <td>{{ forms.input(placeholder="請輸入賬號") }}</td> </tr> <tr> <td>密碼</td> <td>{{ forms.input(placeholder="請輸入密碼") }}</td> </tr> <tr> <td></td> <td>{{ forms.input(type="submit", value="提交") }}</td> </tr> </tbody> </table>
</body>
</html>
儲存以後回到頁面,可以看到效果不變。
現在forms.html
檔案中只有一個巨集定義,如果是多個的時候,比如把froms.html
改為:
{% macro input(type='text', name='', placeholder='', value='') %}
<input type="{{ type }}", name="{{ name }}", placeholder="{{ placeholder }}", value="{{ value }}">
{% endmacro %} {% macro textarea(name="", cols="", rows="") %}
<textarea name="{{ name }}", cols="{{ cols }}", rows="{{ rows }}"></textarea>
{% endmacro %}
這時候在index.html
匯入就要用:{% from 'macros/forms.html' import input %}
或者{% from 'macros/forms.html' import input as input_field%}
程式碼:
{% from 'macros/forms.html' import input %}
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>巨集</title>
</head>
<body> <table> <tbody> <tr> <td>賬號</td> <td>{{ input(placeholder="請輸入賬號") }}</td> </tr> <tr> <td>密碼</td> <td>{{ input(placeholder="請輸入密碼") }}</td> </tr> <tr> <td></td> <td>{{ input(type="submit", value="提交") }}</td> </tr> </tbody> </table>
</body>
</html>
執行以後頁面顯示效果不變。如果現在要把兩個巨集都匯入,那就只需要:
{% from 'macros/forms.html' import input, textarea %}
或者{% from 'macros/forms.html' import input as input_field, textarea%}
如果用下面這種方式,就要把input as input_field
看做一個整體。