Как правило, фронтенд любого сайта включает не только файлы HTML, но также:
- CSS (файлы со стилями элементов),
- файлы с кодом на JavaScript (это исполняемый код, который выполняется не на сервере, а прямо в браузере пользователя),
- файлы изображений (логотип, файлы favicon, иконки, декоративные изображения для оформления страниц),
- файлы шрифтов (у пользователя на компьютере может не быть тех шрифтов, которые захотел применить дизайнер, и эти шрифты тоже подгружаются вместе со страницей).
Эти файлы не обрабатываются сервером, над ними не производится никаких операций, единственное, что с ними надо сделать, — отправить их пользователю.Файлы, которые не меняются в процессе работы проекта, называют статическими файлами (или статикой, если коротко). Эти файлы сохраняют в отдельные директории, традиционно называемые static.В реальных проектах за раздачу статических файлов часто отвечают отдельные серверы или CDN-сервисы (англ. content delivery network, «сеть доставки контента»), единственная задача которых — раздавать статику. Если вся статика собрана в одну директорию, будет гораздо удобнее выгружать её на такой сервер.
Места хранения для статических файлов
Для размещения папок со статикой есть два варианта.Можно создать несколько папок /static и, подобно шаблонам, хранить их «на уровне приложения». Как и в случае с шаблонами, такое расположение — хороший выбор при разработке переиспользуемого приложения.
anfisa
├── anfisa # Главная папка проекта
├── ice_cream # Папка приложения
│ ├── static <-- Директория для статических файлов приложения
│ └── ...
├── templates
└── manage.py Второй подход — создать общую директорию для статики на уровне проекта.
anfisa
├── anfisa # Главная папка проекта
├── ice_cream # Папка приложения
├── templates # Папка шаблонов
├── static <-- Директория для статических файлов всего проекта
└── manage.py В проектах «Анфиса для друзей» и Yatube статика будет расположена на уровне проекта.Django должен знать, откуда подгружать статические файлы: в большом проекте может быть несколько директорий со статикой; некоторые из этих директорий могут храниться даже на других серверах. Адреса этих директорий указываются в файле settings.py, списком или кортежем в константе STATICFILES_DIRS.
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
# Или так:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] Теперь в головной директории проекта можно создать папку /static, а в ней — субдиректории для изображений, стилей и других статических файлов.
anfisa
├── anfisa
├── ice_cream
├── static # Директория для статических файлов проекта
│ ├── img # Директория для изображений
│ └── css # Директория для файлов таблиц стилей
│ └── bootstrap.min.css
├── templates
└── manage.py Когда в процессе развития проекта в него добавятся файлы JavaScript, в папке /static для них можно будет создать папку /js. Появятся, например, PDF-файлы — сделаем папку /files. Структура получается гибкая и удобная — каждый файл на своём месте.
Включение статических файлов в шаблоны
После размещения статических файлов и настройки STATICFILES_DIRS статику нужно подключить к шаблонам.В начале шаблона с помощью тега {% load static %} нужно объявить, что в шаблоне будет использоваться модуль статики, а потом в тегах {% static 'адрес_файла_в_директории_статики' %} указать адреса ссылок на статические файлы:
{% load static %}
...
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> Адреса файлов указывают относительно директории /static, указанной в STATICFILES_DIRS.После запуска dev-сервера адрес {% static 'css/bootstrap.min.css' %} преобразуется в /static/css/bootstrap.min.css, а подключённый файл можно будет открыть в браузере по прямой ссылке: http://127.0.0.1:8000/static/css/bootstrap.min.css. Ссылка состоит из нескольких частей:
- http://127.0.0.1:8000/ — адрес вашей локальной машины и порт, на котором запущен Django;
- static/ — часть пути из настроек Django;
- css/bootstrap.min.css — путь к файлу внутри папки статики.
Аналогично можно подключить статическую картинку:
{% load static %}
...
<img src="{% static 'img/logo.png' %}">