《Flask 入門教程》第 4 章：使用靜態文件

時間 2019-12-13

原文原文鏈接

靜態文件（static files）和咱們的模板概念相反，指的是內容不須要動態生成的文件。好比圖片、CSS 文件和 JavaScript 腳本等。css

在 Flask 中，咱們須要建立一個 static 文件夾來保存靜態文件，它應該和程序模塊、templates 文件夾在同一目錄層級，因此咱們在項目根目錄建立它：html

$ mkdir static複製代碼

生成靜態文件 URL

在 HTML 文件裏，引入這些靜態文件須要給出資源所在的 URL。爲了更加靈活，這些文件的 URL 能夠經過 Flask 提供的 url_for() 函數來生成。前端

在第 2 章的最後，咱們學習過 url_for() 函數的用法，傳入端點值（視圖函數的名稱）和參數，它會返回對應的 URL。對於靜態文件，須要傳入的端點值是 static，同時使用filename 參數來傳入相對於 static 文件夾的文件路徑。git

假如咱們在 static 文件夾的根目錄下面放了一個 foo.jpg 文件，下面的調用能夠獲取它的 URL：github

<img src="{{ url_for('static', filename='foo.jpg') }}">複製代碼

花括號部分的調用會返回 /static/foo.jpg。flask

提示在 Python 腳本里，url_for() 函數須要從 flask 包中導入，而在模板中則能夠直接使用，由於 Flask 把一些經常使用的函數和對象添加到了模板上下文（環境）裏。bootstrap

添加 Favicon

Favicon（favourite icon）是顯示在標籤頁和書籤欄的網站頭像。你須要準備一個 ICO、PNG 或 GIF 格式的圖片，大小通常爲 16×1六、32×3二、48×48 或 64×64 像素。把這個圖片放到 static 目錄下，而後像下面這樣在 HTML 模板裏引入它：瀏覽器

templates/index.html：引入 Favicon前端框架

<head>
    ...
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>複製代碼

保存後刷新頁面，便可在瀏覽器標籤頁上看到這個圖片。框架

添加圖片

爲了讓頁面不那麼單調，咱們來添加兩個圖片：一個是顯示在頁面標題旁邊的頭像，另外一個是顯示在頁面底部的龍貓動圖。咱們在 static 目錄下面建立一個子文件夾 images，把這兩個圖片都放到這個文件夾裏：

$ cd static
$ mkdir images複製代碼

建立子文件夾並非必須的，這裏只是爲了更好的組織同類文件。一樣的，若是你有多個 CSS 文件，也能夠建立一個 css 文件夾來組織他們。下面咱們在頁面模板中添加這兩個圖片，注意填寫正確的文件路徑：

templates/index.html：添加圖片

<h2>
    <img alt="Avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
    {{ name }}'s Watchlist
</h2>
...
<img alt="Walking Totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">複製代碼

提示這兩張圖片你能夠本身替換爲任意的圖片（注意更新文件名），也能夠在示例程序的 GitHub 倉庫下載。

添加 CSS

雖然添加了圖片，但頁面仍是很是簡陋，由於咱們尚未添加 CSS 定義。下面在 static 目錄下建立一個 CSS 文件 style.css，內容以下：

static/style.css：定義頁面樣式

/* 頁面總體 */
body {
    margin: auto;
    max-width: 580px;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

/* 頁腳 */
footer {
    color: #888;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
}

/* 頭像 */
.avatar {
    width: 40px;
}

/* 電影列表 */
.movie-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.movie-list li {
    padding: 12px 24px;
    border-bottom: 1px solid #ddd;
}

.movie-list li:last-child {
    border-bottom:none;
}

.movie-list li:hover {
    background-color: #f8f9fa;
}

/* 龍貓圖片 */
.totoro {
    display: block;
    margin: 0 auto;
    height: 100px;
}複製代碼

接着在頁面的 <head> 標籤內引入這個 CSS 文件：

templates/index.html：引入 CSS 文件

<head>
    ...
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
</head>複製代碼

最後要爲對應的元素設置 class 屬性值，以便和對應的 CSS 定義關聯起來：

templates/index.html：添加 class 屬性

<h2>
    <img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
    {{ name }}'s Watchlist
</h2>
...
<ul class="movie-list">
    ...
</ul>
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">複製代碼

最終的頁面以下圖所示（你能夠自由修改 CSS 定義，我已經盡力了）：

本章小結

主頁如今基本成型了，接下來咱們會慢慢完成程序的功能。結束前，讓咱們提交代碼：

$ git add .
$ git commit -m "Add static files"
$ git push複製代碼

提示你能夠在 GitHub 上查看本書示例程序的對應 commit：887b471（圖片的 CSS 定義後續有一些調整）。

進階提示

若是你對 CSS 很頭疼，能夠藉助前端框架來完善頁面樣式，好比 Bootstrap、Semantic-UI、Foundation 等。它們提供了大量的 CSS 定義和動態效果，使用起來很是簡單。
擴展 Bootstrap-Flask 能夠簡化在 Flask 項目裏使用 Bootstrap 4 的步驟。