Template-kiegészítés

Egy másik szuper dolog, amit a Django tud, a template extending, vagyis template-kiegészítés. Mit jelent ez? Azt, hogy a HTML-ed egyes részeit több oldalon is fel tudod használni az alkalmazásodban.

Így nem kell megismételned magad minden fájlban, ha ugyanazt az információt szeretnéd felhasználni, vagy ugyanolyan layout-ot tervezel. És ha meg szeretnél változtatni valamit, nem kell minden sablonban külön megtenned, csak egyszer!

Hozd létre az alap template-et

A base (alap) template a legegyszerűbb sablon, amit az alkalmazásod összes oldalán kiegészítesz.

Hozz létre egy base.html fájlt a blog/templates/blog/-ban:

blog
└───templates
    └───blog
            base.html
            post_list.html

Majd nyisd meg, és másolj át mindent a post_list.html-ből a base.html-be, így:


<div data-gb-custom-block data-tag="load"></div>

<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="

<div data-gb-custom-block data-tag="static" data-0='css/blog.css'></div>">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                <div data-gb-custom-block data-tag="for">

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

</div>

                </div>
            </div>
        </div>
    </body>
</html>

Aztán a base.html-ben cseréld ki az egész <body>-t (mindent a <body> és a </body> között) erre:

<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            

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

            

</div>

            </div>
        </div>
    </div>
</body>

Lényegében a `

` részt kicseréltük erre:


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

</div>

Ez mit is jelent? Létrehoztál egy block-ot. Ez egy olyan template tag, amely segítségével HTML-t illeszthetsz be a blokkba más template-ekben, ezzel kiegészítve a base.html-t. Máris megmutatjuk, hogy működik.

Most mentsd el, és nyisd meg újra a blog/templates/blog/post_list.html-t. Törölj ki mindent a body-n kívül, és a <div class="page-header"></div> részt is, hogy így nézzen ki a fájl:


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

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

</div>

És most add hozzá ezt a sort a fájl elejéhez:

Ez azt jelenti, hogy most a base.html template-et egészítjük ki a post_list.html-ben. Már csak egy dolog van hátra: az előző sor kivételével rakj mindent {% block content %} és {% endblock %} közé. Így:


<div data-gb-custom-block data-tag="extends" data-0='blog/base.html'></div>

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

    

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

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

</div>

</div>

Ez az! Nézd meg, hogy még mindig működik-e a weboldalad :)

Ha TemplateDoesNotExists (a template nem létezik) hibát kapsz, ami azt mondja, nincs blog/base.html fájlod, és fut a runserver a konzolban, próbáld meg leállítani (Ctrl+C-vel, vagyis egyszerre nyomd meg a Control és a C billentyűt) és indítsd el újra a python manage.py runserver paranccsal.

PreviousCSS - Tegyük széppé!NextEgészítsd ki az applikációdat

Last updated 1 year ago