最初のDjangoアプリの作成、パート6
このチュートリアルは、 Tutorial 5 が中断したところから始まります。 テスト済みのWeb-pollアプリケーションを作成し、スタイルシートと画像を追加します。
サーバーによって生成されたHTMLとは別に、Webアプリケーションは通常、完全なWebページをレンダリングするために必要な追加のファイル(画像、JavaScript、CSSなど)を提供する必要があります。 Djangoでは、これらのファイルを「静的ファイル」と呼びます。
小さなプロジェクトの場合、これは大したことではありません。Webサーバーが見つけられる場所に静的ファイルを保持できるからです。 ただし、大規模なプロジェクト、特に複数のアプリで構成されるプロジェクトでは、各アプリケーションによって提供される静的ファイルの複数のセットを処理するのが難しくなり始めます。
それがdjango.contrib.staticfiles
の目的です。各アプリケーション(および指定したその他の場所)から静的ファイルを収集して、本番環境で簡単に提供できる単一の場所に収集します。
アプリのルックアンドフィールをカスタマイズします
まず、polls
ディレクトリにstatic
というディレクトリを作成します。 Djangoがpolls/templates/
内でテンプレートを見つけるのと同様に、Djangoはそこで静的ファイルを探します。
Djangoの:setting: `STATICFILES_FINDERS` 設定には、さまざまなソースから静的ファイルを検出する方法を知っているファインダーのリストが含まれています。 デフォルトの1つはAppDirectoriesFinder
で、これは、先ほど作成したpolls
のように、:setting: `INSTALLED_APPS` のそれぞれで「静的」サブディレクトリを検索します。 管理サイトは、静的ファイルに同じディレクトリ構造を使用します。
作成したstatic
ディレクトリ内に、polls
という別のディレクトリを作成し、その中にstyle.css
というファイルを作成します。 つまり、スタイルシートはpolls/static/polls/style.css
にある必要があります。 AppDirectoriesFinder
staticfile finderがどのように機能するかにより、テンプレートのパスを参照する方法と同様に、Djangoでこの静的ファイルをpolls/style.css
として参照できます。
静的ファイルの名前空間
テンプレートと同じように、は静的ファイルをpolls/static
に直接配置することで(別のpolls
サブディレクトリを作成するのではなく)回避できる可能性がありますが、実際には悪いアイデア。 Djangoは、名前が一致する最初の静的ファイルを選択します。異なるアプリケーションに同じ名前の静的ファイルがある場合、Djangoはそれらを区別できません。 Djangoを正しいものに向けることができる必要があります。これを確実にする最良の方法は、名前空間を使用することです。 つまり、これらの静的ファイルを、アプリケーション自体にちなんで名付けられた別のディレクトリ内に配置します。
そのスタイルシートに次のコードを入れます(polls/static/polls/style.css
):
li a {
color: green;
}
次に、polls/templates/polls/index.html
の上部に以下を追加します。
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
{% static %}
テンプレートタグは、静的ファイルの絶対URLを生成します。
開発のために必要なのはそれだけです。
サーバーを起動します(または、サーバーが既に実行されている場合は再起動します)。
http://localhost:8000/polls/
をリロードすると、質問のリンクが緑色(Djangoスタイル!)になっていることがわかります。これは、スタイルシートが正しくロードされたことを意味します。
背景画像の追加
次に、画像のサブディレクトリを作成します。 polls/static/polls/
ディレクトリにimages
サブディレクトリを作成します。 このディレクトリ内に、background.gif
というイメージを配置します。 つまり、画像をpolls/static/polls/images/background.gif
に配置します。
次に、スタイルシートに追加します(polls/static/polls/style.css
):
body {
background: white url("images/background.gif") no-repeat;
}
http://localhost:8000/polls/
をリロードすると、画面の左上に背景がロードされているのがわかります。
警告
もちろん、{% static %}
テンプレートタグは、Djangoによって生成されないスタイルシートのような静的ファイルでは使用できません。 相対パスを使用して静的ファイルを相互にリンクする必要があります。これにより、:setting: `STATIC_URL` (:ttag:` staticで使用)を変更できるためです。 `テンプレートタグ(URLを生成するため))静的ファイル内の一連のパスも変更する必要はありません。
これらは基本です。 フレームワークに含まれる設定やその他のビットの詳細については、静的ファイルのハウツーおよび静的ファイルリファレンスを参照してください。 静的ファイルのデプロイでは、実サーバーで静的ファイルを使用する方法について説明しています。
静的ファイルに慣れたら、このチュートリアルのパート7 を読んで、Djangoの自動生成された管理サイトをカスタマイズする方法を学習してください。