Django подключить html файл

Обновлено: 04.07.2024

simple tags – простые теги;
inclusion tags – включающие теги.

Подробную русскоязычную документацию по ним можно посмотреть по ссылке:

Simple Tags

Вначале мы создадим простой тег, который будет загружать категории из БД и использоваться непосредственно в шаблоне. Согласно документации теги должны располагаться в подкаталоге templatetags каталога приложения women и являться пакетом, то есть, содержать файл __init__.py. Сделаем это. Далее, нам нужно добавить в эту папку еще один python-файл, в котором и будем прописывать логику нового тега. Файл назовем каким-нибудь понятным именем, например, women_tags. Импортируем сюда модуль template для работы с шаблонами и наши модели:

Следующим шагом нам нужно создать экземпляр класса Library, через который происходит регистрация собственных шаблонных тегов:

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

Название функции get_categories мы придумываем сами. Теперь, чтобы связать эту функцию с тегом, или, превратить эту функцию в тег, используется специальный декоратор, доступный через переменную register:

Все, мы только что создали свой простой пользовательский тег для использования его в шаблонах.

Давайте им воспользуемся. Перейдем в базовый шаблон base.html и вначале выполним загрузку тегов, определенных в файле women_tags:

Далее, в месте вывода рубрик давайте просто запишем наш новый сформированный тег:

и при обновлении главной страницы увидим отображение объекта QuerySet. Это говорит о том, что все работает, так и должно быть, т.к. именно этот объект и возвращает данный тег. Но как нам теперь перебрать элементы этого объекта? Подставить в цикл тег get_categories мы не можем, т.к. это не переменная, а тег шаблона. Для этого в Django в тегах шаблонов можно использовать специальное ключевое слово as, которое сформирует ссылку на данные тега. В нашем случае это можно записать так:

Сформируется переменная categories, которую уже можно использовать в теге цикла for. Кстати, при обновлении страницы, тег get_categories уже не будет отображаться на странице, т.к. изменилось его поведение – данные передаются в переменную (точнее ссылку). Подставим переменную categories в цикл и обновим страницу. У нас визуально ничего не изменилось, но прежний параметр cats теперь стал не нужен и его можно не передавать в шаблоны. Значит, в функциях представления index и show_category его можно убрать. Таким образом, мы с помощью простого пользовательского тега смогли исключить дублирующий параметр и строчки кода.

Всегда ли тег будет называться по имени функции? В действительности, мы можем указать любое другое. Для этого в декораторе register.simple_tag достаточно указать параметр name и через него определить желаемое имя тега, например, так:

И, далее, в шаблоне base.html следует использовать имя 'getcats':

Как видите, все достаточно просто.

Inclusion Tags

Второй тип пользовательских тегов – включающий тег, позволяет дополнительно формировать свой собственный шаблон на основе некоторых данных и возвращать фрагмент HTML-страницы. Давайте посмотрим как он формируется и используется в шаблонах.

Сначала в файле women_tags.py добавим функцию для реализации этого второго тега и, так как она будет возвращать полноценный шаблон, то назовем ее show_categories:

Здесь у нас в функции происходит чтение всех рубрик из БД, а затем, возвращается словарь с этими данными. Словарь используется как набор параметров для шаблона, указанный в параметре декоратора inclusion_tag. То есть, в шаблоне list_categories.html будет доступна директива cats со списком всех рубрик. Именно этот сформированный шаблон и будет возвращаться данным тегом.

Осталось прописать сам шаблон. Разместим его среди всех остальных шаблонов (хотя, при необходимости, можно создать отдельный подкаталог и размещать шаблоны тегов в нем). И скопируем в него следующий фрагмент шаблона из base.html:

Здесь переменную categories заменим на cats, так как именно ее мы передаем как параметр этому шаблону, и наш тег готов.

Осталось вызвать его в базовом шаблоне base.html и вместо вывода рубрик, записать тег:

