25. Шаблонизация верстки и язык шаблонов в Django.

Шаблонизация верстки

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

Основные элементы языка шаблонов Django:

Пример:

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

Переменные

Фильтры

Фильтры позволяют динамически выполнять цепочечные преобразования над значением переменной.

Пример применения фильтра lower к переменной name:

{{ name|lower }}

Цепочка фильтров:

{{ text|escape|linebreaks }}

Передача аргумента фильтру:

{{ text|truncatewords:30 }}

Ещё несколько примеров:

{{ value|default:"nothing" }}

{{ value|length }}

{{ value|filesizeformat }}

Тэги

Тэг - инструкция языка Django-шаблонов. Есть множество уже существующих, а также можно создавать свои.

Рассмотрим некоторые встроенные:

for
In [ ]:
<ul>
{% for athlete in athlete_list %}
    <li>{{ athlete.name }}</li>
{% endfor %}
</ul>
if, elif, и else
In [ ]:
{% if athlete_list %}
    Number of athletes: {{ athlete_list|length }}
{% elif athlete_in_locker_room_list %}
    Athletes should be out of the locker room soon!
{% else %}
    No athletes.
{% endif %}
In [ ]:
{% if athlete_list|length > 1 %}
   Team: {% for athlete in athlete_list %} ... {% endfor %}
{% else %}
   Athlete: {{ athlete_list.0.name }}
{% endif %}

Наследование шаблонов

Механизм наследования шаблонов позволяет переиспользовать общие части шаблонов.
Создаём базовый шаблон (шаблоны).
Помечаем в этих шаблонах специальным образом блоки.
* В шаблонах-потомках можем переопределять только эти блоки (или их часть), а остальное рендерится так, как у предка.

Базовый шаблон (base.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
    <div id="sidebar">
        {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
        {% endblock %}
    </div>

    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Дочерний шаблон:

{% extends "base.html" %}

{% block title %}My amazing blog{% endblock %}

{% block content %}
{% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

Пример результата:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>My amazing blog</title>
</head>

<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>

    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>

        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>