静态文件

静态文件，顾名思义，就是那些不会被改变的文件，比如图片，CSS 文件和 JavaScript 源码文件。默认情况下，Flask 在程序根目录中名为 static 的子目录中寻找静态文件。因此，我们一般在应用的包中创建一个叫 static 的文件夹，并在里面放置我们的静态文件。比如，我们可以按下面的结构组织我们的 app：

  1. app/
  2.     __init__.py
  3.     static/
  4.         css/
  5.             style.css
  6.             home.css
  7.             admin.css
  8.         js/
  9.             home.js
  10.             admin.js
  11.         img/
  12.             favicon.co
  13.             logo.svg
  14.     templates/
  15.         index.html
  16.         home.html
  17.         admin.html
  18.     views/
  19.     models/
  20. run.py

但是，我们有时还会应用到第三方库，比如 jQuery, Bootstrap 等，这时我们为了不跟自己的 Javascript 和 CSS 文件混起来，我们可以将这些第三方库放到 lib 文件夹或者 vendor 文件夹，比如下面这种：

  1. static/
  2.     css/
  3.         lib/
  4.             bootstrap.css
  5.         style.css
  6.         home.css
  7.         admin.css
  8.     js/
  9.         lib/
  10.             jquery.js
  11.             chart.js
  12.         home.js
  13.         admin.js
  14.     img/
  15.         logo.svg
  16.         favicon.ico

提供一个 favicon 图标

favicon 是 favorites icon 的缩写，也被称为 website icon（网页图标）、page icon（页面图标）等。通常而言，定义一个 favicon 的方法是将一个名为『favicon.ico』的文件置于 Web 服务器的根目录下。但是，正如我们在上面指出，我们一般将图片等静态资源放在一个单独的 static 文件夹中。为了解决这种不一致，我们可以在站点模板的 部分添加两个 link 组件，比如我们可以在 template/base.html 中定义 favicon 图标：

  1. {% block head %}
  2. {{ super() }}
  3. <link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
  4. <link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
  5. {% endblock %}

在上面的代码中，我们使用了 super() 来保留基模板中定义的块的原始内容，并添加了两个 link 组件声明图标位置，这两个 link 组件声明会插入到 head 块的末尾。