静态文件

Static files

顾名思义，静态文件就是那些不会改变的文件。在一般的应用程序中，静态文件包括 CSS 文件，JavaScript 文件以及图片。它们也可能是音频文件以及其它类似的东西。

组织你的静态文件

我们将会在我们的应用程序包里为我们的静态文件创建一个叫做 static 的目录。

  1. myapp/
  2.     __init__.py
  3.     static/
  4.     templates/
  5.     views/
  6.     models.py
  7. run.py

在 static/ 中如何组织你的文件是取决于个人喜好。就我个人而言，我会对第三方的库（比如，jQuery， Bootstrap等等）混在我们自己的 JavaScript 和 CSS 文件里感到困扰。为了避免这个，我建议把第三方库分离到相应目录里一个 lib/ 文件夹。一些项目使用 vendor/ 来代替 lib/。

  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.         home.js
  12.         admin.js
  13.     img/
  14.         logo.svg
  15.         favicon.ico
### 添加一个 favicon 在我们静态目录的文件是可以通过 _example.com/static/_ 访问的。默认情况下，网页浏览器以及其它软件期望我们的 favicon 是在 _example.com/favicon.ico_。为了解决这个矛盾，我们在网站模板中的 <head> 部分添加如下的内容。 
  1. <link rel="shortcut icon"
  2.     href="{{ url_for('static', filename='img/favicon.ico') }}">
## 使用 Flask-Assets 管理静态资源 Flask-Assets 是一个用来管理你的静态文件的扩展。Flask-Assets 提供了两个非常有用的工具。首先，它可以让你们在 Python 代码中定义资源的 **束/包（bundles）**，这些束/包（bundles）能够被一起插入到你的模板。其次，它可以让你们 **预处理（pre-process）** 这些文件。这就意味着你们能够合并和压缩你们的 CSS 和 JavaScript 文件，使得用户仅仅只需要加载两个压缩的文件（CSS 和 JavaScript），而不需要迫使你开发一个复杂的资源管道。你甚至可以编译来自 Sass, LESS, CoffeeScript 以及一堆其它来源的文件。 
  1. static/
  2.     css/
  3.         lib/
  4.             reset.css
  5.         common.css
  6.         home.css
  7.         admin.css
  8.     js/
  9.         lib/
  10.             jquery-1.10.2.js
  11.             Chart.js
  12.         home.js
  13.         admin.js
  14.     img/
  15.         logo.svg
  16.         favicon.ico
