静态文件(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

标签: flask教程, flask技术, flask学习, flask学习教程, flask下载, flask开发, flask入门教程, flask进阶教程, flask高级教程, flask面试题, flask笔试题, flask编程思想