22
33静态文件(static files)和我们的模板概念相反,指的是内容不需要动态生成的文件。比如图片、CSS 文件和 JavaScript 脚本等。
44
5- 在 Flask 中,我们需要创建一个 static 文件夹来保存静态文件,它应该和程序模块、templates 文件夹在同一目录层级,所以我们在项目根目录创建它:
5+ 在 Flask 中,我们需要创建一个 static 文件夹来保存静态文件,它应该和程序模块(app.py) 、templates 文件夹在同一目录层级,所以我们在项目根目录创建它:
66
77``` bash
88$ mkdir static
@@ -13,17 +13,17 @@ $ mkdir static
1313
1414在 HTML 文件里,引入这些静态文件需要给出资源所在的 URL。为了更加灵活,这些文件的 URL 可以通过 Flask 提供的 ` url_for() ` 函数来生成。
1515
16- 在第 2 章的最后,我们学习过 ` url_for() ` 函数的用法,传入端点值(视图函数的名称)和参数,它会返回对应的 URL。对于静态文件,需要传入的端点值是 ` static ` ,同时使用 ` filename ` 参数来传入相对于 static 文件夹的文件路径。
16+ 在第 2 章的最后,我们学习过 ` url_for() ` 函数的用法,传入端点值(视图函数的名称)和参数,它会返回对应的 URL。对于静态文件,需要传入的端点值为 ` static ` ,同时使用 ` filename ` 参数来传入相对于 static 文件夹的文件路径。
1717
18- 假如我们在 static 文件夹的根目录下面放了一个 foo.jpg 文件,下面的调用可以获取它的 URL:
18+ 假设我们在 static 文件夹的根目录下面放了一个 foo.jpg 文件,下面的调用可以获取它的 URL:
1919
2020``` jinja2
2121<img src="{{ url_for('static', filename='foo.jpg') }}">
2222```
2323
2424花括号部分的调用会返回 ` /static/foo.jpg ` 。
2525
26- > ** 提示** 在 Python 脚本里,` url_for() ` 函数需要从 ` flask ` 包中导入,而在模板中则可以直接使用,因为 Flask 把一些常用的函数和对象添加到了模板上下文 (环境)里。
26+ > ** 提示** 在 Python 脚本里,` url_for() ` 函数需要从 ` flask ` 包中导入,而在模板中则可以直接使用,因为 Flask 自动把一些常用的函数和对象添加到了模板上下文 (环境)里。
2727
2828
2929## 添加 Favicon
@@ -44,14 +44,14 @@ Favicon(favourite icon) 是显示在标签页和书签栏的网站头像。
4444
4545## 添加图片
4646
47- 为了让页面不那么单调,我们来添加两个图片:一个是显示在页面标题旁边的头像,另一个是显示在页面底部的龙猫动图。我们在 static 目录下面创建一个子文件夹 images,把这两个图片都放到这个文件夹里:
47+ 为了让页面不那么单调,我们来添加两个图片:一个是显示在页面标题旁边的头像,另一个是显示在页面底部的龙猫动图。在 static 目录下面创建一个子文件夹 images,把这两个图片都放到这个文件夹里:
4848
4949``` bash
5050$ cd static
5151$ mkdir images
5252```
5353
54- 创建子文件夹并不是必须的,这里只是为了更好的组织同类文件。同样的 ,如果你有多个 CSS 文件,也可以创建一个 css 文件夹来组织他们 。下面我们在页面模板中添加这两个图片,注意填写正确的文件路径:
54+ 创建子文件夹并不是必须的,这里只是为了更好的组织同类文件。类似地 ,如果你有多个 CSS 文件,也可以创建一个 css 文件夹来组织它们 。下面我们在页面模板中添加这两个图片,注意填写正确的文件路径:
5555
5656* templates/index.html:添加图片*
5757
@@ -135,7 +135,7 @@ footer {
135135</head >
136136```
137137
138- > ** 提示** 当你把 CSS 写到单独的文件后,浏览器获取到这个文件后会对其进行缓存(其他静态文件同理,比如 JavaScript 文件)。Flask 从 2.0 版本开始支持自动重载静态文件的变化 ,如果你使用的仍然是旧版本的 Flask,那么每当你对 CSS 文件的内容进行更新后,都需要使用下面的快捷键清除缓存:
138+ > ** 提示** 当你把 CSS 写到单独的文件后,浏览器获取到这个文件后会对其进行缓存(其他静态文件同理,比如 JavaScript 文件)。Flask 从 2.0 版本开始支持自动重载静态文件 ,如果你使用的仍然是旧版本的 Flask,那么每当你对 CSS 文件的内容进行更新后,都需要使用下面的快捷键清除缓存:
139139>
140140> - Google Chrome(Mac):Command + Shift + R
141141> - Google Chrome(Windows & Linux):Ctrl + F5
@@ -174,8 +174,6 @@ $ git commit -m "Add static files"
174174$ git push
175175```
176176
177- > ** 提示** 你可以在 GitHub 上查看本书示例程序的对应 commit:[ e51c579] ( https://github.com/helloflask/watchlist/commit/e51c579735ae837824f10af5c1b7d454014d3c59 ) 。
178-
179177
180178## 进阶提示
181179
0 commit comments