A Django-sablonok használatának első lépései

7 perc

A sablonok szöveges fájlok, amelyek szövegalapú formátumok, például HTML vagy XML létrehozására használhatók. Minden sablon tartalmaz néhány statikus adatot, amelyek a webhelyen vannak megosztva, de a dinamikus adatok helyőrzőit is tartalmazhatják. A sablonok változókat és címkéket tartalmaznak, amelyek szabályozzák a viselkedést, és azt, hogy mi jelenik meg az utolsó oldalként.

Nézzük meg, hogyan működnek a sablonok a Django-ban.

Változók

A sablon változói ugyanúgy viselkednek, mint bármely más programozási nyelven. Ezekkel megjelölhetjük a futásidőben kiértékelt értékeket.

A Django lehetővé teszi a változók sablonban való megjelenítését a {{ }} szintaxis használatával. A dupla kapcsos zárójelek közé helyezett változók kiértékelése a szövegtartalom alapján történik, majd a sablonba kerül. Ha például a kutya nevét szeretnénk megjeleníteni, használhatjuk {{dog.name}}.

A nézet a függvény használatával továbbítja a változókat egy render sablonba, amelyet egy későbbi modulban fogunk megvizsgálni. Értékeket és egyéb adatokat továbbíthat egy sablonnak, beleértve a Django ORM lekérdezéskészletét is. Ez lehetővé teszi az alkalmazás adatbázisából származó adatok megjelenítését.

Filters

A szűrőkkel szabályozható, hogy az adatok hogyan jelenjenek meg, amikor egy sablonban kérik. Mivel a szűrők már létrejöttek, egyszerűen formázhatja az adatokat anélkül, hogy speciális kódot kellene írnia.

Tegyük fel például, hogy ki kell nyomtatnunk a kutyafajták nevét, és meg szeretnénk győződni arról, hogy minden név első betűje nagybetűs.

{{ dog.name | capfirst }}

A változó a csőszimbólumtól| () balra, a szűrő pedig a jobb oldalon található. Ez csak egy a számos szűrő közül, amellyel a Django-sablonszűrők használatakor módosíthatja az adatokat.

Tags

Címkék használatával hurkokat hajthat végre, szöveget hozhat létre, vagy más típusú parancsokat adhat meg a sablonmotorhoz. A címkék gyakran hasonlítanak a Python szintaxisára. Mivel azonban a sablonban futnak (a Python-értelmező helyett), a szintaxisban némi eltérést tapasztalhat. Ha nem tudunk a Pythonhoz hasonló lapokra támaszkodni, minden blokkutasításhoz szükség lesz egy megfelelőre end.

Logikai logika utasításait és for ismétlési ciklusokat is használhatunkif. Az utasítások alapvető szintaxisa if a következőhöz hasonlóan néz ki:

{% 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 %}

Megjegyzés:

Az elif utasítás ugyanúgy használatos, mint elif a Pythonban.

Hasonlóképpen használhatunk egy hurkot for a listában szereplő összes kutya nevének megjelenítéséhez:

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

Sablonöröklés

A sablonok segítségével létrehozhatja azt a HTML-fájlt, amelyet a felhasználó látni szeretne az alkalmazás használata során. Az alkalmazások lapjai általában közös szerkezetet használnak, ahol a navigáció a bal oldalon lehet, a cím a tetején található, és van egy egységes stíluslap. A Django-sablonok örökléssel támogatják a megosztott struktúrákat.

Szülőlap létrehozása

A szülőlap létrehozása ugyanaz, mint bármely Django HTML-sablon létrehozása. Adja meg a külső struktúrát, majd adja meg {% block %} a helyőrzőket. Ezek a helyőrzők lehetővé teszik, hogy a gyermekek biztosítják a tartalom elhelyezését ezekben a helyőrzőkben.

Hozzunk létre egy szülőlapot egy stíluslap importálásához, egy alapértelmezett cím megadásához és egy fejléc megadásához, amelyet minden oldalon meg szeretnénk jeleníteni:

<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>

Gyermeklap létrehozása

A kulcsszó használatával létrehozhatunk egy gyermeklapot a extends szülőből. Ezzel a kulcsszóval megadjuk a szülősablon HTML-fájljának nevét. Ezután a megfelelő {% block %} utasításokat használva hozzáadjuk az adott lapra vonatkozó tartalmat.

{% extends "parent.html" %}

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

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

A lap megjelenésekor a következőhöz hasonlóan néz ki:

<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>

Figyelje meg, hogyan cseréli le a helyőrzőket a gyermekoldal tartalma.