Как подключить html к django
Веб-программирование → Статические файлы (js, css, картинки) в Django
Каждый из вас, кто уже попробовал свой сайт перевести на Django, скорее всего столкнулись с проблемой с файлами стилей и javascript. Вы наверное пробовали их засунуть в папку templates или куда-нибудь еще, но все равно не сработало. И ваш сайт загрустил без стилей и вместе с ним вы тоже. ☹️
В этой статье я покажу вам, что нужно сделать, чтобы все это заработало.
Файлы которые, не меняются пока работает ваш сайт или веб-приложение, называется статическими(statiс files).
Это javascript файлы, css файлы, картинки, шрифты и т.п. А вот html страницы у вас будут динамическими, т.е. изменяющимися, они могут по разному отображаться в зависимости от пользователя и его действий. Допустим страница поиска товаров отобразит для одного пользователя только кондиционеры, а для другого только мобильные телефоны. Но для Django это одна и та же страница. Просто данные другие.
Надеюсь, понятна разница. А еще браузеры в основномкешируют статические файлы, чтобы каждый раз не перезагружать с сервера. Они же не меняются. И если вы вдруг изменили css файл, чтобы текст был красным, а ваша страница все еще показывает зеленый текст 😱, не бойтесь! Просто очистите кеш браузера. 😉
Ладно, теперь к делу.
Цикл всех статей про Django:
1. Наш сайт и его static файлы
Здесь буду продолжать проект с последней статьи. Там у нас было две страницы: Главная и Контакты. И ничего больше. Давайте добавим туда немного красочных элементов с анимацией. Для этого нам нужны: один css-файл и два js-файла.
Один из них файл jquery, скачанный отсюда. Остальные два файлапока пустые. Потом заполним их.
Мы разделили стили и скрипты по папкам, создайте для картинок другую папку. Порядок важен для того, чтобы потом быстро находить нужный файл.
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 стили через тэг :
В атрибуте href должна быть указана ссылка. Мы конечно можем так оставить, но это не сработает если мы запустим наш сайт по другому домену. Поэтому в Django статические файлы подключаются по другому.
Чтобы подключить статик файл styles.css мы должны написать:
Чтобы подключить js файлы, пишем:
После этого Django срендерит(создаст) html страницу по шаблону, вместо <% static %>будут ссылки на статик файлы, которые мы указали. И эти ссылки будут работать всегда.
Теперь наш файл home.html выглядит так:
Запустите сайт и откройте главную страницу. Вы должны увидеть оранжевый заголовок. Значит мы подключили CSS стили правильно. Поздравляю! Вы умеете подключать CSS и JS файлы.
5. JS-эксперимент
Подошло время для эскперимента. Если вы умеете работать с CSS и JS, можете пропустить эту часть.
Откройте снова файл home.html и под заголовком
добавьте следующее:
Мы добавили два квадратных блока на экран. Добавим небольшой скрипт в файле scripts.js:
Здесь мы используя библиотеку jQuery прописали обработчики нажатия на два блока. Первый будет менять текст, а второй возвращать назад. Снова перезапустите сайт и откройте главную страницу. Попробуйте нажать на блоки.
Вот и на этом все, надеюсь теперь ваши сайты станут живее. Картинки работают точно также!
How to load external html into html inside Django template
I am trying to incorporate a django application into a web site where static html accounts for the majority. The directory structure is as follows.
<% include "/var/www/html/web/head.html" %>was useless. I do not want to change the directory structure.
3 Answers 3
Considering this as your directory structure:
To use /var/www/html/web/head.html in your index.html. Go to your settings.py and add this:
Now go to your index.html.
I hope this will help.
Add /var/www/html/web/ to the DIRS option in the template configuration dictionary in your project settings.
Your templates can go anywhere you want. Your template directories are by using the DIRS option in the TEMPLATES setting in your settings file. For each app in INSTALLED_APPS, the loader looks for a templates subdirectory. If the directory exists, Django looks for templates in there.
Paths should use Unix-style forward slashes, even on Windows.
Not the answer you’re looking for? Browse other questions tagged python django or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.20.41044
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Начинаем работу с Django — добавляем страницы
Чтобы добавить на сайт страницы, нужно понять логику работы Django.
Django использует простой и логичный подход. При работе с вашим сайтом пользователь вводит определенный адрес. Когда веб-сервер получает запрос, он передает этот адрес Django, после чего он проверяется на соответствие адресам, зарегистрированными в Django через urls.py через urlpatterns.
При этом нет нужны регистрировать отдельно каждый возможный адрес — адреса добавляются через регулярные выражения, определяющие скорее формат возможного адреса. Например: /archive/ / /.
Каждому url сопоставляется view — функция, которой Django передаст обращение при запросе данного адреса.
Для работы нашего сайта мы создадим 4 view
Создание первого View
Откройте polls/views.py и добавьте туда следующий код:
Это простейшая функция View, возможная в Django. Чтобы обратиться к ней, мы должны сопоставить ей URL — и для этого нам нужен URLconf.
Чтобы определить URLconf в приложении polls, создайте в нем файл urls.py. Каталог вашего приложения должен выглядеть так:
В файле polls/urls.py добавьте:
Осталось добавить созданный файл в корневой URLconf, определенный в файле mysite/urls.py. Вставьте include(), чтобы получилось следующее::
Теперь откройте в браузере http://localhost:8000/polls/ и вы увидите текст “Hello, world. You’re at the poll index.”, который мы прописали в index view.
Фукция url() получает 4 аргумента, из которых два — regex и view, — необходимы, и два можно не указывать: kwargs, и name.
url() argument: regex
“Regex” — это сокращение от “regular expression”, регулярные выражения. Регулярные выражения определяют синтаксис, позволяющий задать шаблоны, с которыми будет сверятся строки. В данном случае мы определяем шаблон, на соответствие с которым будет сверяться адрес. Django последовательно проверит запрошенный адрес на соответствие всем URL patterns, начиная с первого шаблона, и передаст управление соответствующей функции View при совпадении.
Данные регулярные выражения не определяют параметры GET или POST, а также название домена, на котором расположен сайт. Для примера, при запросе http://www.example.com/myapp/, URLconf будет искать myapp/. При запросе http://www.example.com/myapp/?page=3, URLconf также будет искать myapp/.
Старайтесь использовать по возможности простые регулярные выражения, поскольку их усложнение может сказаться на производительности и скорости работы сайта.
url() argument: view
When Django finds a regular expression match, Django calls the specified view function, with an HttpRequest object as the first argument and any “captured” values from the regular expression as other arguments. If the regex uses simple captures, values are passed as positional arguments; if it uses named captures, values are passed as keyword arguments. We’ll give an example of this in a bit.
url() argument: kwargs
Arbitrary keyword arguments can be passed in a dictionary to the target view. We aren’t going to use this feature of Django in the tutorial.
url() argument: name
Naming your URL lets you refer to it unambiguously from elsewhere in Django especially templates. This powerful feature allows you to make global changes to the url patterns of your project while only touching a single file.
Добавление views
Давайте добавим нужные нам views в polls/views.py. Поскольку в данном случае нам нужно передать параметр — номер вопроса — они будут немного отличаться:
Соответственно для их работы добавим новые шаблоны URL в polls.urls:
Теперь, если мы запросим в браузере http://localhost:8000/polls/23/, Django вызовет метод detail() и отобразит ID, который мы указали в URL.
Когда Django получает запрос к сайту, сначала загружается mysite.urls модуль, поскольку он указан в параметре ROOT_URLCONF в settings.py. Он находит переменную urlpatterns и проходит по порядку перечисленные в ней регулярные выражения. Функция include() позволяет включить в список URLconfs, определенные в другом месте. Обратите внимание, что регулярное выражение для include() на заканчивается символом $, означающим конец строки. но завершается слешем (/).
Когда Django встречает include(), она отрезает соответствующий ей URL из строки адреса и оставшуюся часть передает включенному URLconf для обработки..
Основная идея использования include() в том, чтобы сделать легко подключаемые URL. Поскольку мы определили все обрабатываемые приложением polls адреса в собственном URLconf (polls/urls.py), они могут біть расположены под “/polls/”, либо под “/fun_polls/”, или другой базовой частью адреса. и приложение будет работать.
Добавляем логику в функции views
Каждая функция view отвечает за две вещи. Она возвращает объект типа HttpRespons, в котором хранится содержимое запрошенной страницы. Либо она должна вызвать исключение Http404 — если искомой страницы не существует.
В остальном мы вольны делать что угодно. View могут обращаться к объектам базы данных, генерировать PDF документ либо ZIP архив, исползовать любую Python библиотеку. Без ограничений.
Мы будем использовать API Django для работы с базой данных. Чтобы вернуть при вызове index() view 5 последних вопросов,, используйте следующий код:
Django также предлагает нам возможность использовать шаблоны страниц, чтобы не генерировать каждый раз HTML код.
Использование шаблонов HTML в Django
Создайте каталог templates внутри polls. Там Django будет искать шаблоны для данного приложения.
Параметр TEMPLATE_LOADERS определяет список вызываемых объектов, которые знают как импортировать шаблоны из разных источников.
Одним из таких включенных изначально методов является django.template.loaders.app_directories.Loader. Он ищет каталог “templates” внутри каталога приложений, перечисленных в INSTALLED_APPS. Другим вариантом дать Django знать, где искать ваши шаблоны — изменить параметр TEMPLATE_DIRS,
Внутри каталога templates создайте другой каталог с названием polls, и добавьте туда файл index.html. Данный шаблон должен находится по адресу polls/templates/polls/index.html, что позволит обнаружить его загрузчику шаблонов app_directories. При этом внутри Django к этому шаблону можно обращаться просто polls/index.html.
Добавьте в шаблон следующий код:
Теперь давайте обновим index view в polls/views.py для использования шаблона:
Этот код загружает шаблон с названием polls/index.html и передает ему context. Context — это словарь, содержащий переменные — объекты Python — которые будут доступны в шаблоне.
Загрузив страницу “/polls/” вы увидите ненумерованный список вопросов, при этом каждый элемент списка будет ссылкой на страницу detail для конкретного вопроса.
Вызов render()
Стандартный подход заключается в загрузке шаблона, заполнении context и возврате объекта HttpResponse со сгенерированной на базе шаблона страницей. Для этого Django предлагает функцию render(). Перепишем наш index() view:
Функция render() берет объект request в качестве первого аргумента, имя шаблона в качестве второго и словарь, содержащий объекты для формирования страницы в качестве необязательного треьего. После генерации страницы render возвращает объект HttpResponse.
404 ошибка
Теперь давайте обработаем detail view. Эта страница будет отображать вопрос и варианты ответов на него с возможностью выбора. При этом если запрошенного вопроса нет в базе, нужно вернуть 404 ошибку.
Если вы сейчас попробуете открыть страницу для одного из существующих вопросов, то Django вернет ошибку TemplateDoesNotExist.
Создайте файл polls/detail.html со следующим содержимым:
Функция get_object_or_404()
При получении из базы объекта обычно мы используем get() и поднимаем Http404 если объекта не существует. Для этого Django предлагает функцию get_object_or_404()
Давайте перепишем detail() view:
Вызов get_object_or_404() использует определенную в Django модель в качестве первого аргумента и произвольное число ключей, которые будут переданы в метод get() определенный в рамках модели. Если объекта не существует, будет поднята ошибка 404.
Также существует get_list_or_404() которая аналогична get_object_or_404() за исключением использования метода filter() вместо get(). Эта функция поднимает Http404 если получает пустой список.
Доработка шаблона
Давайте доработаем шаблон, отображающий детали конкретного вопроса, который вызывается в detail() view:
HTML шаблоны, используемые Django, могут использовать передаваемые переменные и их атрибуты. В нашем случае << poll.question >> получит значение, хранящееся в атрибуте question прочитанного из базы объекта poll.
Посмотрите руководство по HTML шаблонам — template guide — для большей информации.
Убираем жесткие URL в шаблонах
В шаблоне polls/index.html мы жестко прописали часть ссылки:
По мере роста проекта подобные жестко заданные вещи могут стать причиной проблем, поэтому их нужно стремится избегать. Поскольку мы задали аргумент name в определении url() в polls.urls, можно заменить соответствующую часть адреса, используя тег :
Теперь если вы захотите изменить URL с polls/ на что-то другое, это будет достаточно сделать в файле polls/urls.py.
Наименование URL
До сих пор мы использовали только одно приложение polls. В настоящем проекте может быть 5-10 и больше приложений, и каждое из них может использовать detail. Чтобы Django могла определить правильное имя, нужно использовать более специфичные имена или добавить namespaces в основной URLconf. В mysite/urls.py включим namespace:
Теперь нужно изменить polls/index.html:
замените строкой с указанием namespace
Теперь на сайте созданы все основные страницы. Давайте подключим формы, чтобы дать возможность голосования!
Начинаем работу с Django — добавляем страницы: 6 комментариев
Пасябки за статью единственное в юрлах маленькая ошибка, в режексах лишний слеш. А так, нормуль ))
Застряла на создании первого views.
C самого начала делала все исключительно по инструкции, но почему-то именно в этом шаге не могу устранить ошибку: TypeError: ‘function’ object has no attribute ‘__getitem__’
ругается на файл polls\urls.py
from polls import views
urlpatterns = patterns[»,
url(r’^articles/$’, views.index)
]
Мануал устарел для django 1.8 и выше. Если у кого возникнет ошибка
1-е надо проверите версию django
2-e читайте стаью и ломайте голову http://stackoverflow.com/questions/38786036/importerror-cannot-import-name-patterns
или в терминале введите sudo pip install Django==1.8
polls.urls лишний слеш
urlpatterns = [
url(r’^$’, views.index, name=’index’),
url(r’^(?P\d+)/$’, views.detail, name=’detail’),
url(r’^(?P\d+)/results/$’, views.results, name=’results’),
url(r’^(?P\d+)/vote/$’, views.vote, name=’vote’)
]
В строках для Django 1.8+ нужно заменить на:
Настройка и подключение статических файлов в 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» в шаблоне для работы с источником изображения.
Как добавить страницу в Django
Каждый сайт состоит из страниц: главная, страница товара, профиль пользователя и так далее. В этом туториале вы добавите главную страницу интернет-магазина смартфонов к стандартному джанго-проекту:
1. Создайте заготовку
В первую очередь, конечно, вам нужно установить Django:
После установки создайте стандартный Django-проект. Он и будет вашим магазином смартфонов:
Вы получите файл manage.py и папку проекта со стандартными файлами:
2. Добавьте ссылку и вьюху
Чтобы на сайте появилась новая страница, нужно добавить её в urlpatterns : Добавьте к списку главную:
Вот что должно получиться:
Функция выше — не простая. Такие функции называются view. Они вызываются, когда пользователь заходит на страницы, за которые они отвечают. К этим функциям есть несколько требований:
3. Сделайте страницу главной
На самом деле, довольно просто: достаточно вместо 'phones/' поставить пустую строку:
4. Вынесите вьюху в файл для вьюх
Создайте такой файл и переместите функцию в него:
5. Подключите вёрстку
От страницы мало толку, если она возвращает просто текст. На деле странички сайтов содержат HTML-разметку. Как же это сделать?
Для начала скачайте страничку, которую уже подготовил фронтендер.
Чтобы Django нашла этот файл, в settings.py нужно добавить его в настройки:
Осталось только подключить этот шаблон во вьюхе и отдать вместо текста:
Что происходит на этих строчках:
Или, вместо примера выше используйте шорткат. Вместо страшной записи сверху, в Django есть специальная функция, чтобы сократить запись:
Готово, на главной появится эта страница:
Попробуйте бесплатные уроки по Python
Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.
Переходите на страницу учебных модулей «Девмана» и выбирайте тему.