目录
1.模板继承
一个网站中,大部分网页的模块是重复的,比如顶部的导航栏,底部的备案信息。如果在每个页面中都重复的去写这些代码,会让项目变得臃肿,提高后期维护成本。比较好的做法是,通过模板继承,把一些重复性的代码写在父模板中,子模板继承父模板后,再分别实现自己页面的代码。我们首先来看一个父模板 base.html 的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
</ul>
{% block body %}
{% endblock %}
<footer>这是底部的标签</footer>
</body>
</html>
以上父模板中,编写好了网页的整体结构,并且把所有子模板都需要用到的样式文件base.css也提前引用好了。然后针对子模板需要重写的地方,则定义成了block,比如以上定义了title、head、body、footer这几个block,子模板在继承了父模板后,重写对应block的代码,即可完成子模板的渲染。这里我们用继承 base.html 的方式,实现child1.html 、child2.html文件,代码如下。
child1.html
{% extends "base.html" %}
{% block title %}
我是子模板的标题
{% endblock %}
{% block body %}
我是子模板的body
{% endblock %}
child2.html
{% extends "base.html" %}
{% block title %}
我是child2
{% endblock %}
{% block body %}
我是child2
{% endblock %}
app.py
@app.route("/child1")
def child1():
return render_template("child1.html")
@app.route("/child2")
def child2():
return render_template("child2.html")
效果如下:
2.加载静态文件
@app.route("/static")
def static_demo():
return render_template("static.html")
一个网页中,除了HTML代码以外,还需要CSS、JavaScript 和图片文件才能更加美观和实用。静态文件默认是存放到当前项目的static文件夹中。
在模板文件中,可以通过url_for 加载静态文件,示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{
{ url_for('static',filename='css/style.css') }}">
<script src="{
{ url_for('static',filename='js/my.js') }}"></script>
</head>
<body>
<img src="{
{ url_for('static',filename='images/hlbt.jpg') }}" alt="">
</body>
</html>
第一个参数 static是一个固定的,表示构建Flask内置的static视图这个URL,第二个filename是可以传递文件名或者文件路径,路径是相对于static或者static_folder参数自定义的路径。