Russian
Donate now

Расширение шаблона

Ещё одной удобной вещью в Django является расширение шаблонов. Что это значит? Ты можешь использовать одни и те же блоки HTML-кода для разных частей своего веб-сайта.

Так тебе не придётся повторяться каждый раз, когда потребуется использовать ту же информацию/структуру. И если появится необходимость что-то изменить, не придётся вносить правки в каждую страницу: достаточно скорректировать шаблон!

Создаём базовый шаблон

Базовый шаблон — это наиболее общая типовая форма страницы, которую ты расширяешь для отдельных случев.

Давай создадим файл base.html в директории blog/templates/blog/:

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

Теперь открой его и скопируй всё из post_list.html в base.html:


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

Затем в файле base.html замени всё между тегами <body> и </body> следующим кодом:

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

Мы просто заменили всё между `

` следующим:


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

</div>

Что это означает? Ты только что создала block — тег шаблона, позволяющий вставлять HTML-код этого блока в другие шаблоны, расширяющие base.html. Мы покажем, как это сделать, через секунду.

Теперь сохрани всё и открой blog/templates/blog/post_list.html снова. Тебе нужно удалить всё до {% for post in posts %} и после {% endfor %}. В итоге файл будет выглядеть следующим образом:


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

Мы хотим использовать это фрагмент в твоём шаблоне для отображения содержимого. Пора добавить теги блоков в этот файл!

Нам нужно, чтобы новый тег блока соответствовал тегу в файле base.html. Также нам необходимо включить весь код, который соответствует твоему блоку с содержимым. Для этого расположи всё между {% block content %} и {% endblock %}. Вот так:


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

Осталось последнее: нам нужно связать эти два шаблона друг с другом. Ведь именно для этого и нужно расширение шаблонов! Мы сделаем это, добавив тег extends в начало файла. Вот так:


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

Готово! Проверь, что твой веб-сайт работает нормально :)

Если появилась ошибка TemplateDoesNotExists, это значит, что нет файла blog/base.html и runserver запущен в командной строке. Попробуй остановить его (одновременно нажми Ctrl + C) и перезапусти веб-сервер командой python manage.py runserver.

PreviousCSS - сделай это красивымNextРасширяем свое приложение

Last updated