静的ファイル

CoddyのDjangoジャーニー「Djangoの基礎」セクションの一部。レッスン 20/23。

カフェのページは白地に黒い文字で表示されています。スタイルシートを使えば見た目を変えられます。スタイルシート、スクリプト、画像は静的ファイルです。サーバーはビューを介さず、そのまま送信します。Djangoはテンプレートを見つけるのと同じ方法で、インストール済みの各アプリのstatic/フォルダー内にある、アプリ名を含むフォルダーから静的ファイルを見つけます。

shop/static/shop/cart.js

これらのファイルはSTATIC_URLの下で提供されます。settings.pyでは"static/"なので、このファイルのパスは/static/shop/cart.jsです。テンプレートでは、{% load static %}の後に{% static %}を使ってパスを組み立てます。

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

スタイルシートの<link rel="stylesheet" href="...">は<head>に置きます。base.htmlに置けば、それを継承するすべてのページに適用されます。

チャレンジ

簡単

menu/static/menu/style.cssを作成し、少なくともbody { background: #fdf8f2; }を記述します。
base.htmlで静的ファイル用タグを読み込み、<head>内でスタイルシートをリンクして、すべてのページから/static/menu/style.cssを読み込めるようにします。

実行を押すと、ページがクリーム色になります。/static/menu/style.cssを開いて、Djangoが配信するファイルを確認しましょう。

自分で試してみよう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>