最初のDjangoアプリの作成、パート6 —Djangoドキュメント

提供:Dev Guides
< DjangoDjango/docs/3.2.x/intro/tutorial06
移動先:案内検索

最初のDjangoアプリの作成、パート6

このチュートリアルは、 Tutorial 5 が中断したところから始まります。 テスト済みのWeb-pollアプリケーションを作成し、スタイルシートと画像を追加します。

サーバーによって生成されたHTMLとは別に、Webアプリケーションは通常、完全なWebページをレンダリングするために必要な追加のファイル(画像、JavaScript、CSSなど)を提供する必要があります。 Djangoでは、これらのファイルを「静的ファイル」と呼びます。

小さなプロジェクトの場合、これは大したことではありません。Webサーバーが見つけられる場所に静的ファイルを保持できるからです。 ただし、大規模なプロジェクト、特に複数のアプリで構成されるプロジェクトでは、各アプリケーションによって提供される静的ファイルの複数のセットを処理するのが難しくなり始めます。

それがdjango.contrib.staticfilesの目的です。各アプリケーション(および指定したその他の場所)から静的ファイルを収集して、本番環境で簡単に提供できる単一の場所に収集します。

助けを得る場所:

このチュートリアルで問題が発生した場合は、FAQの Geting Help セクションにアクセスしてください。


アプリのルックアンドフィールをカスタマイズします

まず、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):

polls / static / polls / style.css

li a {
    color: green;
}

次に、polls/templates/polls/index.htmlの上部に以下を追加します。

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):

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の自動生成された管理サイトをカスタマイズする方法を学習してください。