Flask学习_3

在子模板中,我们可以对父模板中的块进行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的图片比较好。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章