Djangoにおいて、画像やCSSなどの静的ファイルを利用してみます。
静的ファイルは主にプロジェクト単位とアプリケーション単位において分けることができます。
hello_projcectというプロジェクトおよびmyapp1アプリケーションという名前のアプリケーションを作成した前提で説明していきます。
関連ページ
アプリケーション単位での静的ファイル
まずアプリケーションであるmyapp1ディレクトリの下にstaticディレクトリを作成し、更にアプリケーション名と同じmyapp1ディレクトリを作成、style.cssを適当に記述し配置します。
myapp1/static/myapp1/style.css
1 2 3 4 |
h1{ color:#F00; font-size: 22px; } |
適当な画像も用意し配置します。
1 |
myapp1/static/myapp1/sample.png |
テンプレートを下記のように編集します。
myapp1/templates/myapp1/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{% load static %} <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>静的ファイル</title> <link rel="stylesheet" type="text/css" href="{% static 'myapp1/style.css' %}"> </head> <body> <h1>静的ファイル</h1> <img src="{% static 'myapp1/sample.png' %}" alt="サンプル画像"> </body> </html> |
以上でCSSが反映され、画像も表示されていることが確認できます。myapp1という名前は名前空間としての役目を持ち、他のアプリケーション内においても利用できます。
静的ファイル自体のURLは下記のようになります。
1 |
http://127.0.0.1:8000/static/myapp1/style.css |
staticの名前の部分は、settings.pyにおいて設定されています。
1 |
STATIC_URL = '/static/' |
もし「STATIC_URL = ‘/aiueo/’」のように変更した場合、URLは下記のように変わります。
1 |
http://127.0.0.1:8000/aiueo/myapp1/style.css |
プロジェクト単位での静的ファイル
次にすべてのアプリケーションにおいて共通して利用する場合の、すなわちプロジェクト単位での静的ファイルを作成してみます。
まずsettings.pyに、STATICFILES_DIRS の項目を下記のように追記します。
hello_project/settings.py
1 2 3 |
STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) |
次にmanage.pyと同階層に、上述したos.path.join()の第2引数と同じ名前のstaticディレクトリを作成し、その中にstyle.cssを作成します。
1 2 3 4 5 6 7 8 9 |
├── hello_project ├── db.sqlite3 ├── hello_project ├── manage.py ├── myapp1 ├── myapp2 ├── static │ └── style.css └── templates |
テンプレートを下記のように編集します。
myapp1/templates/myapp1/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{% load static %} <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>静的ファイル</title> <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> </head> <body> <h1>静的ファイル</h1> <img src="{% static 'myapp1/sample.png' %}" alt="サンプル画像"> </body> </html> |
8行目
アプリケーション単位での記述方法 myapp1/style.css から、myapp1を削除しています。以上でプロジェクト単位でのCSSが反映されます。
静的ファイル自体のURLは下記のようになります。
1 |
http://127.0.0.1:8000/static/style.css |
参照ページ
django ドキュメント
静的ファイル (画像、JavaScript、CSS など) を管理する