Как передать данные в шаблон base html

Как передать данные в шаблон base html

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

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

Например, определим шаблон, который назовем base.html :

С помощью элементов <% block название_блока %> <% endblock название_блока %>определяются отдельные блоки шаблонов. При этом для каждого блока определяется открывающий элемент <% block название_блока %>и закрывающий элемент <% endblock название_блока %>.

Например, блок title :

Когда другие шаблоны будут применять данный шаблон, то они могут определить для блока title какое-то свое содержимое.

Для каждого блока можно определить содержимое по умолчанию. Так, для блока title это строка «Default title». И если другие шаблоны, которые будут использовать данный шаблон, не определят содержимое для блока title, то данный блок будет использовать строку «Default title»

Подобным образом здесь определены блоки header и content. Содержимое по умолчанию для блоков определять не обязательно. Самих блоков при необходимости можно определить сколько угодно.

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

Теперь применим этот базовый шаблон. Например, создадим новый шаблон index.html :

С помощью выражения <% extends "base.html" %>определяем, какой базовый шаблон будет расширяться. Затем определяется содержимое для блоков title и header. Стоит отметить, что необязательно указывать содержимое для всех блоков базового шаблона.

Также создадим шаблон contacts.html :

Этот шаблон также расширяет базовый шаблон base.html. В отличие от index.html здесь также определяется содержимое для блока content.

Таким образом, подобная функциональность позволяет нам избежать повторения одних и тех же элементов в разных шаблонах. И в то же время если нам потребуется что-то изменить, например, структуру страницы или какой-то общий элемент, то достаточно это сделать в одном файле — base.html.

Пусть в файле views.py имеются функции, которые используют эти шаблоны:

А в файле urls.py эти функции сопоставляются с определенными маршрутами:

В итоге вне зависимости от того, к какой функции мы обратимся, мы получим на веб-странице одну и ту же структуру с общими меню и футером:

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

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

У шаблона будет один общий контекст, который задается во вьюхе.

Именно так это и работает: чтобы в шаблоне что-то отобразилось, это туда надо передать. Есть правда пара инструментов, облегчающих пункт про «в каждое представление». Почитайте про контекстные процессоры и внезапно, про наследование class-based views

Name already in use

PythonCources / lesson29.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Урок 29. Templates

Что же такое шаблон? В бытовом понимании это заготовка под что-то, что потом будет использоваться, в Django это почти также.

Шаблонами мы называем заготовленные html страницы в которые мы можем добавить необходимые нам данные и логику.

Но как это работает?

Откроем начатый проект с прошлого занятия.

Создадим новую папку на уровне корня проекта и назовём её templates (Название может быть любым, но принято называть именно так.) Что бы получилась вот такая структура

Для того, что бы обрабатывать шаблоны мы должны «рассказать» Django где именно искать эти самые шаблоны, для этого нужно открыть mysite/settings.py и отредактировать его.

В данный момент нас интересует переменная TEMPLATES , выглядит примерно так:

В ключ DIRS добавим нашу папку с шаблонами, что бы получилось так:

BACKEND : Путь к классу который отвечает за обработку данных и логику. (Замена требуется очень редко)

DIRS : Список папок в которых Django будет искать шаблоны

APP_DIRS : Булевое поле которое отвечает за то, нужно ли искать папки с шаблонами внутри папки с приложениями, например в нашей структуре, если значение False , то поиск будет только в папке templates на уровне файла manage.py , а если значение True то в папках /templates и /myapp/templates/

OPTIONS : Дополнительные настройки, подробнее будем рассматривать позже.

Для применения любых изменений нужно перезапускать сервер (команда manage.py runserver из прошлого занятия)

Мы «рассказали» Django где именно искать шаблоны, но пока ни одного не создали, давайте сделаем это!

В папке templates нужно создать html файл, назовём его index.html (Название не имеет значения, главное, что бы формат был html )

