13: スタティックアセットを使用したCSS/JS/画像ファイル(13: CSS/JS/Images Files With Static Assets)¶
もちろんWebは単にマークアップ以上のものです。CSS、JS、画像などの静的アセットが必要です。Pyramidがいくつかの静的なアセットを提供するディレクトリについてwebアプリケーションを設定してみましょう。
目的(Objectives)¶
- 静的アセットのディレクトリをURLにパブリッシュします。
- Pyramidを使用してディレクトリ内のファイルへのURLを生成します。
手順(Steps)¶
最初に
view_classesの手順の結果をコピーします:$ cd ..; cp -r view_classes static_assets; cd static_assets $ $VENV/bin/pip install -e .
static_assets/tutorial/__init__.pyにconfig.add_static_viewという呼び出しを追加します:1 2 3 4 5 6 7 8 9 10 11
from pyramid.config import Configurator def main(global_config, **settings): config = Configurator(settings=settings) config.include('pyramid_chameleon') config.add_route('home', '/') config.add_route('hello', '/howdy') config.add_static_view(name='static', path='tutorial:static') config.scan('.views') return config.make_wsgi_app()
static_assets/tutorial/home.ptのテンプレートの<head>にCSSリンクを追加できます:<!DOCTYPE html> <html lang="en"> <head> <title>Quick Tutorial: ${name}</title> <link rel="stylesheet" href="${request.static_url('tutorial:static/app.css') }"/> </head> <body> <h1>Hi ${name}</h1> </body> </html>
CSSファイル
static_assets/tutorial/static/app.cssを追加します:body { margin: 2em; font-family: sans-serif; }
新しく追加された静的ファイルが配信されることを確認する機能テストを追加します:
46 47 48
def test_css(self): res = self.testapp.get('/static/app.css', status=200) self.assertIn(b'body', res.body)
テストを実行します:
$ $VENV/bin/py.test tutorial/tests.py -q .... 5 passed in 0.50 seconds
Pyramidアプリケーションを以下のように実行します:
$ $VENV/bin/pserve development.ini --reloadブラウザで http://localhost:6543/ を開き、新しいフォントを注意します。
分析(Analysis)¶
http://localhost:6543/static/ にあるリクエストを、tutorial パッケージ内の static ディレクトリ内のファイルとディレクトリにマッピングするように、WSGIアプリケーションを変更しました。 このディレクトリには app.css が含まれていました。
テンプレートのCSSにリンクしました。 このリンクを /static/app.css にハードコーディングしました。 しかしサイトが後に /somesite/static/ の下に移動されるとどうなりますか？ あるいはWeb開発者がディスク上のアレンジを変更したらどうするのでしょうか？ PyramidはURL生成に柔軟性を提供するヘルパーを提供します：
${request.static_url('tutorial:static/app.css')}
これは config.add_static_view の登録で path='tutorial:static' に一致します。 request.static_url を使用して静的アセットの完全なURLを生成することにより、コンフィグレーションとの同期を維持します。その後にリファクタリングの柔軟性を得ます。