Rozbudowa szablonów

Kolejną fajną rzeczą, którą Django daje Ci do dyspozycji, jest możliwość rozszerzania szablonów. Co to oznacza? To znaczy, że możesz używać tych samych części Twojego kodu HTML na różnych stronach Twojej aplikacji.

Szablony pomagają, gdy chcesz użyć te same informacje lub ten sam kod w wielu miejscach. W takim wypadku nie musisz się powtarzać w każdym pliku. I jak będziesz chciała zmienić cokolwiek, nie będziesz musiała tego zrobić w każdym szablonie, wystarczy tylko w jednym!

Tworzenie szablonu bazowego

Szablon bazowy to najbardziej podstawowy szablon, który możesz rozszerzać na każdej stronie twojej aplikacji.

Stwórzmy plik base.html w blog/templates/blog/:

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

Następnie otwórz ten plik w edytorze kodu i skopiuj całą zawartość pliku post_list.html do pliku base.html, w taki sposób:


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

Następnie, w base.html, zamień całą zawartość <body> (wszystko, co znajduje się pomiędzy <body> a </body>) na to:

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

Mogłaś zauważyć, że zamieniło to wszystko od {% for post in posts %} do {% endfor %} na:


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

</div>

Ale czemu? Właśnie stworzyłaś block! Użyłaś znacznika szablonu `

` by zaznaczyć obszar, w który zostanie wstawiony HTML. Ten HTML będzie pochodził z innego szablonu, który rozszerza ten szablon (`base.html`). Za chwilę pokażemy Ci, jak to się robi.

Teraz zapisz base.html i otwórz ponownie w edytorze swój blog/templates/blog/post_list.html. Usuniemy teraz wszystko powyżej {% for post in posts %} i poniżej {% endfor %}. Jak to zrobisz, plik będzie wyglądać tak:


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

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

</div>

Będziemy chciały użyć tych kliku linii jako części szablonu dla wszystkich bloków treści. Najwyższy czas dodać znaczniki block w tym pliku!

Musimy zrobić to tak, by nasz znacznik block zgadzał się ze znacznikiem w pliku base.html. Chcesz też by zawierał on cały kod, który należy do twoich bloków treści. By to osiągnąć, umieść wszystko pomiędzy {% block content %} i {% endblock %}. O tak:


<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>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    

</div>

</div>

Została jeszcze jedna rzecz. Musimy połączyć te dwa szablony razem. To właśnie na tym polega rozszerzaniem szablonów! Dokonamy tego dodając tag extend na początku nasze pliku. Właśnie tak:


<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>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    

</div>

</div>

To wszystko! Zapisz plik i sprawdź, czy Twoja strona nadal działa poprawnie. :)

Jeżeli dostaniesz błąd TemplateDoesNotExist, oznacza to, że nie ma jesze pliku blog/base.html i jednocześnie w konsoli działa uruchomiony runserver. Spróbuj go zatrzymać (wciskając Ctrl+C - czy razem klawisze Control i C) i uruchomić ponownie przy użyciu polecenia python manage.py runserver.

PreviousCSS - upiększ to NextRozbudowa aplikacji

Last updated 1 year ago