Обновляем главную страницу сайта и видим, что все работает – рубрики выводятся с помощью нашего включающего тега. (При необходимости перезапустите тестовый веб-сервер). Правда, в шаблоне list_categories.html отсутствует директива cat_selected, но мы это сейчас поправим.

Передача параметров пользовательским тегам

Все наши теги могут принимать некоторые параметры, которые расширяют их функциональность. О чем здесь речь? Смотрите, для начала обратимся к простому тегу и изменим его функцию, следующим образом:

То есть, мы добавили один именованный параметр filter, который по умолчанию равен None и функция возвращает все категории. Если же указать какое-либо числовое значение, то будем получать категорию с указанным идентификатором. Как теперь все это можно использовать в шалонах? Давайте перейдем в base.html и для начала просто вызовем этот тег:

При обновлении главной страницы, увидим список всех категорий. Это пример вызова тега без параметров. А теперь укажем параметр, например, так:

Увидим первую рубрику. Или, можно указать его так:

Увидим только вторую рубрику. Вот так определяются и используются параметры у пользовательских тегов.

Давайте проделаем похожую операцию, но с включающим тегом. Определим у него два именованных параметра:

Первый будет выполнять сортировку по указанному полю, а второй – недостающий параметр cat_selected. Далее, в функции делаем выборку в соответствии с параметром sort, а затем, передаем шаблону дополнительный параметр cat_selected.

Все, теперь наш включающий тег может принимать два параметра. В шаблоне base.html пропишем его вызов, например, так:

Здесь первый параметр –name будет определять сортировку по названию рубрик, а второй – просто передает нужный для обработки данных параметр cat_selected. Также можно указать только какой-либо один параметр, например, так:

Но вернем вариант:

чтобы тег работал как положено. Как видите, в Django достаточно просто создавать и использовать пользовательские теги. Попробуйте самостоятельно сделать отображение главного меню через пользовательские теги, чтобы исключить и это дублирование в функциях.

Видео по теме

© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта

Последним, что нам стоит сделать для нашего веб-сайта, является удобный способ добавления и редактирования записей. admin -панель Django удобна, но её дизайн сложно изменять. С forms (формами) у нас будет абсолютная власть над интерфейсом блога — мы сможем сделать практически всё, что только можно придумать!

Формы Django удобны тем, что мы можем создать новую форму с нуля или воспользоваться ModelForm для сохранения содержимого формы в модель.

Это как раз то, что нам нужно сделать: мы создадим форму для модели Post .

Как и любая важная часть Django, формы имеют свой собственный файл: forms.py .

Нам нужно создать файл с таким именем в директории blog .

Теперь открой его и набери следующее:

Для начала нам нужно импортировать формы Django ( from django import forms ) и, разумеется, нашу модель Post ( from .models import Post ).

PostForm , как ты, вероятно, подозреваешь, — это имя для нашей формы. Нам нужно также сообщить Django, что эта форма относится к ModelForm (чтобы он смог поколдовать для нас) — forms.ModelForm поможет с этим.

Дальше у нас class Meta , где мы определяем, какая модель будет использоваться для создания формы ( model = Post ).

В завершение мы можем указать, какие поля должны присутствовать в нашей форме. Сейчас нам требуются только поля title и text — author будет автоматически выбран в зависимости от авторизованного пользователя (тебя), а created_date должна автоматически проставляться в момент создания записи (т.е. через код), верно?

Вот и всё! Теперь мы можем использовать форму в представлении и отобразить её в шаблоне.

Поэтому снова нам необходимо создать ссылку на страницу, URL-адрес, представление и шаблон.

Ссылка на страницу с формой

Пришло время открыть файл blog/templates/blog/base.html . Мы добавим ссылку в элемент div с именем page-header :

Обрати внимание, что мы назвали новое представление post_new . Класс glyphicon glyphicon-plus определён в используемой нами теме bootstrap — таким образом мы выведем значок плюса.

После добавления строки твой html-файл должен выглядеть следующим образом:

Нам нужно открыть файл blog/urls.py и добавить строку:

Окончательная версия файла будет выглядеть следующим образом:

После перезагрузки веб-сайта мы увидим ошибку AttributeError , поскольку представление post_new не реализовано. Давай добавим его прямо сейчас.

Представление post_new

Самое время открыть файл blog/views.py и добавить следующую строку к остальным, начинающимся с from :

А затем наше представление:

Чтобы создать новую форму Post , нам потребуется вызвать PostForm() и передать её шаблону. Мы ещё вернёмся к этому представлению, а пока давай быстро создадим шаблон под форму.

Шаблон

Нам нужно создать файл post_edit.html в директории blog/templates/blog . Чтобы заставить форму работать, нам потребуется несколько вещей:

Нам нужно отобразить форму. Мы можем сделать это, к примеру, простым > .
Строка выше должна быть обёрнута в HTML-теги <form method="POST">. </form>
Нам потребуется кнопка Save . Мы добавим её при помощи HTML-кнопки: <button type="submit">Save</button>
И, наконец, сразу после открытия тега < form. > мы должны добавить . Это очень важно, поскольку так мы делаем форму защищённой! Django будет ругаться, если ты забудешь добавить этот код:

Хорошо, давай посмотрим, как должен выглядеть HTML-код в файле post_edit.html :

Время обновить страницу! Ура! Форма отображается!

Но подожди минутку! Если ты наберёшь что-нибудь в полях title и text и попробуешь сохранить — что произойдёт?

Ничего! Мы снова на той же странице и наш текст пропал. и новая запись не была добавлена. Так что же пошло не так?

Ответ прост: ничего. Нам нужно сделать кое-что ещё, чтобы новое представление заработало.

Сохраняем данные из формы

Снова открой файл blog/views.py . Всё, что у нас есть в представлении post_new , выглядит пока следующим образом:

После отправки формы мы возвращаемся к тому же представлению, но в этот раз с новыми данными в request , а точнее, в request.POST (имя POST не имеет ничего общего с "постом" в блоге, оно связано с тем, что мы "публикуем" данные). Помнишь, что в HTML-файле определение <form> имеет параметр method="POST" ? Все поля формы теперь находятся в request.POST . Ты не должна переименовывать POST во что-то другое (другое доступное значение параметра method — GET , но у нас сейчас нет времени объяснять разницу).

Получается, что в представлении view нам нужно обработать две разные ситуации. Первая: когда мы только зашли на страницу и хотим получить пустую форму. Вторая: когда мы возвращаемся к представлению со всей информацией, которую мы ввели в форму. Таким образом, нам потребуется ввести условие (для этого мы будем использовать условный оператор if ):

Теперь заполним строку, занятую [. ] . Если method — POST , тогда мы хотим построить PostForm с данными из формы, верно? Мы добьёмся этого следующим образом:

Легко! Дальше мы проверим, корректна ли форма (все ли необходимые поля заполнены и не отправлено ли некорректных значений). Мы сделаем это при помощи form.is_valid() .

Мы проверяем, допустимо ли содержимое формы, и, если всё в порядке, сохраняем её!

Фактически мы выполняем две операции: сохраняем форму form.save и добавляем автора (поскольку обязательного поля author нет в PostForm !). commit=False означает, что мы пока не хотим сохранять модель Post — сначала нужно добавить автора. В основном ты будешь использовать form.save() , без commit=False , но в данном случае нам это пригодится. post.save() сохранит изменения (после добавления автора), и новая запись будет создана!

Наконец, будет прекрасно, если мы сможем сразу переходить к странице post_detail после добавления новой записи, согласна? Для этого нам понадобится еще один импорт:

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

post_detail — это имя представления, которое нам необходимо. Помнишь, что это представление требует переменную pk ? Чтобы передать её представлению, мы используем аргумент pk=post.pk , где post — это новая запись в блоге!

Хорошо, мы многое обсудили, пора взглянуть на представление полностью, верно?

Возможно, ты заметила, что мы устанавливаем дату публикации перед сохранением поста. В последствии мы сделаем кнопку публикации в Django Girls Tutorial: Extensions.