С таким содержанием:

Итак, теперь у нас есть один шаблон, но мы его не используем, давайте переделаем нашу view для обработки шаблонов

В файле myapp/views.py нужно импортировать обработчик шаблонов, в начале файла добавляем

И перепишем функцию index :

Перезапустим сервер, и увидим результат на главной странице http://127.0.0.1:8000/

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

Для демонстрации основных типов данных, я допишу функцию index и передам большое кол-во значений в словаре:

Значения переданы, но пока они никак не используются, давай те же посмотрим, как отобразить переменные в шаблоне!

Для вывода данных в Django темплейте используются фигурные скобки << >>

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

Изменим наш index.html:

Обновим страницу и увидим.

Логические операторы и циклы

Все логические операторы и циклы в шаблонах нужно закрывать!

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

Давайте добавим в наши параметры переменную ‘display_num’ и назначим ей False

Для логических условий и циклов используются другие скобки

Изменим наш шаблон с использованием логики:

Обновим страницу и увидим:

А если изменим только во view переменную с False на True:

Т.к. переменная True, то мы видим значение переменной my_num

Так же как и в python мы можем использовать циклы в шаблонах, но только цикл for

Изменим наш index.html :

Обновим страницу и увидим:

Еще раз, логика через <% %>, данные через << >>

Внутри цикла for Джанго уже генерирует некоторые переменные, например переменную << forloop.counter0 >>

В которой хранится индекс текущей итерации, давайте не будем выводить в цикле второй элемент

Символ != это не равно, а значение 1, потому что индекс начинается с 0

Обновляем страницу и видим:

Встроенные темплейт теги.

На самом деле все ключевые слова используемые внутри <% %>называются template tags, и их существует огромное множество.

Их очень много, часть мы рассмотрим, часть вам прийдется изучить самостоятельно.

Тег url позволяет нам сгенерировать урл по его имени. Это очень удобно если адрес меняется, а его имя нет.

Давайте сгенерируем две ссылки на два наших урла.

Назначим имя index

Назначим имя first

Добавим в наш шаблон ссылку на вторую страницу:

Наш индекс пейдж:

Extends и block

Теги наследования шаблонов extends , block

Зачем нам это надо?

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

Тут нам и помогут наши волшебные теги!

Создадим в папке templates новые файлы base.html и first.html и изменим файлы templates/index.html и функцию first в myapp/views.py

Функция first в myapp/views.py

Смотрим результаты произошедшего и пытаемся их понять. (ссылки добавлены для удобства)

Мы создали базовый шаблон base.html в котором описали то что будет во всех шаблонах (И покрасили в голубенький, для наглядности) которые от него наследуются, и обозначили <% block content %>(слово контент взято из головы, назвать можно как угодно) вся нужная нам информация будет наследоваться именно в указанный блок, на странице разных блоков может быть сколько угодно главное, что бы они имели разные названия.

Наш индекс пейдж рендерит страницу index.html в ней мы отнаследовались от нашей base.html вписали такой же блок content что бы в него вписать нужные нам данные, в нашем случае это просто текст и ссылка, текст мы перекрасили, что бы было видно что это данные из нового файла, а ссылку нет, что бы было видно, что цвет из base.html отнаследовался, то же самое произошло и с first.html

А теперь представим обратную ситуацию, нам нужно в разные части сайта «засунуть» один и тот же блок (рекламу например)

Тут нас спасает тег include который позволяет «внедрить» нужную часть страницы куда угодно

Создадим в папке templates еще один файл с названием add.html

И теперь добавим этот файл к страницам index.html и first.html но в разные места, что бы получилось

Смотрим на результат:

В добавленную станицу можно передать переменные, при помощи тега with

Изменим файл templates/add.html

И файл templates/index.html

Смотрим на результат:

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

Давайте добавим проверку на наличие переменной!

Смотрим на first page

