Haikson

[ Everything is possible. Everything takes time. ]

Django и CSS

Казалось бы, что может быть нестандартного в использовании CSS стилей в Django проектах? Вбей в шаблон путь, да и пусть сервер раздает статические файлы. Но, как всегда, можно найти много способов отдавать стили клиенту: как статический файл, генерируемые CSS, сжатые... Да и не все, особенно начинающие разработчики, знают как запускать встроенный в Django сервер, чтобы он отдавал статические файлы, CSS в том числе. Попробую здесь охватить львиную долю информации, связанной с использованием CSS в Django проектах. И начну с самого простого.

Django и CSS: статические файлы

Самый простой и распространенный способ - указать в шаблоне путь к CSS и сервер сам будет раздавать файлы. Давайте начнем именно с этого метода. Расскажу, пожалуй, пошагово, что делать.

Здесь и дальше все пути записываю относительно корня проекта. Не обязательно названия директорий должны совпадать с тем, что указываю в посте. Но принцип должен быть сохранен.
  1. Готовим CSS стиль. Заливаем на сервер в директорию /static/css/
  2. Обязательно необходимо убедиться, что django.contrib.staticfiles добавлен в INSTALLED_APPS. Это необходимо для работы со статическими файлами в шаблонах. По крайней мере удобно.
  3. Укажите в settings.py (настройках приложения)
    STATIC_URL = "/static/"
  4. В шаблоне используйте следующую конструкцию
    {% load staticfiles %} # закружаем теги для работы со статическим контентом
    """
    используем тег static для генерация URL-а по указанному относительному пути с использованием бекенда, указанного в
    STATICFILES_STORAGE (это позволяет легко перенести статические файлы на CDN).
    """
    <link href="{% static "css/style.css" %}">