Подключение CSS в Django. Load static

Как правило, фронтенд любого сайта включает не только файлы 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' %}"> 


Вы можете оставить комментарий, или Трекбэк с вашего сайта.

Оставить комментарий