Переменной нет, срабатывает if

Так же можно передавать эту переменную из view, для этого нужно в with дописать <>

Что это такое, и зачем это нужно?

Фильтры это возможность видоизменить данные перед их отображением, давайте попробуем ими воспользоваться, для этого во view добавим сверху файла

myapp/views.py функция index

А index.html изменим так

Смотрим на результат

Каждый фильтр имеет свои особенности и правила написания, подробнее можно посмотреть по ссылке выше.

Так же для данных существуют встроенные фильтры

Например date , default , join , capfirst на самом деле их огромное кол-во весь список встроенных фильтров можно посмотреть Тыц

Кастомные темплейт теги и фильтры

На самом деле, стандартным набором дело не ограничивается и если нужно можно дописать свои теги и фильтры, почитать об этом можно вот тут

Домашнее задание / Практика

Продолжаем собирать блог

На данном этапе мы пока не можем реализовать все что указанно в спецификации поэтому на текущем моменте надо реализовать такие страницы как:

Все страницы должны быть отнаследованы от базового шаблона, сверху должна быть навигация между указанными ниже страницами (для детального просмотра, впишите любой стационарный слаг):

Flask — HTML-шаблон с MySQL

В этой статье мы рассмотрим, как вы можете визуализировать свою веб-страницу из файла HTML. а затем подключите свое приложение к базе данных MySQL для операций с базой данных.

Если вы только начинаете работать с Flask, я бы порекомендовал статью ниже, чтобы понять это очень легко.

Первый шаг — создать каталог с именем templates, нам нужно хранить все html-файлы в этом каталоге. Flask автоматически найдет html-файлы в этом каталоге.

Я создал в этом каталоге файл с именем index.html со следующим кодом.

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

Хорошо, теперь нам нужно создать файл python, который будет нашим файлом приложения фляги. Я создал файл с именем application.py в нашем родительском каталоге. добавьте в файл следующий код.

Поэтому, когда мы переходим к «/» в нашем браузере, он вызывает функцию helloworld (). когда мы рендерим html-страницу из фляги, нам нужно вызвать render_template с нашим именем html-файла, это будет искать файл в каталоге / template.

В render_template первым параметром является имя файла, а затем мы можем определить некоторую переменную, которую мы будем использовать на странице html. Здесь я присваиваю «hello world 1» переменной text.

Теперь давайте внесем некоторые изменения в наш html-файл, чтобы распечатать это значение переменной.

Понимаете!! когда нам нужно отобразить значение переменной из колбы в html, мы используем
<>, это отобразит фактическое значение, удерживаемое этой переменной.

Давайте зайдем на наш фляжный сервер и посмотрим, работает ли это.
Перейдите в свой терминал и запустите команду python application.py

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

Теперь перейдем к части MySQL. Я создам таблицу db, в которой будет храниться текстовое значение. Из приложения flask мы запишем в таблицу с помощью формы, Показать весь текст в списке html.

Для сервера MySQL я использую phpMyAdmin (он уже был установлен в моей системе, но если вы хотите использовать другой сервер mysql, определенно продолжайте.)

Теперь нам нужно создать html-форму, чтобы пользователи могли вводить текст и сохранять в БД.

добавьте следующий код формы в html файл, который будет отображать форму.

здесь, в параметре действие, мы вызываем «/ add_text», это означает, что вместо «/» во флаконе мы вызываем новый URL-адрес, который нам нужно определить в нашем приложении флакона. но сначала давайте создадим еще один файл, в котором будет весь код операций с нашей базой данных.

Я создаю файл с именем DB_Operations.py,

Чтобы подключить флягу к mysql, нам нужно установить pymysql с помощью

В приведенном выше коде сначала мы подключаемся к mysql, передавая значение host, user, passwd, database. Убедитесь, что вы передаете здесь правильные значения, иначе могут возникнуть проблемы с подключением к базе данных.

