Flask教程-Flask静态文件
静态文件(static files)是指那些不需要动态生成的文件,例如图片、CSS文件和JavaScript脚本等。
在Flask中,我们需要创建一个名为static的文件夹来存放静态文件。这个文件夹应该与程序模块和templates文件夹处于同一目录层级。因此,在项目的根目录下创建static文件夹:
$ mkdir static
生成静态文件的URL
在HTML文件中,引用这些静态文件需要提供文件所在的URL。为了更加灵活,可以使用Flask提供的url_for()
函数生成这些文件的URL。
在第2章的最后,我们学习了url_for()
函数的用法。它接受一个端点值(即视图函数的名称)和参数,并返回对应的URL。对于静态文件,需要将端点值设置为static
,并使用filename
参数传入相对于static文件夹的文件路径。
假设我们在static文件夹的根目录下放置了一个名为foo.jpg的文件,下面的代码可以获取它的URL:
<img src="{{ url_for('static', filename='foo.jpg') }}">
花括号中的url_for()
调用将返回/static/foo.jpg
。
提示:在Python脚本中,需要从flask包中导入url_for()
函数;而在模板中可以直接使用,因为Flask将一些常用的函数和对象添加到了模板的上下文(环境)中。
添加 Favicon
Favicon(favorite icon)是显示在浏览器标签页和书签栏中的网站图标。您需要准备一个ICO、PNG或GIF格式的图片,一般大小为16×16、32×32、48×48或64×64像素。将该图片放置在static目录下,然后在HTML模板中使用以下方式引入它:
templates/index.html: 引入 Favicon
<head>
...
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
保存后刷新页面,即可在浏览器的标签页上看到该图片。
添加图片
为了使页面更加丰富多样,我们将添加两个图片:一个是显示在页面标题旁边的头像,另一个是显示在页面底部的龙猫动图。我们在static目录下创建一个名为images的子文件夹,并将这两个图片放入其中:
shell
$ cd static
$ mkdir images
创建子文件夹并非必需,这里只是为了更好地组织相似类型的文件。同样地,如果您有多个CSS文件,也可以创建一个css文件夹来组织它们。接下来,在页面模板中添加这两个图片,并确保填写正确的文件路径:
templates/index.html: 添加图片
<h2>
<img alt="Avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
{{ name }}'s Watchlist
</h2>
...
<img alt="Walking Totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">
请注意填写正确的文件路径。保存并刷新页面,您将在页面上看到相应的图片。
添加 CSS
虽然已经添加了图片,但是页面仍然非常简单,因为我们还没有添加 CSS 样式定义。在static目录下创建一个CSS文件style.css,并添加以下内容:
static/style.css: 定义页面样式
/* 页面整体 */
body {
margin: auto;
max-width: 580px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
/* 页脚 */
footer {
color: #888;
margin-top: 15px;
text-align: center;
padding: 10px;
}
/* 头像 */
.avatar {
width: 40px;
}
/* 电影列表 */
.movie-list {
list-style-type: none;
padding: 0;
margin-bottom: 10px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.movie-list li {
padding: 12px 24px;
border-bottom: 1px solid #ddd;
}
.movie-list li:last-child {
border-bottom:none;
}
.movie-list li:hover {
background-color: #f8f9fa;
}
/* 图片 */
.totoro {
display: block;
margin: 0 auto;
height: 100px;
}
接下来,在页面的<head>
标签内引入这个CSS文件:
templates/index.html: 引入CSS文件
<head>
...
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
</head>
提示:当您将CSS写入单独的文件后,浏览器会对其进行缓存(对于其他静态文件,比如JavaScript文件也是如此)。从Flask 2.0版本开始,它支持自动重新加载静态文件的变化。如果您仍在使用旧版本的Flask,则在每次更新CSS文件内容后,需要使用以下快捷键清除缓存:
- Google Chrome(Mac):Command + Shift + R
- Google Chrome(Windows和Linux):Ctrl + F5
- Firefox(Mac):Command + Shift + R
- Firefox(Windows和Linux):Ctrl + F5
- Safari:Command + Option + R
最后,为对应的元素设置class
属性值,以与相应的CSS定义关联起来:
templates/index.html: 添加class属性
<h2>
<img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
{{ name }}'s Watchlist
</h2>
...
<ul class="movie-list">
...
</ul>
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">
最终的页面效果如下图所示(您可以根据需要自由修改CSS定义,我尽力了):
本章小结
主页已经基本成形,接下来我们将逐步完成程序的功能。在结束之前,让我们提交代码:
$ git add .
$ git commit -m "Add static files"
$ git push