Flask08 包含（include）、繼承（extends）、宏？？？、模板中變量的來源
阿新 • • 發佈：2017-09-21
自己 weight es2017 static out btn query range turn 
1 包含
直接把另一個文件的內容，復制粘貼過來
{% include "模板路徑" %}
註意：模板都是放在 templates 這個文件夾下面的，可以在裏面新建文件夾來進行分離；
例如：{% include "include/header.html" %}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試頁面</title> </head> <body>header模板
</body> </html>footer模板
<div> <h2>這是測試包含時的內容</h2> </div>content模板
{% include "include/header.html" %}
{% include "include/content.html" %}
{% include "include/footer.html" %}
整合模板
from flask import Blueprint from flask import render_template bp_test = Blueprint(‘test‘, __name__) @bp_test.route(‘/test/‘) def bpTest(): return ‘test 頁面‘ @bp_test.route(‘/include/‘) def bpInclude(): return render_template(‘include/test.html‘)藍圖代碼
from flask import Flask from flask import url_for from bp_include import bp_test # from bp_extends import bp_extends app = Flask(__name__) app.register_blueprint(bp_test) # app.register_blueprint(bp_extends) @app.route(‘/‘) def hello_world(): return ‘Hello World!‘ print(app.url_map)python代碼if __name__ == ‘__main__‘: app.run(debug=True)
2 繼承
跟java裏面的繼承很像；但是可以在模板中挖坑，在子模板中填坑；也可以在子模板中進行挖坑
2.1 繼承格式
{% extends “模板路徑” %}
註意：繼承語句只能寫在模板的開始位置，而且寫了繼承語句的模板只能進行填坑或者挖坑操作
2.2 填坑和挖坑的格式
{% block 坑名 %}
{% endblock 坑名 %}
2.3 小技巧
如果要局部修改，在坑裏面再挖坑
如果要保留負模版坑的內容，又加點新東西使用 {{ super() }}，在寫上需要添加的東西
3 構建自己的網頁結構
利用 bootstrap 構建自己的網頁結構
3.1 下載 bootstrap 相關文件
bootstrap中文官網：點擊前往
3.2 下載 bootstrap 的依賴框架
jquery官網：點擊前往
3.3 將下載到的bootstrap文件和jquery文件全部拷貝到static文件中
3.4 創建一個html模板 base.html 作為基礎模板
base.html 文件的作用：引入所有需要用到的公共的靜態文件
<!DOCTYPE html> {# base.html 文件的作用：引入所有需要用到的公共的靜態文件 #} <html lang="en"> <head> {% block head %} <meta charset="UTF-8"> <title> {% block title %} base模板 {% endblock title %} </title> <script src="{{ url_for(‘static‘, filename=‘js/jquery-3.2.1.js‘) }}"></script> <script src="{{ url_for(‘static‘, filename=‘js/bootstrap.js‘) }}"></script> <link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/bootstrap.css‘) }}" /> {% endblock head %} </head> <body> {% block body %} 這是base模板的body {% endblock body %} </body> </html>base.html
註意：<script src="{{ url_for(‘static‘, filename=‘js/jquery-3.2.1.js‘) }}"></script>
能夠在模板中使用 url_for 方法的原理是flask已經對 Jinja2 模板進行了一些初始化配置
3.5 根據 base.html 創建一個網頁布局模板 layout.html
{% extends "extends/base.html" %}
{# 繼承只能繼承一個，而且必須寫在最前面；但是可以在父模板挖坑，也可以在子模板中填坑和挖坑；
註意：填坑和挖坑的語法都是一樣的
#}
{% block title %}
layout模板
{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/layout.css‘) }}" />
{% endblock %}
{% block body %}
layout模板的body
<div id="nav">
這是導航條
</div>
<div id="content">
{% block content %}
這是內容
{% endblock content %}
</div>
<div id="footer">
這是頁腳
</div>
{% endblock body %}
layout.html
3.6 根據 layout.html 創建一個頁面 index.html
{% extends "extends/layout.html" %} {% block title %} 首頁 {% endblock %} {% block head %} {{ super() }} <link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/index.css‘) }}" /> {% endblock %} {% block content %} <ul> {% for name in ["warrior", "fury", "zeus"] %} <li> {{ name }} </li> {% endfor %} </ul> <hr /> <button class="btn btn btn-default">點擊</button> <hr /> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> {% endblock content %}index.html
3.7 使用自己寫的頁面 index.html
from flask import Blueprint from flask import render_template bp_extends = Blueprint(‘extends‘, __name__, url_prefix=‘/extends‘) @bp_extends.route(‘/base/‘) def ex_base(): return render_template(‘extends/base.html‘) @bp_extends.route(‘/layout/‘) def ex_layout(): return render_template(‘extends/layout.html‘) @bp_extends.route(‘/index/‘) def ex_index(): return render_template(‘extends/index.html‘)藍圖代碼
from flask import Flask from flask import url_for # from bp_include import bp_test from bp_extends import bp_extends app = Flask(__name__) # app.register_blueprint(bp_test) app.register_blueprint(bp_extends) @app.route(‘/‘) def hello_world(): return ‘Hello World!‘ print(app.url_map) if __name__ == ‘__main__‘: app.run(debug=True)python代碼
3.8 項目文件圖
4 宏
待更新...
5 模板中變量的來源
flask的全局變量
Flask對象的上下文處理器
藍圖的上下文處理器
Jinja2的全局函數
自己設置的變量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試模板</title> </head> <body> <h2>這裏是測試模板的內容</h2> <hr /> <h4>range函數</h4> {% for foo in range(10) %} <li>{{ foo }}</li> {% endfor %} <hr /> <h4>自動填充函數</h4> {{ lipsum(n=3, html=true, min=20, max=100) }} <hr /> <h4>cycler函數</h4> <p> {% set row_class = cycler("warrior", "fury", "zeus") %} {{ row_class.next() }} {# 輸出當前值，指向下一個#} <br /> {{ row_class.current }} {# 輸出當前值，指向不變#} <br /> {{ row_class.reset() }} {# 輸出None，指向第一個#} <br /> {{ row_class.current }} </p> </body> </html>html模板
from flask import Blueprint from flask import render_template bp_test = Blueprint(‘test‘, __name__, url_prefix=‘/test‘) @bp_test.route(‘/test/‘) def test(): return render_template(‘test.html‘)藍圖代碼
from flask import Flask from flask import url_for # from bp_include import bp_test # from bp_extends import bp_extends from bp_test import bp_test app = Flask(__name__) # app.register_blueprint(bp_test) # app.register_blueprint(bp_extends) app.register_blueprint(bp_test) @app.route(‘/‘) def hello_world(): return ‘Hello World!‘ print(app.url_map) if __name__ == ‘__main__‘: app.run(debug=True)python代碼
Flask08 包含（include）、繼承（extends）、宏？？？、模板中變量的來源