Теперь мы изменим application.py и добавим новую функцию для add_text

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

Я отправил эту форму со значением «следующий текст», давайте проверим, работает ли она.

Теперь мы покажем все данные из таблицы db на страницу html в виде списка.

добавьте следующий код в файл DB_Operations.py

В результате будут извлечены все строки из mytable и будет возвращен результат.

Flask — HTML-шаблон с MySQL

В этой статье мы рассмотрим, как вы можете визуализировать свою веб-страницу из файла HTML. а затем подключите свое приложение к базе данных MySQL для операций с базой данных.

Если вы только начинаете работать с Flask, я бы порекомендовал статью ниже, чтобы понять это очень легко.

Первый шаг — создать каталог с именем templates, нам нужно хранить все html-файлы в этом каталоге. Flask автоматически найдет html-файлы в этом каталоге.

Я создал в этом каталоге файл с именем index.html со следующим кодом.

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

Хорошо, теперь нам нужно создать файл python, который будет нашим файлом приложения фляги. Я создал файл с именем application.py в нашем родительском каталоге. добавьте в файл следующий код.

Поэтому, когда мы переходим к «/» в нашем браузере, он вызывает функцию helloworld (). когда мы визуализируем html-страницу из фляги, нам нужно вызвать render_template с нашим именем html-файла, это будет искать файл в каталоге / template.

В render_template первым параметром является имя файла, а затем мы можем определить некоторую переменную, которую мы будем использовать на странице html. Здесь я присваиваю «hello world 1» переменной text.

Теперь давайте внесем некоторые изменения в наш html-файл, чтобы распечатать это значение переменной.

Понимаете!! когда нам нужно отобразить значение переменной из колбы в html, мы используем
<>, это отобразит фактическое значение, удерживаемое этой переменной.

Давайте зайдем на наш фляжный сервер и посмотрим, работает ли это.
Перейдите в свой терминал и запустите команду python application.py

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

Теперь перейдем к части MySQL. Я создам таблицу db, в которой будет храниться текстовое значение. Из приложения flask мы запишем в таблицу с помощью формы, Показать весь текст в списке html.

Для сервера MySQL я использую phpMyAdmin (он уже был установлен в моей системе, но если вы хотите использовать другой сервер mysql, определенно продолжайте.)

Теперь нам нужно создать html-форму, чтобы пользователи могли вводить текст и сохранять в БД.

добавьте следующий код формы в html файл, который будет отображать форму.

здесь, в параметре действие, мы вызываем «/ add_text», это означает, что вместо «/» во флаконе мы вызываем новый URL-адрес, который нам нужно определить в нашем приложении флакона. но сначала давайте создадим еще один файл, в котором будет весь код операций с нашей базой данных.

Я создаю файл с именем DB_Operations.py,

Чтобы подключить флягу к mysql, нам нужно установить pymysql с помощью

В приведенном выше коде сначала мы подключаемся к mysql, передавая значение host, user, passwd, database. Убедитесь, что вы передаете здесь правильные значения, иначе могут возникнуть проблемы с подключением к базе данных.

Теперь мы изменим application.py и добавим новую функцию для add_text

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

Я отправил эту форму со значением «следующий текст», давайте проверим, работает ли она.

Теперь мы покажем все данные из таблицы db на страницу html в виде списка.

добавьте следующий код в файл DB_Operations.py

В результате будут извлечены все строки из mytable и будет возвращен результат.

Я внес некоторые изменения в функцию helloworld (). здесь я вызываю get_data () из файла DB_Operations, чтобы получить все строки и передать эти данные в index.html

Когда мы хотим использовать свойства python в html, мы используем

Это должно сработать и отобразить список строк из базы данных.

Я надеюсь, что эта статья помогла вам понять основы использования шаблонов и базы данных во Flask.

Если у вас есть какие-либо вопросы, прокомментируйте ниже, я отвечу на них.