Django sablonok (template)

Itt az idő, hogy megjelenítsünk pár adatot! Ehhez Django felkínál nekünk pár beépített template tag-et számunkra.

Mik a template tag-ek?

Mint látod, a HTML-ben nem tudsz Python kódot írni, mivel a böngészők nem értik, csak a HTML-t. Fontos tudni, hogy a HTML inkább statikus, míg Python inkább dinamikus.

A Django template tag-ek lehetővé teszik, hogy Python-szerű dolgokat írjunk a HTML-be, ezáltal gyorsabban és könnyebben tudsz dinamikus weboldalt készíteni. Éljen!

Template a bejegyzések listájához

Az előző fejezetben hozzáadtuk a template-hez a bejegyzéseink listáját a post változóban. Most meg fogjuk ezt jeleníteni a HTML-ben.

Ahhoz, hogy kiírjunk egy változót a Django template-ben, dupla kapcsos zárójelet használunk, benne a változó nevével, mint itt:

{{ posts }}

Próbáld ki a blog/templates/blog/post_list.html template-ben. Cserélj ki mindent a második <div> -től a harmadikig a következővel: {{ posts }}. Mentsd el a fájlt és frissítsd az oldalt, hogy lásd az eredményt:

13.1 ábra

Ahogy látod, ez minden, amink van:

<QuerySet [<Post: My second post>, <Post: My first post>]>

Ez azt jelenti, hogy a Django objektumok listájaként értelmezi. Emlékszel a Bevezetés a Python-ba című fejezetből, hogy hogyan jelenítünk meg listákat? Igen, for loop-okkal! Egy Django template-ben ezt így tudod megtenni:

<div data-gb-custom-block data-tag="for">

    {{ post }}

</div>

Próbáld ki a template-edben.

13.2 ábra

És működik! De azt akarjuk, hogy úgy jelenjen meg, mint a statikus bejegyzések, amit korábban készítettünk el a Bevezetés a HTML-be című fejezetben. A HTML-t és a template tageket használhatod együtt. A body így fog kinézni:

<div>
    <h1><a href="/">Django Girls Blog</a></h1>
</div>

<div data-gb-custom-block data-tag="for">

    <div>
        <p>published: {{ post.published_date }}</p>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>

</div>

Minden, amit a {% for %} és {% endfor %} közé írsz, a lista minden egyes elemére meg fog ismétlődni. Frissítsd az oldalt:

13.3 ábra

Észrevetted, hogy most egy kicsit más megjelölést használtunk: {{ post.title }}? Az adatokat a Post modelben meghatározott mezők szerint érjük el. Emellett |linebreaksbr kíséri a szöveget, ezáltal egy filteren keresztül új bekezdéssé alakítja az újsor karaktereket.

Még valami

Jó lenne látni, hogy a weblapod még mindig működik az Interneten, nem igaz? Telepítsük újra a PythonAnywhere-en. Itt a lépések összefoglalója...

• Először tedd fel a kódot a GitHub-ra

$ git status
[...]
$ git add --all .
$ git status
[...]
$ git commit -m "Modified templates to display posts from database."
[...]
$ git push

• Ezután a PythonAnywhere-en menj a Bash console-ba (vagy indíts újat), és futtasd le:

$ cd my-first-blog
$ git pull
[...]

• Végül, a Web menüpontban klikkelj a Reload-ra. A frissítések ott vannak! Ha a blogposztok a PythonAnywhere oldaladon nem egyeznek a helyi gépeden lévő blogban lévőkkel, az nem probléma. Az adatbázisok a helyi gépeden és PythonAnywhere-en nem szinkronizálódnak a többi file-al együtt.

Gratulálunk! Folytatásképp hozz létre új bejegyzéseket a Django adminban (ne felejts el published_date-t hozzáadni). Ellenőrizd, hogy a pythonanywhere oldalhoz tartozó admin oldalon https://yourname.pythonanywhere.com/admin vagy. Majd frissítsd az oldalt, hogy lásd, megjelentek-e.

Olyan, mint a varázslat? Büszkék vagyunk Rád! Hagy ott egy kicsit a gépet, megérdemelsz egy kis szünetet. :)

13.4 ábra