Как подключить css django

Подключить CSS и JS-файл

Сначала надо убедиться, что в файле settings.py в параметре INSTALLED_APPS есть пункт django.contrib.staticfiles :

# settings.py INSTALLED_APPS = ( 'django.contrib.staticfiles', # подключение статики (CSS, JS) # . )

Затем надо создать папку static, где будут храниться все статические файлы (CSS, JavaScript). И в файле settings.py указать путь к данной папке.

# settings.py STATIC_URL = '/static/'; # 1-ый способ: указать напрямую STATICFILES_DIRS = ['/home/project/django_site/static'] # 2-ой способ: такой же, что и 1 способ, но путь формируется автоматически STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Теперь в файле шаблона можно подключать CSS и JS-файлы.

  rel="stylesheet" href="">  src="">

Обновлено: 01 ноября 2020

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

Установка
Создание страницы
Передать переменные в шаблон
Настройка с базой данных (MySQL)
Вывести список статей из базы данных
Создание, обновление и удаление записи в базе данных
Способы выборки страниц
Страница 404
Пользователь статьи
Подключить CSS и JS-файл
Узнать версию Django

Подключение статических файлов. Фильтры шаблонов

На предыдущем занятии мы в целом познакомились с шаблонами в Django. Продолжим эту тему и следующий важный шаг – это научиться подключать к шаблонам статические файлы, например, оформление CSS или JavaScript и так далее. Здесь есть свои тонкости. Как мы помним, наше приложение может работать в двух режимах: отладки – на тестовом веб-сервере; эксплуатации – на реальном веб-сервере. Так вот, в режиме отладки статические файлы Django ищет во всех каталогах static приложений и во всех возможных каталогах static внешних модулей (например, админки). То есть, статические файлы при отладке совершенно спокойно можно размещать в подкаталоге static нашего приложения. Но, в режиме эксплуатации реальный веб-сервер будет брать все статические файлы из папки static, расположенной в каталоге всего проекта. Но как появится такая папка со всеми необходимыми файлами? Для этого, при подготовке проекта к эксплуатации, выполняется специальная команда фреймворка Django:

python manage.py collectstatic

которая собирает все статические файлы из разных приложений и модулей и помещает в одну общую папку проекта.

STATIC_URL – префикс URL-адреса для статических файлов;
STATIC_ROOT – путь к общей статической папке, используемой реальным веб-сервером;
STATICFILES_DIRS – список дополнительных (нестандартных) путей к статическим файлам, используемых для сбора и для режима отладки.

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Наконец, при необходимости, можем определить третью константу со списком нестандартных путей, где также могут располагаться статические файлы:

STATICFILES_DIRS = []

В нашем случае таких путей нет, поэтому список пуст. Давайте теперь создадим папку static в нашем приложении women и, также как и для шаблонов, укажем в ней вложенный каталог women, чтобы не было конфликтов имен между статическими файлами разных модулей и приложений. (В действительности, Django просто найдет первый подходящий файл и на этом остановится. Чтобы этот файл был тем, что нам нужен, как раз и используется дополнительный каталог, который играет роль некоторого пространства имен.) В этом последнем подкаталоге уже будем размещать файлы css – для файлов CSS; js – для файлов JavaScript; images – для общих файлов изображений и так далее. Я создам подкаталог css для файла стилей нашего сайта. И в нем размещу файл styles.css, который заготовил заранее, чтобы не отвлекаться на CSS-оформление сайта, а сосредоточится на изучении фреймворка Django. Вы сможете скачать весь этот проект с github и, при необходимости, внимательно его изучить. Также создам подкаталог images и скопирую в него все необходимые изображения для базового оформления сайта. Все, подготовительная часть завершена. Теперь мы можем использовать эти внешние файлы в шаблонах нашего приложения. Для этого используется специальный тег static, который сначала подключается в шаблоне:

{% load static %}

А, затем, для формирования URL к тому или иному статическому файлу, используется конструкция: <% static ' <путь к файлу от папки static>‘ %> Например, для подключения css-файла в базовом шаблоне base.html, следует прописать:

link type="text/css" href="" rel="stylesheet" />

