Учебники

Джанго — система шаблонов

Август 14, 2018

Django позволяет разделить питон и HTML, питон идет в представлениях, а HTML — в шаблонах. Чтобы связать их, Django использует функцию рендеринга и язык шаблонов Django.

Функция рендеринга

Эта функция принимает три параметра —

  • Запрос — Первоначальный запрос.

  • Путь к шаблону — это путь относительно параметра TEMPLATE_DIRS в переменных проекта settings.py.

  • Словарь параметров — словарь, который содержит все переменные, необходимые в шаблоне. Эта переменная может быть создана или вы можете использовать locals () для передачи всех локальных переменных, объявленных в представлении.

Запрос — Первоначальный запрос.

Путь к шаблону — это путь относительно параметра TEMPLATE_DIRS в переменных проекта settings.py.

Словарь параметров — словарь, который содержит все переменные, необходимые в шаблоне. Эта переменная может быть создана или вы можете использовать locals () для передачи всех локальных переменных, объявленных в представлении.

Язык шаблонов Django (DTL)

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

Отображение переменных

Переменная выглядит следующим образом: {{variable}}. Шаблон заменяет переменную на переменную, отправленную представлением в третьем параметре функции рендеринга. Давайте изменим наш hello.html для отображения сегодняшней даты —

hello.html 

<html>
   
   <body>
      Hello World!!!<p>Today is {{today}}</p>
   </body>
   
</html>

Тогда наше мнение изменится на — 

def hello(request):
   today = datetime.datetime.now().date()
   return render(request, "hello.html", {"today" : today})

Теперь мы получим следующий вывод после обращения к URL / myapp / hello — 

Hello World!!!
Today is Sept. 11, 2015

Как вы, вероятно, заметили, если переменная не является строкой, Django будет использовать метод __str__ для ее отображения; и с тем же принципом вы можете получить доступ к атрибуту объекта так же, как вы делаете это в Python. Например: если мы хотим отобразить дату года, моя переменная будет: {{today.year}}.

фильтры

Они помогают вам изменять переменные во время отображения. Структура фильтров выглядит следующим образом: {{var | filters}}.

Некоторые примеры —

  • {{string | truncatewords: 80}} — этот фильтр будет обрезать строку, поэтому вы увидите только первые 80 слов.

  • {{string | lower}} — Преобразует строку в нижний регистр.

  • {{string | escape | linebreaks}} — удаляет содержимое строки, а затем преобразует разрывы строк в теги.

{{string | truncatewords: 80}} — этот фильтр будет обрезать строку, поэтому вы увидите только первые 80 слов.

{{string | lower}} — Преобразует строку в нижний регистр.

{{string | escape | linebreaks}} — удаляет содержимое строки, а затем преобразует разрывы строк в теги.

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

Теги

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

Отметить, если

Как и в Python, вы можете использовать if, else и elif в своем шаблоне — 

<html>
   <body>
   
      Hello World!!!<p>Today is {{today}}</p>
      We are
      {% if today.day == 1 %}
      
      the first day of month.
      {% elif today.day == 30 %}
      
      the last day of month.
      {% else %}
      
      I don't know.
      {%endif%}
      
   </body>
</html>

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

Тег для

Как и в случае с if, у нас есть тег for, который работает точно так же, как в Python. Давайте изменим наш вид приветствия, чтобы передать список в наш шаблон — 

def hello(request):
   today = datetime.datetime.now().date()
   
   daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   return render(request, "hello.html", {"today" : today, "days_of_week" : daysOfWeek})

Шаблон для отображения этого списка с помощью {{for}} — 

<html>
   <body>
      
      Hello World!!!<p>Today is {{today}}</p>
      We are
      {% if today.day == 1 %}
      
      the first day of month.
      {% elif today.day == 30 %}
      
      the last day of month.
      {% else %}
      
      I don't know.
      {%endif%}
      
      <p>
         {% for day in days_of_week %}
         {{day}}
      </p>
		
      {% endfor %}
      
   </body>
</html>

И мы должны получить что-то вроде — 

Hello World!!!
Today is Sept. 11, 2015
We are I don't know.
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Блокировать и расширять теги

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

Давайте изменим шаблон hello.html для наследования от main_template.html.

main_template.html 

<html>
   <head>
      
      <title>
         {% block title %}Page Title{% endblock %}
      </title>
      
   </head>
	
   <body>
   
      {% block content %}
         Body content
      {% endblock %}
      
   </body>
</html>

hello.html 

{% extends "main_template.html" %}
{% block title %}My Hello Page{% endblock %}
{% block content %}

Hello World!!!<p>Today is {{today}}</p>
We are
{% if today.day == 1 %}

the first day of month.
{% elif today.day == 30 %}

the last day of month.
{% else %}

I don't know.
{%endif%}

<p>
   {% for day in days_of_week %}
   {{day}}
</p>

{% endfor %}
{% endblock %}

В приведенном выше примере при вызове / myapp / hello мы все равно получим тот же результат, что и раньше, но теперь мы полагаемся на extends и block для рефакторинга нашего кода —

В main_template.html мы определяем блоки с помощью блока тегов. Блок заголовка будет содержать заголовок страницы, а блок контента будет иметь основное содержимое страницы. В home.html мы используем extends для наследования от main_template.html, затем заполняем определенный выше блок (content и title).

Тег комментария

Тег комментария помогает определять комментарии в шаблонах, а не в комментариях HTML, они не будут отображаться на странице HTML. Это может быть полезно для документации или просто комментирования строки кода.

55
Share: