Статические файлы — CSS, JavaScript, изображения, шрифты. Django обрабатывает их особым образом: в разработке раздаёт сам, в продакшне требует предварительной сборки.
Структура папок
devblog/
static/ # статика приложения (рядом с приложением)
css/
main.css
js/
main.js
images/
logo.png
templates/
base.html
Или статика на уровне проекта:
devblog/
assets/ # статика всего проекта
css/
js/
devblog/
settings.py
Настройки в settings.py
# URL, по которому браузер запрашивает статику
STATIC_URL = '/static/'
# Папки для поиска статики (помимо <app>/static/)
STATICFILES_DIRS = [
BASE_DIR / 'assets',
]
# Куда collectstatic собирает файлы для продакшна
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS — дополнительные папки, Django ищет в них файлы при запросах через {% static %}. STATIC_ROOT используется только командой collectstatic.
{% load static %} и
В шаблоне сначала загружают тег, затем используют:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet"
href="{% static 'css/main.css' %}">
<!-- Внешняя библиотека (CDN — без {% static %}) -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Изображение -->
<img src="{% static 'images/logo.png' %}" alt="Логотип" width="120">
<!-- JS перед </body> -->
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
{% static 'css/main.css' %} генерирует URL вида /static/css/main.css. Если завтра STATIC_URL изменится — все пути обновятся автоматически.
Полный base.html со статикой
{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}DevBlog{% endblock %}</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="icon" href="{% static 'images/favicon.ico' %}">
{% block extra_css %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
collectstatic
Перед деплоем все статические файлы собирают в одну папку (STATIC_ROOT):
python manage.py collectstatic
Django обходит все <app>/static/ и STATICFILES_DIRS, копирует всё в STATIC_ROOT. Nginx или CDN затем раздают файлы из этой папки напрямую, минуя Django.
Добавьте staticfiles/ в .gitignore:
# .gitignore
staticfiles/
Разработка vs продакшн
| Аспект | Разработка | Продакшн |
|---|---|---|
| Кто раздаёт | Django (runserver) |
Nginx / CDN |
Нужен collectstatic? |
Нет | Да |
DEBUG |
True |
False |
STATIC_ROOT |
Не используется | Папка для Nginx |
В разработке Django автоматически ищет файлы в <app>/static/ и STATICFILES_DIRS, если DEBUG=True. В продакшне при DEBUG=False Django статику не раздаёт — это задача веб-сервера.
Пример структуры CSS для DevBlog
/* static/css/main.css */
:root {
--color-primary: #0d6efd;
--color-text: #212529;
}
body {
font-family: 'Inter', sans-serif;
color: var(--color-text);
}
.post-body pre {
background: #f8f9fa;
padding: 1rem;
border-radius: 0.375rem;
overflow-x: auto;
}
.post-body img {
max-width: 100%;
height: auto;
}
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!