При просмотре страницы увидим следующий URL-адрес: И, щелкнув по нему, убеждаемся, что он успешно загружается. Отлично, это мы сделали. Далее, я возьму заготовленные html-файлы для базового шаблона страниц (base.html) и главной страницы (index.html). Для более детального ознакомления вы сможете их скачать по ссылке с github. Также я добавил в БД знаменитых женщин и их биографии. Сделал это с помощью SQLiteStudio. После всех этих изменений главная страница сайта выглядит так: Конечно, вы можете использовать свои шаблоны, принципиального значения это не будет иметь. Часто для оформления сайтов используют онлайн-сервисы. Наиболее известный из них https://getbootstrap.com Но я намеренно не стал к нему обращаться, чтобы не усложнять изложение материала по Django. Итак, на нашем сайте выводится пока только заголовок и контент статей. Нам бы хотелось, чтобы в списке контент выводился не полностью, а фрагментом, скажем, 50 слов или 100 символов. Как это сделать? Для таких целей в шаблонах предусмотрены специальные фильтры, которые позволяют управлять фрагментами данных. Список всех фильтров можно посмотреть на странице русскоязычной документации: https://djbook.ru/rel3.0/ref/templates/builtins.html#ref-templates-builtins-filters Использовать их предельно просто. Смотрите, нам для правильного отображения страницы нужно, во-первых, проставить теги абзацев при выводе постов. Это можно сделать с помощью фильтра: <> Здесь value – это некая переменная шаблона, к которой применяется фильтр linebreaks. Этот фильтр ставит тег перевода строки
, если строки в тексте следуют друг за другом и тег абзаца

, если между строками имеется пустая строка. Я добавлял текст в БД с пустыми строками, поэтому этот фильтр добавит теги абзацев. Конкретно, в нашем шаблоне главной страницы index.html этот фильтр запишется так:

p>{p.content}/p>

Если теперь обновить страницу, то увидим разбивку текста на абзацы. Отлично, это есть. Следующее, что нам нужно – это ограничить размер постов в списке 50-ю словами. За это отвечает фильтр: <>> И применим его в нашем шаблоне следующим образом:

p>linebreaks}/p>

Смотрите, здесь к контенту применяются сразу два фильтра: первый добавляет теги абзацев, а второй обрезает текст до 50 слов. То есть, мы легко можем применить к переменной множество фильтров для получения искомого результата. Обновим страницу и увидим адекватное отображение списка актрис: По аналогии используются все остальные фильтры в шаблонах фреймворка Django. В заключение я отмечу одну важную особенность отображения информации на страницах шаблонов. Например, если в текст статьи поместить какой-либо HTML-тег, например, написать вначале в поле content «

Анджелина Джоли

», то при выводе мы увидим, что тег h1 был экранирован, то есть, заменен спецсимволами. Это намеренное поведение Django с целью защиты сайта от возможных хакерских атак. Если же нам все-таки нужно вывести статью без экранирования тегов, то можно использовать фильтр: %> контент Например, чтобы отключить экранирование, в шаблоне index.html можем указать, чтобы поле content выводилось как есть со всеми тегами:

p> {% autoescape off %} linebreaks} {% endautoescape %} /p>

Как подключить css django

Веб-приложение, как правило, использует различные статические файлы — изображения, файлы стилей css, скриптов javascript и так далее. Рассмотрим, как мы можем использовать подобые файлы.

При создании проекта Django он уже имеет некоторую базовую настройку для работы со статическими файлами. В частности, в файле settings.py определена переменная STATIC_URL , которая хранит путь к каталогу со статическими файлами:

STATIC_URL = 'static/'

А среди установленных приложений в переменной INSTALLED_APPS указано приложение django.contrib.staticfiles

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'hello', ]

Настройка статических файлов в файле settings.py в проекте на Django

Переменная STATIC_URL имеет значение «static/», а это значит, что нам достаточно создать в папке приложения каталог с именем «static» и добавить в него необходимые нам статические файлы. Но, естественно, при необходимости через данную настройку мы можем изменить расположение каталога статических файлов.

Итак, добавим в папку приложения новый каталог static . Чтобы не сваливать все статические файлы в кучу, определим для каждого типа файлов отдельные папки. В частности, создадим в папке static для изображений каталог images , а для стилей — каталог css . Подобным образом можно создавать папки и для других типов файлов.

В папку static/images добавим какое-нибудь изображение — в моем случае это будет файл forest.jpg . А в папке static/css определим новый файл styles.css , который будет иметь какие-нибудь простейшие стили, например:

body < font-family: Verdana;>h1 img

Статчиеские файлы в проекте на Django

Теперь используем эти файлы в шаблоне. Для этого в начале файла шаблона необходимо определить инструкцию

При этом данный код должен идти после тега DOCTYPE.

Для определения пути к статическим файлам используются выражения типа

Так, пусть в приложении в папке templates определен шаблон index.html , который имеет следующий код:

     " /> Django на METANIT.COM  Зимний лес
 " alt="зимний лес" >

Работа со статическими файлами в веб-приложении на Django

