Menu
CoddyTech

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

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

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

shop/static/shop/cart.js

Django отдаёт их по адресам, начинающимся с STATIC_URL, значение которого в settings.py — "static/", поэтому этот файл доступен по адресу /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

Задание

Легко

Добавь на сайт таблицу стилей.

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

Нажми Run: страницы станут кремового цвета.

Попробуйте сами

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