Валидация формы

Теперь мы покажем тебе, насколько круты формы в Django. Запись в блоге должна иметь поля title и text . В нашей модели Post мы не указываем, что эти поля необязательны (в отличие от published_date ), так что Django по умолчанию будет ожидать, что пользователь их заполнит.

Попробуй сохранить форму с незаполненными полями title и text . Угадай, что произойдёт!

Django заботится о проверке всех полей в нашей форме на корректность. Разве не шикарно?

Форма редактирования

Теперь мы знаем, как добавить новую форму. Но что, если мы хотим внести исправления в уже существующую запись? По сути это схожая с предыдущей задача. Давай быстро создадим пару важных вещей (если ты чего-то не понимаешь, спроси своего тренера или загляни в предыдущие главы, поскольку мы уже объясняли все необходимые шаги).

Открой blog/templates/blog/post_detail.html и добавь следующую строку:

так, чтобы шаблон выглядел следующим образом:

В файле blog/urls.py добавь:

Мы будем использовать повторно шаблон blog/templates/blog/post_edit.html , так что осталось лишь отсутствующее представление.

Давай откроем файл blog/views.py и добавим в самый конец следующее:

Выглядит практически идентично представлению post_new , верно? Но не совсем. Во-первых, мы передаём параметр pk из URL-адреса. Кроме того, мы получаем модель Post для редактирования при помощи get_object_or_404(Post, pk=pk) и передаём экземпляр post в качестве instance форме и при сохранении…

… и когда мы открываем форму для редактирования:

Хорошо, давай удостоверимся, что всё работает! Перейди на страницу post_detail . Ты должна увидеть кнопку редактирования в правом верхнем углу:

Когда ты её нажмёшь, то увидишь форму с выбранной записью:

Поменяй заголовок и текст, а затем сохрани запись!

Поздравляем! Твое приложение становится всё более сложным!

Безопасность

Круто иметь возможность создавать новые посты, просто перейдя по ссылке! Однако сейчас кто угодно из посетителей твоего сайта может создать новую запись в блоге, а это, скорее всего, совсем не то, чего бы тебе хотелось. Давай сделаем так, чтобы кнопка показывалась для нас, а не кого-либо ещё.

В файле blog/templates/blog/base.html найди page-header div и тег <a> , который мы добавили ранее. Должно выглядеть примерно так:

Мы добавим сюда ещё один тег , чтобы ссылка показывалась только пользователям, вошедшим в админку. То есть пока что — только тебе! Измени тег <a> , чтобы получилось так:

Из-за этого ссылка будет отправлена в браузер, только если запрашивающий страницу пользователь вошёл в систему. Это не обезопасит создание новых постов полностью, но для начала и это неплохо. Мы подробнее рассмотрим вопросы безопасности в дополнении к учебнику.

Помнишь иконку редактирования, которую мы добавили на страницу поста? Чтобы посторонние не смогли менять уже созданные посты, нам нужно изменить страничку похожим образом.

Открой файл blog/templates/blog/post_detail.html и найди такую строку:

Замени её на следующее:

Поскольку ты авторизована, никаких изменений после обновления страницы ты не увидишь. Но попробуй загрузить страницу в другом браузере или в режиме инкогнито, и увидишь, что ссылка не отобразится!

И последнее: публикация!

Теперь давай посмотрим, как это будет работать на PythonAnywhere. Пришло время для очередного развёртывания!

Сначала нам нужно сделать commit и push нового кода в репозиторий GitHub:

(Не забудь подставить вместо свой поддомен на PythonAnywhere без угловых скобок.)

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы ;)

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в <head> твоего .html файла ( blog/templates/blog/post_list.html ):

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Выглядит уже лучше!

Статические файлы в Django

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

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения "admin". Теперь нам нужно добавить статические файлы для своего приложения blog .

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static . Затем создай новый файл под названием blog.css внутри папки css . Готово?

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a , h1 , body ), атрибутом class или атрибутом id . Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a , класса external_link или идентификатора link_to_wiki_page :

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

