flask模板应用-加载静态文件：添加Favicon，使用CSS框架，使用宏加载静态资源

加载静态文件

一个Web项目不仅需要HTML模板，还需要许多静态文件，比如CSS、JavaScript文件、图片和声音声。在flask程序中，默认需要将静态文件存储在与主脚本（包含程序实例的脚本）同级目录的static文件夹中。

为了在HTML文件中引用静态文件，我们需要使用url_for()函数获取静态文件的URL。flask内置了用于获取静态文件的视图函数，端点值为static，它的默认URL规则为/static/<path: filename>，URL变量filename是相对于文件夹根目录的文件路径。

如果需要使用其他文件夹来存储静态文件，可以在实例化flask类时使用static_folder参数指定，静态文件的URL路径中的static也会自动跟随文件夹名称变化。在实例化flask类时用static_url_path参数可以自定义静态文件的URL路径。

在程序的static目录下存一张图片，例如qq.jpg，我们可以通过url_for(‘static’, filename=’qq.jpg’)获取这个文件的URL,这个函数调用生成的url为/static/qq.jpg，在浏览器中输入127.0.0.1:5000/qq.jpg即可访问这个图片。

在模板watchlist.html里，我们在用户名的左侧添加这个图片，使用url_for()函数生成图片src属性所需的图片URL:

<img src="{{ url_for('static', filename='qq.jpg') }}" width="50">

在浏览器中访问http://127.0.0.1:5000/watchlist，可以看到添加的图片

添加Favicon

在运行flask程序时经常在命令行看到一条404状态的GET请求，请求的URL为/favicon.ico，例如：

127.0.0.1 - - [01/Mar/2019 21:27:26] "GET /favicon.ico HTTP/1.1" 404 -

这个favicon.ico文件指的是Favicon（favorite icon，收藏夹头像/网站头像），这时一个在浏览器标签页、地址栏和书签收藏夹等处显示的小图标，作为网站的特殊标记。浏览器在发起请求时，会自动向根目录请求这个文件，在前面的实例程序中，我们没有提供这个文件，所以会产生404记录。

要向为Web项目添加Favicon，要现有一个Favicon文件，并放置在static目录下，它通常是一个宽高相同的ICO格式文件，命名为favicon.ico。

flask中静态文件默认路径为/static/filename，为了正确返回favicon，可以显示地在HTML页面中声明favicon的路径。首先可以在<head>部分添加一个<link>元素，然后将rel属性设置为icon：

<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">

使用CSS框架

在编写Web程序时，手动编写CSS比较麻烦，更常见的做法是使用CSS框架来为程序添加样式。CSS框架内置了大量可以直接使用的CSS样式类和javaScript函数，使用它们可以非常快速的让程序页面变得没关和易用，同时我们也可以定义自己的CSS文件来进行补充和调整。

Bootstrap是最流行的开源前端框架之一，它有浏览器支持广泛、响应式设计等特点。使用它可以快速搭建没关、现代的网页。

通常情况下，CSS和javaScript的资源引用会在基模板中定义，如：

{% block styles %}

    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">

{% endblock %}

...

{% block scripts %}

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}}"></script>>

    <script src="{{ url_for('static', filename='js/popper.min.js') }}}"></script>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

{% endblock %}

...

如果不使用Bootstrap提供的javascript功能，也可以不加载。

Bootstrap所依赖的jQuery和popper.js需要单独下载，这三个javaScript文件在引入时要按照jQeury->popper.js->Bootstrap的顺序引入

如果下简化开发过程，也可以从CDN加载，这很方便。

才能够CDN夹杂时，只下将相应的URL替换我CDN提供的资源URL，如：

{% block styles %}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

{% endblock %}

...

{% block scripts %}

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

{% endblock %}

...

使用宏加载静态资源

为了方便加载静态资源，我们可以创建一个专门用于加载静态资源的宏，如：

{% macro static_file(type, filename_or_url, local=True) %}

    {% if local %}

        {% set filename_or_url = url_for('static', filename=filename_or_url) %}

    {% endif %}

{% if type == 'CSS' %}

    <link rel="stylesheet" href="{{ filename_or_url }}" type="text/css">

{% elif type == 'js' %}

    <scirpt type ="text/javascript" src="{{ filename_or_url }}"></scirpt>

{% elif type == 'icon' %}

    <link rel="icon" href="{{ filename_or_url }}">

{% endif %}

{% endmacro %}

在模板中导入宏后，只需要在调用时传入静态资源的类别和文件路径就会获得完整的资源加载语句。使用它加载CSS的例子：

<script src="{{ static_file('css', 'css/bootstrap.min.css') }}"></script>

使用它也可以从CDN加载资源，只需要将关键字参数local设为False，然后传入资源的URL即可：

<script src="{{ static_file('css', 'https://…css/bootstrap.min.css', local=False) }}"></script>