Настройка и подключение статических файлов в Django
Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.
Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.
1. Создадим папку для статических файлов
В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».
2. Укажите статический URL Django в настройках
Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.
Они должны быть там по умолчанию.
После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.
Не забудьте импортировать библиотеку os после добавления кода выше.
После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.
3. Создайте папку для изображений
Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.
4. Загрузите статический файл в свой HTML-шаблон
Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.
Важно добавить <% load static %>до того, как добавлять изображение. В противном случае оно не будет загружено.
Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
Дополнительный JS и CSS¶
Для генерации отзывчивых и удобных форм недостаточно простого HTML. Как минимум, нужен CSS, а современные виджеты нуждаются ещё и в JavaScript. Точная комбинация CSS и JavaScript зависит от виджетов, используемых на этой странице.
Именно здесь используются ресурсы формы. Django позволяет привязать различные ресурсы к форме и виджетам, которым нужны эти ресурсы. Например, если вы желаете использовать календарь для полей с датами, вы можете определить собственный виджет календаря. Этот виджет может требовать для своей работы CSS и JavaScript. При использовании этого виджета на форме, Django может определить необходимые .css и .js файлы и предоставить список имён этих файлов для их включения в код страницы.
Media and Django Admin
Поставляемое с Django приложение интерфейса администратора определяет ряд собственных виджетов для календарей, отфильтрованных выборок и так далее. Эти виджеты имеют свои требования к ресурсам. Шаблоны приложения подключают соответствующие файлы, которые необходимы для работы виджетов на странице.
Если вам понравились виджеты интерфейса администратора, то используйте их в своих приложениях. Они все расположены в django.contrib.admin.widgets .
Which JavaScript toolkit?
Существует множество библиотек JavaScript, многие из которых представляют виджеты (например, календари), которые могут быть использованы в вашем приложении. Django умышленно избегает использования какой-то одной JavaScript библиотеки. Каждая библиотека имеет свои преимущества и недостатки, выбирайте ту, которая соответствует вашим нуждам. Django можно интегрировать с любой JavaScript библиотекой.
Статическое определение ресурсов¶
Статическое определение является самым простым способом определения ресурсов. Этот способ предполагает описание ресурса во внутреннем классе. Свойства внутреннего класса определяют требования к ресурсам.
Рассмотрим простой пример:
Этот код определяет CalendarWidget , который унаследован от TextInput . Каждый раз, при использовании CalendarWidget на форме, эта форма будет подгружать CSS из файла pretty.css и JavaScript из файлов animations.js и actions.js .
Такое статическое определение преобразуется во время выполнения в свойство media виджета. Ресурсы для экземпляра CalendarWidget могут быть получены через это свойство:
Ниже приведён список всех возможных вариантов для Media . Ни один из них не является обязательным.
Словарь, описывающий CSS файлы, необходимые для различных устройств.
Значения словаря должны быть кортежами или списками имён файлов. Обратитесь к соответствующему разделу для получения информации о том, как определять пути до файлов с ресурсами.
Ключами словаря являются названия типов устройств отображения. Они идентичны типам, с которыми работает CSS: ‘all’, ‘aural’, ‘braille’, ‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’ и ‘tv’. Если вам нужны различные стили для разных типов устройств отображения, то укажите список CSS файлов для каждого типа устройств. Следующий пример определяет CSS для вывода на экран и принтер:
Если набор CSS файлов подходит для нескольких устройств отображения, то ключ словаря может быть списком типов нескольких устройств с запятой в качестве разделителя. В следующем примере, телевизор и проектор имеют одинаковые требования к ресурсам:
Вышеприведённое определение стилей будет преобразовано в следующий код:
Кортеж, описывающий необходимые JavaScript файлы. Обратитесь к соответствующему разделу для получения информации о правилах определения путей до файлов ресурсов.
extend ¶
Булево значение, определяющее производится ли наследование ресурсов базового класса.
По умолчанию, любой объект, использующий статическое определение ресурсов, будет наследовать все ресурсы от базового класса. Это будет происходить вне зависимости от того, как базовый класс определяет свои зависимости от ресурсов. Пример, расширения функционала нашего простого календаря:
Виджет FancyCalendar наследует все ресурсы от базового виджета. Если такое поведение вам не подходит, то добавьте extend=False к своему определению ресурсов:
Если вам требуется больше контроля над наследованием ресурсов, то ресурсы следует определять с помощью динамических свойств. Динамическое свойства обеспечивают полный контроль над процессом наследования ресурсов.
Динамическое определение ресурсов¶
Если над требованиями к ресурсам необходимо производить более тонкие манипуляции, то можно сделать свойство media вычисляемым динамически. Это реализуется с помощью определения свойства виджета, которое возвращает экземпляр forms.Media . Конструктор forms.Media принимает именованные аргументы css и js , в том же формате, что используется при статическом определении ресурсов.
Например, вот как может быть представлено определение ресурсов для нашего виджета календаря в динамическом виде:
Обратитесь к разделу `Media objects`_ для получения информации о том, как создать возвращаемые значения для динамических свойств ресурсов.
Определение путей до ресурсов¶
Пути, используемые для определения ресурсов, могут быть как относительными, так и абсолютными. Если путь начинается с ‘/’, ‘http://‘ или ‘https://‘, то он будет интерпретирован как абсолютный и оставлен в неизменном виде. Все остальные пути будут дополнены соответствующим префиксом.
Как часть приложения staticfiles добавлены два новых параметра конфигурации, которые относятся к «статическим файлам» (изображения, CSS, Javascript и т.д.), необходимым для отображения полной страницы: STATIC_URL и STATIC_ROOT .
Для того, чтобы найти правильный префикс, Django проверит параметр STATIC_URL на равенство с None и, если это так, то автоматически воспользуется параметром MEDIA_URL . Например, если параметр MEDIA_URL для сайта имеет значение 'http://uploads.example.com/' , а параметр STATIC_URL равен None :
Но если параметр STATIC_URL равен 'http://static.example.com/' :
Объекты ресурсов¶
При обращении к атрибуту media виджета или формы в качестве значения будет возвращён экземпляр forms.Media . Как мы уже выяснили, строковым представлением такого объекта является HTML, который необходимо вставить в блок head вашей страницы.
Тем не менее, у объектов Media есть ещё интересные свойства.
Подмножества Media¶
Если вам требуется ресурс определённого типа, то вы можете использовать оператор для фильтрации ненужных ресурсов. Например:
При использовании оператора фильтрации, возвращаемым значением будет новый объект Media , но содержать он будет только указанные ресурсы.
Сочетание ресурсных объектов¶
Ресурсные объекты также можно объединять друг с другом. При объединении двух таких объектов, результатом будет объект Media , содержащий ресурсы обоих объектов:
Ресурсы на формах¶
Виджеты являются не единственными объектами, которые могут содержать определения ресурсов. Формы тоже могут требовать наличия внешних ресурсов для своей работы. Правила определения внешних ресурсов для форм аналогичны правилам для виджетов: определения могут быть статическими или динамическими. Пути и правила наследования для этих определений тоже не отличаются.
Независимо от того, определили вы внешние ресурсы или нет, всё объекты Form обладают свойством media . Значением по умолчанию для этого свойства является результат сочетания ресурсов всех виджетов формы:
Если требуется добавить ещё ресурс к форме, например CSS для разметки формы, просто добавьте его определение к форме:
Веб-программирование → Статические файлы (js, css, картинки) в Django
Каждый из вас, кто уже попробовал свой сайт перевести на Django, скорее всего столкнулись с проблемой с файлами стилей и javascript. Вы наверное пробовали их засунуть в папку templates или куда-нибудь еще, но все равно не сработало. И ваш сайт загрустил без стилей и вместе с ним вы тоже. ☹️
В этой статье я покажу вам, что нужно сделать, чтобы все это заработало.
Файлы которые, не меняются пока работает ваш сайт или веб-приложение, называется статическими(statiс files).
Это javascript файлы, css файлы, картинки, шрифты и т.п. А вот html страницы у вас будут динамическими, т.е. изменяющимися, они могут по разному отображаться в зависимости от пользователя и его действий. Допустим страница поиска товаров отобразит для одного пользователя только кондиционеры, а для другого только мобильные телефоны. Но для Django это одна и та же страница. Просто данные другие.
Надеюсь, понятна разница. А еще браузеры в основном кешируют статические файлы, чтобы каждый раз не перезагружать с сервера. Они же не меняются. И если вы вдруг изменили css файл, чтобы текст был красным, а ваша страница все еще показывает зеленый текст ��, не бойтесь! Просто очистите кеш браузера. ��
Ладно, теперь к делу.
Цикл всех статей про Django:
1. Наш сайт и его static файлы
Здесь буду продолжать проект с последней статьи. Там у нас было две страницы: Главная и Контакты. И ничего больше. Давайте добавим туда немного красочных элементов с анимацией. Для этого нам нужны: один css-файл и два js-файла.
Один из них файл javascript библиотеки jQuery. Cкачайте его отсюда. Остальные два файла пока будут пустыми. Потом заполним их.
Теперь расскажу где их нужно расположить.
У вас в проекте должна быть папка вашего главного аппа, у нас она называется mysite . Внутри этой папки, рядом с templates, создадим еще одну папку static. Тут мы будем держать статические файлы. Внутри этой папки можно создавать сколько угодно других папок и файлов. Сделаем так, как на картинке:
Мы разделили стили и скрипты по отдельным папкам, а для картинок можете создать другую папку. Порядок важен для того, чтобы потом быстро находить нужный файл.
2. Настройки сайта для статик файлов
Теперь мы должны сказать Django где он должен брать эти статик файлы и указать другие настройки связанные с ними. Для этого откроем файл settings.py. Найдем там строчку:
Она почти в самом конце обычно. Здесь указана по какому URL мы будем получать статик файлы. Дальше нам нужно добавить пути, по которым Django должен собрать статик файлы. Путей может быть много, поэтому они указываются в виде списка:
А еще на будущее добавьте еще три настройки. Про эти настройки расскажу позже.
Кроме статик файлов, есть еще медиа файлы. Это файлы, которые загружают пользователи сайта. Они тоже работают как статик файлы.
Теперь нам нужно настроить ссылки к этим файлам.
3. Ссылка на статик файлы
Помните файл urls.py в котором мы писалы пути на наши странички? Такие же пути нужны для статических файлов. Но это сделает за нас сам Django. Откройте файл settings.py и убедитесь что в переменной INSTALLED_APPS содержится значение 'django.contrib.staticfiles'. Если его там нет, то добавьте.
Теперь все готово для использования static файлов. Давайте проверим. Откройте файл styles.css в папке static/css и добавьте туда несколько стилей:
Теперь запустите ваш Django сайт, если он не запущен:
Откройте браузер по адресу http://localhost:8000/static/css/styles.css. Если все настроено правильно, то вы должны увидеть содержимое файла styles.css. Т.е. вы увидите текст выше.
Если не работает, то проверьте что вы сделали не так.
4. Подключение статик файлов
Теперь нам нужно вписать ссылки к статик файлам в наши html файлы. Это делается очень просто. Открываете любой html-файл, например home.html. И обязательно в самом начале нужно загрузить библиотеку static. Для этого в самом начале файла пишем:
Мы подключили библиотеку, которая поможет нам составлять url-ы на статик файлы.
Если вы знаете html, то вы знаете как подключать CSS стили через тэг <link> внутри тэга <head>:
В атрибуте href должна быть указана ссылка. Мы конечно можем так оставить, но это не сработает если мы запустим наш сайт по другому домену. Поэтому в Django статические файлы подключаются по другому.
Чтобы подключить статик файл styles.css мы должны написать:
Чтобы подключить js файлы, пишем:
После этого Django срендерит(создаст) html страницу по шаблону, вместо <% static %>будут ссылки на статик файлы, которые мы указали. И эти ссылки будут работать всегда.
Теперь наш файл home.html выглядит так:
Запустите сайт и откройте главную страницу. Вы должны увидеть оранжевый заголовок. Значит мы подключили CSS стили правильно. Поздравляю! Вы умеете подключать CSS и JS файлы. Теперь точно так же подключите статик файлы в шаблон contacts.html.
5. JS-эксперимент
Подошло время для эскперимента. Если вы умеете работать с CSS и JS, можете пропустить эту часть.
Откройте снова файл home.html и под заголовком <h1> добавьте следующее:
Мы добавили два квадратных блока на экран. Добавим небольшой скрипт в файле scripts.js:
Здесь мы используя библиотеку jQuery прописали обработчики нажатия на два блока. Первый будет менять текст, а второй возвращать назад. Снова перезапустите сайт и откройте главную страницу. Попробуйте нажать на блоки.
Вот и на этом все, надеюсь теперь ваши сайты станут живее. Картинки работают точно также!