在子模板中,我们可以对父模板中的块进行2种操作 覆盖内容 和 追加内容。
覆盖内容
当在子模板里创建同名块时,会使用子块的内容覆盖父块的内容。
追加内容
如果想要向基模板中的块追加内容,需要通过super()函数进行声明,这会向父块添加内容。
例如向style块添加样式
{% block styles %} {{ super() }} <style> .foo{ color:red; } </style> {% endblock %}
运行app,打开index页面,渲染后的HTML代码如下
可以看到子模板成功追加了style内容。
加载静态文件
一个Wen项目往往有很多静态文件,如CSS,Javascript文件、img等等。在Flask中默认我们把需要的静态文件存储在与主脚本同级的static文件夹里。
为了在HTML中引用静态文件,我们需要用url_for()函数来获取静态文件的URL。Flask内置了用于获取静态文件的视图函数,端点值为static,它的默认URL规则为static/<path:filename>,URL变量filename是相对于static文件夹根目录下的文件路径。
在index.html文件{% content %}内添加
<img src="{{ url_for('static',filename='cat.jpg') }}">
运行app打开index页面
小喵咪出现~
在模板中添加以下代码,加载CSS文件
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
注意不要添加错了,一般添加到基模板或者其他要渲染成HTML的文件里,之前没注意添加到子模板里结果向子模板加载了css文件,结果页面没变化。
添加Favicon
我们经常会在命令行看到一个404状态的GET请求,请求的URL为/favicon.ico
也就是这个红色的图标。也可以叫做网站头像。
要想添加favicon,先要把favicon图片放置到static下。除了ico格式外PNG和不会动的GIF也行。在<head>部分下添加
<link rel="icon" type="image/x_icon" href="{{ url_for('static', filename='favicon.png') }}">
即可
一般选择16X16的图片比较好。