### 定义束/包（bundles） 我们的应用程序有两个部分：公共站点和管理面板，在我们的应用程序中分别称为 "home" 和 "admin"。我们将定义四个束/包（bundles）：为每一部分定义一个 JavaScript 和 CSS 束/包。我们将把它们放在我们的 util 包里的一个 assets 模块里。 
  1. # myapp/util/assets.py
  2.  
  3. from flask.ext.assets import Bundle, Environment
  4. from .. import app
  5.  
  6. bundles = {
  7.  
  8.     'home_js': Bundle(
  9.         'js/lib/jquery-1.10.2.js',
  10.         'js/home.js',
  11.         output='gen/home.js),
  12.  
  13.     'home_css': Bundle(
  14.         'css/lib/reset.css',
  15.         'css/common.css',
  16.         'css/home.css',
  17.         output='gen/home.css),
  18.  
  19.     'admin_js': Bundle(
  20.         'js/lib/jquery-1.10.2.js',
  21.         'js/lib/Chart.js',
  22.         'js/admin.js',
  23.         output='gen/admin.js),
  24.  
  25.     'admin_css': Bundle(
  26.         'css/lib/reset.css',
  27.         'css/common.css',
  28.         'css/admin.css',
  29.         output='gen/admin.css)
  30. }
  31.  
  32. assets = Environment(app)
  33.  
  34. assets.register(bundles)

Flask-Assets 按照它们被列出的次序来合并你的文件。如果 admin.js 需要 jquery-1.10.2.js 的话，确保 jquery 列在最前面。

为了更容易地注册，我们定义束/包在一个目录里。Flask-Assets 内部使用的 webassets 包让我们可以用多种方式来注册束/包（bundles），包括像我们在上面代码段中传入一个字典。[1]

因为我们在 util.assets 中注册了我们的束/包（bundles），所有我们必须要做的就是在我们的应用程序初始化后在 _init.py_ 中导入 assets。

  1. # myapp/__init__.py
  2.  
  3. # [...] Initialize the app
  4.  
  5. from .util import assets
### 使用我们的束/包（bundles） 要使用我们的 “admin” 束/包（bundles），我们需要在 “admin” 部分的父模板：_admin/layout.html_ 中插入它们。 
  1. templates/
  2.     home/
  3.         layout.html
  4.         index.html
  5.         about.html
  6.     admin/
  7.         layout.html
  8.         dash.html
  9.         stats.html
  1. {# myapp/templates/admin/layout.html #}
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.     <head>
  6.         {% assets "admin_js" %}
  7.             <script type="text/javascript" src="{{ ASSET_URL }}"></script>
  8.         {% endassets %}
  9.         {% assets "admin_css" %}
  10.             <link rel="stylesheet" href="{{ ASSET_URL }}" />
  11.         {% endassets %}
  12.     </head>
  13.     <body>
  14.     {% block body %}
  15.     {% endblock %}
  16.     </body>
  17. </html>

我们可以按照上面的方式在 “home” 部分的 templates/home/layout.html 中插入 “home” 束/包（bundles）。

使用过滤器

我们可以使用过滤器来预处理（pre-process）我们的静态文件。这是特别地方便用于压缩我们的 JavaScript 和 CSS 束/包（bundles）。

  1. # myapp/util/assets.py
  2.  
  3. # [...]
  4.  
  5. bundles = {
  6.  
  7.     'home_js': Bundle(
  8.         'lib/jquery-1.10.2.js',
  9.         'js/home.js',
  10.         output='gen/home.js',
  11.         filters='jsmin'),
  12.  
  13.     'home_css': Bundle(
  14.         'lib/reset.css',
  15.         'css/common.css',
  16.         'css/home.css',
  17.         output='gen/home.css',
  18.         filters='cssmin'),
  19.  
  20.     'admin_js': Bundle(
  21.         'lib/jquery-1.10.2.js',
  22.         'lib/Chart.js',
  23.         'js/admin.js',
  24.         output='gen/admin.js',
  25.         filters='jsmin'),
  26.  
  27.     'admin_css': Bundle(
  28.         'lib/reset.css',
  29.         'css/common.css',
  30.         'css/admin.css',
  31.         output='gen/admin.css',
  32.         filters='cssmin')
  33. }
  34.  
  35. # [...]

Note

要使用 jsmin 和 cssmin 过滤器，你需要安装 jsmin 和 cssmin 包（例如，使用 pip install jsmin cssmin）。确保也在 requirements.txt 中添加它们。

Flask-Assets 在模板第一次被渲染的时候会合并和压缩我们的文件，并且在其中一个源文件发生变化的时候会自动地更新压缩文件。

Note

如果在你的配置中设置 ASSETS_DEBUG = True，Flask-Assets 将会输出每一个源文件而不是合并它们。

Note

看看我们在 Flask-Assets 中可以使用的一些 其它的过滤器。

摘要

  • 静态文件在 static/ 目录里。
  • 从你们自己的静态文件中分离出第三方库。
  • 在模板中指定你的 favicon 位置。
  • 使用 Flask-Assets 在你的模板中插入静态文件。
  • Flask-Assets 可以编译，合并和压缩你的静态文件。
    |[1]|我们可以在 源码 中看看如何进行捆绑注册。

原文: https://github.com/sixu05202004/explore-flask-cn/blob/master/zh_CN/static.rst