30 模板繼承詳解 · Flask notebook

# 30 模板繼承詳解 ## 為什么需要繼承模板: 模板繼承可以把一些公用的代碼單獨抽取出來放到一個父模板中，以后子模板直接就可以使用了。這樣可以重復性的代碼，以后修改起來比較方便 ## 模板繼承語法: 使用"extends"語句，來指明繼承的父模板，父模板的路徑，也是相對于'templates'文件夾下的絕對路徑。示例代碼如下: ```text {% extends "base.html" %} ``` ## block語法在父模板中，只能定義一些公共的代碼。子模板可能要根據具體的需要實現不同的代碼，這時候父模板就應該有能力提供一個借口，讓父模板來實現，從而實現具體業務需求的功能。在父模板中: ```text {% block block的名字 %} {% endblock %} ``` 在子模板中 ```text {% block block的名字 %} 子模板的代碼 {% endblock%} ``` ## 調用父模板代碼block中的代碼默認情況下，子模板如果實現了父模板定義的block，那么子模板block中的代碼就會覆蓋掉父模板的代碼。如果想要在子模板中仍然保持父模板中的代碼，那么可以使用""來實現。 ```text {% block body_block %} <p style="background-color:red;"> 這是父模板的代碼 </p> {% endblock %} {% extends "base.html"%} {% block body_block %} {{super()}} <p style="background:pink;"> 我是子模板中的代碼 </p> {% endblock %} ``` ## 調用另外一個block中的代碼如果想要在另外一個模板中使用其他模板中的代碼。那么可以通過""就可以了。示例代碼如下: ```text {% block title %} miku {% endblock %} {% block body_block %} {{super()}} {{self.title()}} <p style="background:pink;">我是子模版中的代碼</p> ``` ## 其他注意事項 1. 子模板中的代碼，第一行，應該是"extends" 2. 子模板中，如果要實現自己的代碼，應該放到block中。如果放到其他地方，則不會被渲染 ```text app.py from flask import Flask, render_template app = Flask(__name__) app.config.update({ "TEMPLATES_AUTO_RELOAD":True, "DENUG":True, }) @app.route("/") def hello_word(): return render_template("index.html") @app.route("/list/") def my_list(): return render_template("course_detail.html") if __name__ == '__main__': # app.run(debug=True) app.run(host="0.0.0.0") ``` ```text base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> <style> .nav ul{ overflow: hidden; } .nav ul li{ float: left; margin: 0 20px; } </style> </head> <body> <nav class="nav"> <ul> <li>首頁</li> <li>課程詳情</li> <li>視頻教程</li> <li>關于我們</li> <li>{{ username }}</li> </ul> </nav> {% block body_block %} <p style="background:red;">這是父模板的代碼</p> {% endblock %} <footer> 這是底部 </footer> </body> </html> ``` ```text course_detail.html {% extends 'base.html' %} {% block body_block %} 課程詳情代碼 {% endblock %} ``` ```text index.html {% extends 'base.html' %} {% block title %} miku {% endblock %} {% block body_block %} {{ super() }} {{ self.title() }} <p style="background:pink;">我是子模板中的代碼</p> {% endblock %} ```