Skip to content

Commit 6acfa01

Browse files
committed
Update 4~8 chapters
1 parent 1886f42 commit 6acfa01

5 files changed

Lines changed: 192 additions & 130 deletions

File tree

chapters/4-static.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
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

Comments
 (0)