Wprowadzenie do szablonów Django

7 min

Szablony to pliki tekstowe, których można użyć do generowania formatów tekstowych, takich jak HTML lub XML. Każdy szablon zawiera pewne dane statyczne, które są współużytkowane przez witrynę, ale mogą również zawierać symbole zastępcze dla danych dynamicznych. Szablony zawierają zmienne i tagi, które kontrolują zachowanie i co będzie wyświetlane jako ostatnia strona.

Przyjrzyjmy się, jak działają szablony w usłudze Django.

Zmienne

Zmienne w szablonie zachowują się tak jak w innym języku programowania. Możemy ich użyć, aby wskazać wartość, która jest oceniana w czasie wykonywania.

Platforma Django umożliwia wyświetlanie zmiennych w szablonie przy użyciu {{ }} składni. Każda zmienna umieszczona wewnątrz podwójnych nawiasów klamrowych jest oceniana pod kątem zawartości tekstowej, a następnie umieszczana w szablonie. Jeśli na przykład chcemy wyświetlić nazwę psa, możemy użyć polecenia {{dog.name}}.

Widok przekazuje zmienne do szablonu render przy użyciu funkcji , którą omówimy w późniejszym module. Możesz przekazać wartości i inne dane do szablonu, w tym zestaw zapytań z narzędzia Django ORM. Dzięki temu można wyświetlać dane z bazy danych dla aplikacji.

Filtry

Filtry to doskonały sposób kontrolowania sposobu wyświetlania danych w przypadku żądania w szablonie. Ponieważ filtry są już tworzone, zapewniają łatwy sposób formatowania danych bez konieczności pisania żadnego specjalnego kodu.

Załóżmy na przykład, że musimy wydrukować nazwy ras psów i chcemy upewnić się, że pierwsza litera każdej nazwy jest wielkich liter.

{{ dog.name | capfirst }}

Zmienna znajduje się po lewej stronie symbolu potoku (|), a filtr znajduje się po prawej stronie. Jest to tylko jeden z wielu filtrów, których można użyć do manipulowania danymi podczas korzystania z filtrów szablonów Django.

Tagi

Tagi umożliwiają wykonywanie pętli, tworzenie tekstu lub udostępnianie innych typów poleceń aparatu szablonu. Tagi często przypominają składnię języka Python. Jednak ponieważ działają wewnątrz szablonu (a nie wewnątrz interpretera języka Python), zauważysz niewielkie różnice w składni. Bez możliwości polegania na kartach, takich jak w przypadku języka Python, każda instrukcja bloku będzie wymagać odpowiedniego endelementu .

Możemy użyć if instrukcji dla logiki logicznej i for pętli na potrzeby iteracji. Podstawowa składnia instrukcji if wygląda następująco:

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

Uwaga

Instrukcja elif jest używana w taki sam sposób jak elif w języku Python.

Podobnie możemy użyć for pętli, aby wyświetlić nazwy wszystkich psów na liście:

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

Dziedziczenie szablonu

Szablony służą do generowania kodu HTML, który ma być widoczny dla użytkownika podczas korzystania z aplikacji. Strony w aplikacji zwykle mają wspólną strukturę, w której nawigacja może znajdować się po lewej stronie, tytuł znajduje się u góry i istnieje spójny arkusz stylów. Szablony Django obsługują struktury udostępnione za pośrednictwem dziedziczenia.

Tworzenie strony nadrzędnej

Tworzenie strony nadrzędnej jest takie samo jak tworzenie dowolnego szablonu HTML Django. Należy podać strukturę zewnętrzną, a następnie dołączyć {% block %} symbole zastępcze. Te symbole zastępcze umożliwiają dzieciom udostępnianie zawartości do umieszczenia w tych symbolach zastępczych.

Utwórzmy stronę nadrzędną, aby zaimportować arkusz stylów, podać tytuł domyślny i podać nagłówek, który chcemy wyświetlić na wszystkich stronach:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

Tworzenie strony podrzędnej

Możemy utworzyć stronę podrzędną na podstawie elementu nadrzędnego przy użyciu słowa kluczowego extends . Za pomocą tego słowa kluczowego podajemy nazwę pliku HTML szablonu nadrzędnego. Następnie użyjemy odpowiednich {% block %} instrukcji, aby dodać zawartość specyficzną dla tej strony.

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

Po wyświetleniu strony wygląda następująco:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

Zwróć uwagę, że symbole zastępcze są zastępowane zawartością na stronie podrzędnej.