Шаблонизатор Jinja Django

Для отображения контента на стороне frontend одним из самых популярных и простых в исспользовании модулей является frontend шаблонизатор Jinja Django.

Jinja уже встроен в Flask и Django, дополнительно его устанавливать нет необходимости, официальная документация Jinja находится здесь.

Но все же, если вы не исспользуете выше названные фраемворки, то установить его можно через терминал, командой:

pip install Jinja

Основная задача модуля – это преобразование тектовых шаблонов, с чем он справляется просто отлично!

Отображение данных в Jinja

Для общего понимания, как работает модель Jinja:

from jinja2 import Template

name = "Иван"
age = 30
tm = Template("Мне {{ a }} лет и зовут меня {{ n }}")
msg = tm.render(n=name, a=age)
print(msg)

Здесь мы видим не привычное нам – {{ }}, как раз в двойных фигурных скобках можно писать:

  • {%%} – спецификатор шаблона;
  • {{ }} – выражение для вставки конструкции Python в шаблон;
  • {##} – блок коминтариев.

Обратите внимание на именованные параметры в методе render, они воспринимаются как словарь, где ключи в моем примере это “n” и “a”, а значения – объекты переменных name и age.

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

tm = Template("Мне {{ a*2 }} лет и зовут меня {{ n.upper() }}")
# Мне 60 лет и зовут меня ИВАН

Услажним немного наш код, перепишем с применением классов:

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

person = Person("Иван", 30)
tm = Template("Мне {{ p.age }} лет и зовут меня {{ p.name }}")
msg = tm.render(p = person)
print(msg)
# Мне 30 лет и зовут меня Иван

Когда мы что-то передаем в метод render, в нашем случае это p = person, то во внутрь шаблоно этот атрибут попадает по ссылке, в нашем случае по p.

Или, второй пример, как работает шаблонизатор Jinja Django:

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    def getName(self):
        return self.name
    def getAge(self):
        return self.age

person = Person("Иван", 30)
tm = Template("Мне {{ p.getAge() }} лет и зовут меня {{ p.getName() }}")
msg = tm.render(p = person)
print(msg)
# Мне 30 лет и зовут меня Иван

Но, не стоит забывать о таком типе данных, как dict – он очень часто здесь применяется, и в шаблон мы можем тоже передавать данные прям со словаря:

from jinja2 import Template


person = {'name': 'Иван', 'age': 30}
tm = Template("Мне {{ p.age }} лет и зовут меня {{ p.name }}")
msg = tm.render(p=person)
print(msg)
# Мне 30 лет и зовут меня Иван

Или же, получить значения можно обращаясь по ключам:

tm = Template("Мне {{ p['age'] }} лет и зовут меня {{ p['name'] }}")

Экранирование данных в строках, модуль Jinja

Один из самых часто применяемых способов экранирования – использование класса escape:

from markupsafe import escape

link = '''Как показать ссылку в 
<a href="#">Ссылка</a> HTML документе'''

msg = escape(link)
print(msg)

Также, есть возможность выполнять экранирование используя конструкцию {% raw %} .... {% endraw %}, и все, что помещается внутрь этой конструкции – будет экранировано:

link = '''{% raw %}Как показать ссылку в 
<a href="#">Ссылка</a> HTML документе{% endraw %}'''

tm = Template(link)
msg = tm.render()
print(msg)

Знак минус в конце тега очищает все пробелы и новые строки, предшествующие первому символу ваших необработанных данных. {% raw -%}

Иногда, можно встретить внутри фигурных скобок и другие флаги, например флаг “e” также выполняет экранирование строк, а точнее специальных символов, таких как <,>,#,</>:

from jinja2 import Template

link = '''Как показать ссылку в 
<a href="#">Ссылка</a> HTML документе'''

tm = Template("{{ link | e }}")
msg = tm.render(link=link)
print(msg)

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

Рейтинг
( 1 оценка, среднее 5 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: