ALL OF ME: Webapp2 教學 (3) - 使用靜態資源 ( Use static files in Webapp2 tutorial )

2015年4月18日

Webapp2 教學 (3) - 使用靜態資源 ( Use static files in Webapp2 tutorial )

前一篇介紹到如何使用模板引擎，想當然進一步則是如何讓頁面使用 CSS、圖片等檔案，所以本篇將介紹如何在 Webapp2 框架底下設定取得靜態資源。( 其他 Webapp2 相關教學可以參考本篇整理 )

前置作業：
在開始修改程式之前，先將靜態檔案資料夾建立於專案的資料夾內，例如 CSS 檔案資料夾，

mkdir css

設定靜態資源路徑：
在這個步驟中我們需要將靜態資源的路徑加入 app.yaml 檔案，當有靜態檔案的 Request 系統才知道去哪裡找。檔案內容如下：

application: helloworld
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /css
  static_dir: css

- url: /.*
  script: helloworld.application

建立 CSS 檔案：
當然你可以測試加入其他靜態檔案，因篇幅關係以 CSS 檔案 main.css 簡單做個範例，內容如下：

/* main.css */
p.hello {
 color: #64b167;
}

將頁面中加入靜態資源：
於 HTML 檔案 index.html 中加入我們 CSS 的連結，內容參考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="/css/main.css" />
</head>
<body>
    <p class="hello">Hello, {{name}}!</p>
    <p>This is a template example.</p>
</body>
</html>

至此我們已經可以重新瀏覽頁面，看看是否有成功取得 main.css 檔案。最後將我的專案結構展示一下，請參考：


├── google_appengine
│   ├── api_server.py
│   ├── appcfg.py
│   └── ...
└── helloworld
    ├── app.yaml
    ├── css
    │   └── main.css
    ├── helloworld.py
    ├── index.html
    └── webapp2.py

Environment :
・ Arch Linux
・ Python 2.7

Reference :
・ Webapp2 official site

2015年4月18日

Webapp2 教學 (3) - 使用靜態資源 ( Use static files in Webapp2 tutorial )

熱門文章