# Часть пятая. Шаблонизатор **Цель:** Создание полноценного сайта с использованием шаблонизатора **Задачи:** * Установка 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 стиль к нашему сайту. Посмотрим на результат: ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7d2QEaxxYgNNqx%2Fe38878f6b579e7217aa2061fa026ef73.png?alt=media\&token=8d03928a-debf-4627-9822-327fa9391888) ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7ORq9AqNaYLiN9%2F8c8bcdeb5cf7070a4346e56c1b67eb7e.png?alt=media\&token=a25bbe7e-ac7c-43a8-9550-aed5498fbddc) Не сказать, что сайт стал красивым, но он уже начал своё преображение. Продолжим. Пишем в теле main.html «main.container» и жмём Tab (спасибо, Emmet). Должно получиться так: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7Wcz1T972JAcVI%2F36096f1ee6af2a64207793cd98254d2e.png?alt=media\&token=88b22b78-5e27-42d2-a998-46f38ed38007) Теперь, добавим шапку. Для этого переходим на сайт . На нём, переходим во вкладку Examples, затем – Navbars. Выбираем понравившуюся панель. Кликаем по ней правой кнопкой мыши -> Показать код элемента ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7egjreM5CJg3CL%2Feb0368e9958039147d462791067c6e87.png?alt=media\&token=9573f17c-e589-4627-af21-f6ddcdb7bbb8) ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7RoEECb-4tMN3L%2F47e9fcde32ecfc884b8e49809cf265cb.png?alt=media\&token=11048b32-00ed-4e19-b1a8-758e4c053955) В коде выделяем элемент целиков, как показано на скриншоте и нажимаем кнопку Copy Element ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7iUbR6GCfWf1oG%2Ff808b584e5b2d72ea9949294b80b89b2.png?alt=media\&token=d22d702d-f1f8-49f7-94b9-3fd0d3451f27) Скопированный элемент вставляем в тело в файле main.html. Вот так: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Осталось отредактировать шаблон. Так и сделаем: ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7McskhvtPpLknU%2F4f48268f16e5e5cf82770d827257e3d4.png?alt=media\&token=51ef024c-66db-4425-88f6-d7677bc25b59) На этом моменте, становиться видна одна проблема: ссылка на главную страницу выглядит так: `МИИГАиК`, то есть главной страницы у нас нет. Мы переходим на страницу второго уровня – 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 %}
``` Проверяем адрес главной страницы: ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7Jo0Vfo_7fZpMK%2F1e633894434e952ace2414b684d0afbc.png?alt=media\&token=afdd734a-572a-43a4-af26-db7b1fb5579d) Всё в порядке. ## Редактируем стиль в Bootstrap Теперь вы можете самостоятельно отредактировать сайт с пояснениями из Bootstrap – . Помните один важный момент – Bootstrap разделяет страницу по вертикали на 12 колонн равной величины, а по горизонтали – разделений нет. Я настроил сайт по своему вкусу и вот, что у меня получилось (работаем только с файлом main.html): ```markup {{ title }}
{% block main_section %} {% endblock %}
``` Результат: ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7XcAqQkJgKWadD%2F0467753a57beeff6753df383eb1d19ac.png?alt=media\&token=4174096f-9234-4243-9aaa-eb2e6712a7f6) ![](https://4078292694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNtNPjTNQxUDbrf3v0a%2F-MNxwpb07b7pkaboUBv0%2F-MNxwx7hsQHk5ksxwLXS%2Ff92c565b4b57af628f531c9b7d001596.png?alt=media\&token=7fe8c1cb-c991-48da-b236-f8d7d3e206d5) Внимательно изучите код и прочитайте о не понятных тегах в самоучителе по html и bootstrap.