Мы просто загружаем здесь статические файлы :) Далее между <head> и </head> , после ссылок на файлы Bootstrap CSS, добавь такую строку:

Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.

Твой файл должен теперь выглядеть следующим образом:

Ок, сохрани файл и обнови страницу!

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head> в файле blog/templates/blog/post_list.html :

Теперь добавь строку font-family: 'Lobster'; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:

Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div , содержащий наш заголовок, как это сделано здесь:

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа . , относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css :

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

в blog/templates/blog/post_list.html этим кодом:

Сохрани эти файлы и обнови свой веб-сайт.

Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

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

python manage.py collectstatic

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

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

Для этого откроем файл coolsite/settings.py и внизу уже видим заданную константу STATIC_URL с префиксом '/static/', который будет добавляться к URL статических файлов. Этот префикс должен соответствовать имени папки, в которой предполагается хранить статические файлы. Далее, определим путь к папке static всего проекта (выделена красным) с помощью константы:

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

В нашем случае таких путей нет, поэтому список пуст.

Давайте теперь создадим папку static в нашем приложении women и, также как и для шаблонов, укажем в ней вложенный каталог women, чтобы не было конфликтов имен между статическими файлами разных модулей и приложений. (В действительности, Django просто найдет первый подходящий файл и на этом остановится. Чтобы этот файл был тем, что нам нужен, как раз и используется дополнительный каталог, который играет роль некоторого пространства имен.)

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

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

А, затем, для формирования URL к тому или иному статическому файлу, используется конструкция:

Например, для подключения css-файла в базовом шаблоне base.html, следует прописать:

При просмотре страницы увидим следующий URL-адрес:

И, щелкнув по нему, убеждаемся, что он успешно загружается.

Отлично, это мы сделали. Далее, я возьму заготовленные html-файлы для базового шаблона страниц (base.html) и главной страницы (index.html). Для более детального ознакомления вы сможете их скачать по ссылке с github. Также я добавил в БД знаменитых женщин и их биографии. Сделал это с помощью SQLiteStudio. После всех этих изменений главная страница сайта выглядит так:

Конечно, вы можете использовать свои шаблоны, принципиального значения это не будет иметь. Часто для оформления сайтов используют онлайн-сервисы. Наиболее известный из них

Но я намеренно не стал к нему обращаться, чтобы не усложнять изложение материала по Django.

Итак, на нашем сайте выводится пока только заголовок и контент статей. Нам бы хотелось, чтобы в списке контент выводился не полностью, а фрагментом, скажем, 50 слов или 100 символов. Как это сделать? Для таких целей в шаблонах предусмотрены специальные фильтры, которые позволяют управлять фрагментами данных. Список всех фильтров можно посмотреть на странице русскоязычной документации:

Использовать их предельно просто. Смотрите, нам для правильного отображения страницы нужно, во-первых, проставить теги абзацев при выводе постов. Это можно сделать с помощью фильтра:

Здесь value – это некая переменная шаблона, к которой применяется фильтр linebreaks. Этот фильтр ставит тег перевода строки <br>, если строки в тексте следуют друг за другом и тег абзаца <p>, если между строками имеется пустая строка. Я добавлял текст в БД с пустыми строками, поэтому этот фильтр добавит теги абзацев.

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

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

И применим его в нашем шаблоне следующим образом:

Смотрите, здесь к контенту применяются сразу два фильтра: первый добавляет теги абзацев, а второй обрезает текст до 50 слов. То есть, мы легко можем применить к переменной множество фильтров для получения искомого результата. Обновим страницу и увидим адекватное отображение списка актрис:

По аналогии используются все остальные фильтры в шаблонах фреймворка Django.

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

Например, чтобы отключить экранирование, в шаблоне index.html можем указать, чтобы поле content выводилось как есть со всеми тегами:

Вот так используются различные фильтры в Django.

Видео по теме

Читайте также: