The template in Flask can be inherited. Through inheritance, many repetitive elements in the template can be extracted and placed in the parent template. The parent template opens a mouth for the child template by defining a block. The child template implements this block as needed. Suppose now there is a parent template base.html
from flask import Flask,render_template
# static_folder="" 修改static 目录位置
app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True
@app.route("/")
def index():
return render_template("index.html")
@app.route("/list/")
def list_article():
return render_template("list.html")
if __name__ == '__main__':
app.run(debug=True, port=7000)
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
<title> {% block title %}
{% endblock %}</title>
</head>
<body>
{% block header %}
<ul>
<li>首页</li>
<li>课程详情</li>
<li>视频教程</li>
<li>关于我们</li>
</ul>
{% endblock%}
{% block content %}
<h1>这是首页</h1>
{% endblock%}
{% block footer %}
<div class="footer">
这是网站底部
</div>
<!-- 可以嵌套 但是不能重名 -->
{% block foo %}
友情链接
{% endblock %}
{% endblock %}
</body>
</html>
In the above parent template, the elements html, body, etc. that are required for all templates are extracted, and the style file style.css, which is required for all templates, is also extracted, and some child templates need to be rewritten. For example, title, head, and body are all defined as blocks, and then the sub-templates can be implemented according to their own needs.
Subtemplate index.html
{% extends 'base.html' %}
<!-- 不能多继承 -->
{% block title %}
这就是首页
{% endblock %}
<!--重写父模板中的block-->
{% block content %}
<img src="{{ url_for('static',filename='images/demo.jpg') }}" alt="">
<!-- 调用父模板中的block -->
{{ super() }}
这是子模板的首页
<p>今天比昨天更优秀</p>
{% endblock%}
{% block foo %}
foo
{% endblock %}
<!--自己写标签 -->
<!--自己定义的block 不能显示-->
{% block demo %}
<p>这是我自己定义的P标签</p>
{% endblock%}
<p>这是我自己定义的P标签</p>
The first one defines the template inherited by the sub template, and you can see that the sub template implements the title block, and fills the content of the self, then look at the head block, and the super () is used. Function, the function of this function is to execute the code in the template, add the content of the template to the sub-template, if there is no such sentence, then the code in the block of the template in the head will be sub- The code in the template is overwritten.
In addition, the block with the same name cannot appear in the template. If a place needs to use the content of another block, you can use the self.blockname method to introduce it.
In the above example, the h1 tag reuses the content of the title block. The sub-template implements the title block. The h1 tag can also have this value.
In addition, in sub-templates, all text tags and codes must be added to the block inherited from the template. Otherwise, these texts and tags will not be rendered.
Template list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
</head>
<body>
<ul>
<li>首页</li>
<li>课程详情</li>
<li>视频教程</li>
<li>关于我们</li>
</ul>
<h1>这是列表页面</h1>
<img src="{{ url_for('static',filename='images/demo.jpg') }}" alt="">
<div class="footer">
这是网站底部
</div>
</body>
</html>