При запуске приложения шаблон index.html будет генерироваться в следующую веб-страницу, которая будет использовать изображение и применять стили:

подключение статических файлов в приложении на Django и Python

Настройка путей к файлам

Если нас не устраивает хранение файлов в каталоге по умолчанию — каталоге static, либо мы хотим указать несколько папок, то мы можем в файле settings.py задать все необходимые каталоги с помощью переменной STATICFILES_DIRS , которая принимает список путей:

STATICFILES_DIRS = [ BASE_DIR / "static", "/var/www/static/", "/somefolder/" ]

Настройка и подключение статических файлов в Django

Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.

Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.

1. Создадим папку для статических файлов

В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».

Создадим папку для статических файлов

2. Укажите статический URL Django в настройках

Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.

# dstatic > dstatic > settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
Они должны быть там по умолчанию.
После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.
# dstatic > dstatic > settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]

Не забудьте импортировать библиотеку os после добавления кода выше.

После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.
3. Создайте папку для изображений
Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.

4. Загрузите статический файл в свой HTML-шаблон
Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.

Важно добавить до того, как добавлять изображение. В противном случае оно не будет загружено.

Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
dstatic > templates > home.html
Home Привет Django

Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:

5. Создание папки и файла JavaScript
Если нужно добавить кастомные JS-файлы в проект, создайте папку «js» внутри «static».
Можно также использовать элемент внутри шаблона, но создание отдельного JS-файла улучшит организацию проекта и поможет проще находить все скрипты в одном месте.
Создание файла script.js
В папке static > js создайте файл «script.js», в котором будут храниться все функции JavaScript.
$(window).scroll(function() < if ($(document).scrollTop() >600 && $("#myModal").attr("displayed") === "false") < $('#myModal').modal('show'); $("#myModal").attr("displayed", "true"); >>);
6. Загрузите скрипт в шаблон
Теперь для подключения JS-файла к проекту добавьте файл в «header.html». Файл должен вызываться так же, как и в случае с изображениями.
Не забудьте и о в верхней части страницы для корректной работы тегов.
Home Привет Django

7. Создание папки и файла для CSS
Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент и вложить все стили туда.

Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.
Создание файла стилей css
Создайте файл «stylesheet.css» в static > css . Там будут храниться все ваши стили.
.custom
8. Загрузите ссылку на CSS в шаблон
Для подключения собственных стилей к проекту, добавьте HTML-элемент в «header.html». Файл вызывается так же, как изображения и JS-файлы.
Home " type="text/css"> Привет Django

И снова не забудьте о в верхней части страницы. Если не добавить эту строку, то будет ошибка.
Если класс custom добавить к container вы увидите изменения:

Ошибки, связанные с загрузкой статических файлов Django
Если вы получили ошибку «Invalid block tag on line 8: ‘static’, expected ‘endblock’. Did you forget to register or load this tag?», то вы наверняка забыли добавить тег загрузки статических файлов в верхней части страницы: до вызова самого изображения.

Такая ошибка «Could not parse the remainder: ‘/photo.jpg’ from ‘img/photo.jpg’» значит, что вы забыли добавить кавычки вокруг ссылки на изображения. В этом случае нужно использовать две пары кавычек: одни для всего содержимого src , а вторые — для ссылки на изображение.

«Invalid block tag on line 9: »static/img/photo.jpg», expected ‘endblock’. Did you forget to register or load this tag?» говорит о том, что вы случайно добавили тег static в URL.

Если страница не загружается, и появляется следующая ошибка: «django.core.exceptions.ImproperlyConfigured: You’re using the staticfiles app without having set the required STATIC_URL setting», то это указывает на то, что вы забыли указать статический URL в файле настроек. Его нужно задать в settings.py и сохранить документ.
STATIC_URL = '/static/'
Наконец, если вы не получаете ошибку, но изображение не отображается, то убедитесь, что вы правильно используете тег.

Я создал этот блог в 2018 году, чтобы распространять полезные учебные материалы, документации и уроки на русском. На сайте опубликовано множество статей по основам python и библиотекам, уроков для начинающих и примеров написания программ.
Мои контакты: Почта

Python Q https://yandex.ru/q/loves/python Online

Python Q CEO Pythonru admin@pythonru.com https://secure.gravatar.com/avatar/b16f253879f7349f64830c64d1da4415?s=96&d=mm&r=g CEO Pythonru Python Александр Редактор https://t.me/cashncarryhttps://pythonru.com/https://yandex.ru/q/profile/cashnc/ PythonRu.com admin@pythonru.com Alex Zabrodin 2018-10-26 Online Python, Programming, HTML, CSS, JavaScript
Читать:
Как вывести приложение звукозапись на экран самсунга