Menu
CoddyTech

Статические файлы

Часть раздела Основы Django путешествия по Django на Coddy. Урок 20 из 23.

Страницы кафе — чёрные на белом фоне. Таблица стилей изменила бы это, а таблицы стилей, скрипты и изображения — это статические файлы: сервер отправляет их как есть, без представления. Django находит их так же, как шаблоны, в папке static/ каждого установленного приложения, снова с именем приложения внутри:

shop/static/shop/cart.js

Они доступны по адресу STATIC_URL, то есть "static/" в settings.py, поэтому путь к этому файлу — /static/shop/cart.js. Шаблон формирует адрес с помощью {% static %} после {% load static %}:

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

Тег таблицы стилей <link rel="stylesheet" href="..."> помещается в <head>. Добавь его в base.html, и он появится на каждой странице, которая наследует этот шаблон.

challenge icon

Задание

Легко
  • Создай menu/static/menu/style.css как минимум с body { background: #fdf8f2; }.
  • В base.html загрузи теги static и подключи таблицу стилей в <head>, чтобы каждая страница подключала /static/menu/style.css.

Нажми Run: страницы станут кремового цвета. Открой /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>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Основы Django

Потренируйтесь самостоятельно: Песочница Django