flask模板應用-加載靜態文件：添加Favicon，使用CSS框架，使用宏加載靜態資源 --

時間 2019-11-22

標籤 flask 模板應用加載靜態文件添加 favicon 使用 css 框架資源欄目 Python 简体版

原文原文鏈接

加載靜態文件

一個Web項目不只須要HTML模板，還須要許多靜態文件，好比CSS、JavaScript文件、圖片和聲音聲。在flask程序中，默認須要將靜態文件存儲在與主腳本（包含程序實例的腳本）同級目錄的static文件夾中。javascript

爲了在HTML文件中引用靜態文件，咱們須要使用url_for()函數獲取靜態文件的URL。flask內置了用於獲取靜態文件的視圖函數，端點值爲static，它的默認URL規則爲/static/<path: filename>，URL變量filename是相對於文件夾根目錄的文件路徑。css

若是須要使用其餘文件夾來存儲靜態文件，能夠在實例化flask類時使用static_folder參數指定，靜態文件的URL路徑中的static也會自動跟隨文件夾名稱變化。在實例化flask類時用static_url_path參數能夠自定義靜態文件的URL路徑。html

在程序的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:java

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

在瀏覽器中訪問http://127.0.0.1:5000/watchlist，能夠看到添加的圖片ajax

添加Favicon

在運行flask程序時常常在命令行看到一條404狀態的GET請求，請求的URL爲/favicon.ico，例如：flask

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

這個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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。