# Часть пятая. Шаблонизатор **Цель:** Создание полноценного сайта с использованием шаблонизатора **Задачи:** * Установка Bootstrap * Применение шаблонов Bootstrap * Графическая настройка страницы * Создание статических стилей ## Bootstrap Перейдём к последнему блоку – фреймворку Bootstrap. Bootstrap – это фреймворк, в котором прописаны ряд CSS стилей и JavaScript скриптов. Их можно использовать, прописывая их у нас в проекте. Переходим на сайт ниже: {% embed url="" %} Копируем первую строку кода: [`https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css`](https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css) Переходим в main.html и до закрытия «головы» сайта (head) прописывает link, нажимаем Tab и вставляем скопированную ссылку. Должно получиться вот так: ```markup {{ title }} {% block main_section %} {% endblock %} ``` Сейчас мы подключили CSS стиль к нашему сайту. Посмотрим на результат: ![](/files/-MNxwx7d2QEaxxYgNNqx) ![](/files/-MNxwx7ORq9AqNaYLiN9) Не сказать, что сайт стал красивым, но он уже начал своё преображение. Продолжим. Пишем в теле main.html «main.container» и жмём Tab (спасибо, Emmet). Должно получиться так: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](/files/-MNxwx7Wcz1T972JAcVI) Теперь, добавим шапку. Для этого переходим на сайт . На нём, переходим во вкладку Examples, затем – Navbars. Выбираем понравившуюся панель. Кликаем по ней правой кнопкой мыши -> Показать код элемента ![](/files/-MNxwx7egjreM5CJg3CL) ![](/files/-MNxwx7RoEECb-4tMN3L) В коде выделяем элемент целиков, как показано на скриншоте и нажимаем кнопку Copy Element ![](/files/-MNxwx7iUbR6GCfWf1oG) Скопированный элемент вставляем в тело в файле main.html. Вот так: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Осталось отредактировать шаблон. Так и сделаем: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](/files/-MNxwx7McskhvtPpLknU) На этом моменте, становиться видна одна проблема: ссылка на главную страницу выглядит так: `МИИГАиК`, то есть главной страницы у нас нет. Мы переходим на страницу второго уровня – blog. Исправим это. Переходим в urls.py в папке проекта (MySite). В файле меняем одно поле. С этого: ```python path('/blog', include('blog.urls')), ``` на это: ```python path('', include('blog.urls')), ``` Затем поменяем ссылки в main.html с: ```markup МИИГАиК ``` на: ```markup МИИГАиК ``` Финальный код выглядит так: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Проверяем адрес главной страницы: ![](/files/-MNxwx7Jo0Vfo_7fZpMK) Всё в порядке. ## Редактируем стиль в Bootstrap Теперь вы можете самостоятельно отредактировать сайт с пояснениями из Bootstrap – . Помните один важный момент – Bootstrap разделяет страницу по вертикали на 12 колонн равной величины, а по горизонтали – разделений нет. Я настроил сайт по своему вкусу и вот, что у меня получилось (работаем только с файлом main.html): ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](/files/-MNxwx7XcAqQkJgKWadD) ![](/files/-MNxwx7hsQHk5ksxwLXS) Внимательно изучите код и прочитайте о не понятных тегах в самоучителе по html и bootstrap. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://valerylinkov2504.gitbook.io/sitepython/5.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.