静的ファイル

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

カフェのページは白地に黒文字です。スタイルシートを使えば見た目を変えられます。スタイルシート、スクリプト、画像は静的ファイルです。サーバーはビューを介さず、そのまま送信します。Djangoはテンプレートを探すのと同じ方法で、インストール済みの各アプリのstatic/フォルダーを探します。その中にはアプリ名のフォルダーがもう一度あります。

shop/static/shop/cart.js

Djangoは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でstaticタグを読み込み、<head>内でスタイルシートにリンクして、すべてのページから/static/menu/style.cssにリンクするようにします。

実行を押すと、ページがクリーム色になります。

自分で試してみよう

<!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>