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