《Flask 入門教程》第 4 章：使用靜態檔案

greylihui發表於2018-12-19
Flask

靜態檔案（static files）和我們的模板概念相反，指的是內容不需要動態生成的檔案。比如圖片、CSS 檔案和 JavaScript 指令碼等。

在 Flask 中，我們需要建立一個 static 資料夾來儲存靜態檔案，它應該和程式模組、templates 資料夾在同一目錄層級，所以我們在專案根目錄建立它：

$ mkdir static複製程式碼

生成靜態檔案 URL

在 HTML 檔案裡，引入這些靜態檔案需要給出資源所在的 URL。為了更加靈活，這些檔案的 URL 可以通過 Flask 提供的 url_for() 函式來生成。

在第 2 章的最後，我們學習過 url_for() 函式的用法，傳入端點值（檢視函式的名稱）和引數，它會返回對應的 URL。對於靜態檔案，需要傳入的端點值是 static，同時使用filename 引數來傳入相對於 static 資料夾的檔案路徑。

假如我們在 static 資料夾的根目錄下面放了一個 foo.jpg 檔案，下面的呼叫可以獲取它的 URL：

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

花括號部分的呼叫會返回 /static/foo.jpg。

提示 在 Python 指令碼里，url_for() 函式需要從 flask 包中匯入，而在模板中則可以直接使用，因為 Flask 把一些常用的函式和物件新增到了模板上下文（環境）裡。

新增 Favicon

Favicon（favourite icon） 是顯示在標籤頁和書籤欄的網站頭像。你需要準備一個 ICO、PNG 或 GIF 格式的圖片，大小一般為 16×16、32×32、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 定義，我已經盡力了）：


《Flask 入門教程》第 4 章：使用靜態檔案


本章小結

主頁現在基本成型了，接下來我們會慢慢完成程式的功能。結束前，讓我們提交程式碼：

$ 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 的步驟。

相關文章