Czech
Donate now

Rozšíření šablon

Další pěknou věcí, kterou pro nás Django má, je rozšiřování šablon. Co to znamená? To znamená, že můžeš použít stejné HTML pro různé stránky na svém blogu.

Tímto způsobem nemusíš opakovat v každém souboru stejný kód, když chceš použít stejné informace/rozvržení. A pokud chceš něco změnit, není nutné to dělat v každé šabloně, stačí jen v jedné!

Vytvoření základní šablony

Základní šablona je šablona, kterou použijeme na každé stránce našich webových stránek.

Vytvoříme soubor base.html v blog/templates/blog/:

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

Pak jej otevři a zkopíruj vše z post_list.html do base.html souboru, jako je to níže:


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

Pak v base.html nahraď celé <body> (vše mezi <body> a </body>) tímto:

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

Nahradili jsme v podstatě všechno, co bylo mezi `

`, za:


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

</div>

Co to znamená? Právě jsi vytvořila block, což je šablonovací značka, která umožňuje vkládat HTML kód do tohoto bloku v jiných šablonách, které rozšiřují base.html. Hned ti ukážeme, jak to udělat.

Nyní ulož a znovu otevři svůj blog/templates/blog/post_list.html. Odstraň vše, co není uvnitř body, a pak také odstraň < div class="page-header" >< / div >, takže soubor bude vypadat takto:


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

A teď přidej na začátek souboru tento řádek:


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

to znamená, že nyní rozšiřujeme šablonu base.html v post_list.html. Jen jedna věc zbývá: vše dát (kromě řádku, který jsme právě přidaly) mezi {% block content %} a {% endblock %}. Takto:


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

To je ono! Zkontroluj, zda tvoje stránky stále správně fungují :)

Jestliže dostaneš chybu TemplateDoesNotExists, která říká, že neexistuje žádný soubor blog/base.html a máš runserver v konzoli, zkus ho zastavit (stisknutím kombinace kláves Ctrl + C - ctrl a tlačítka C společně) a restartovat spuštěním příkazu pythonu manage.py runserver.

PreviousCSS - udělejte svou aplikaci hezčíNextRozšíření vaší aplikace

Last updated