加載靜態文件
一個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>