Найти тему

Как настроить стиль сайта с помощью Bootstrap? Создание сайта - блога с помощью Python и Django. DjangoBlog #5

Оглавление

Всем привет, продолжаем создавать сайт - блог на Python с помощью Django. В этой статье вы узнаете, как настроить стиль сайта с помощью Bootstrap.

И так поехали:

1. Подключим Bootstrap в проект.

Для этого нужно перейти на официальный сайт Bootstrap и зайти в документации:

Bootstrap
Bootstrap

Скопируем код HTML файла из пункта:

2.Include Bootstrap’s CSS and JS.

Создаем в папке ablog/templates файл base.html и скопируем код в него.

Так же на сайте Bootstrap перейдем в компоненты и найдем пункт Navbar:

Компонент Меню
Компонент Меню

Скопируем пример меню от сюда:

Пример меню
Пример меню

Немного отредактируем и добавим в файл base.html.

Должно получиться примерно вот так:

ablog/templates/base.html
ablog/templates/base.html

Далее нужно прописать наследование для шаблона, который мы только что создали.

Для этого перейдем в файл home.html и изменим код:

home.html
home.html

Теперь, если мы запустим главную странницу, то увидим изменения в стиле:

Сайт с подключенным Bootstrap
Сайт с подключенным Bootstrap

Всё работает успешно.

2. Пропишем наследование для всех странниц сайта.

Мы подключили только домашнюю странницу сайта, а нужно подключить все.

Для этого перейдем в папку ablog и в файле models.py добавим следующую строку:

models.py
models.py

Теперь нужно выполнить миграции.

Для этого в терминале пишем:

python manage.py makemigrations
python manage.py migrate

Переходим в папку templates и в файле article_details.html редактируем код:

ablog/templates/article_details.html
ablog/templates/article_details.html

Теперь запускаем сервер и перейдем в панель администратора.

Изменим Title tag у записи:

Панель администратора
Панель администратора

3. Проверяем.

Откроем статью и посмотрим изменились ли стили:

BU11ZY
BU11ZY

Всё работает успешно.

Вернуться к прошлой статье.

Перейти к следующей статье.

Спасибо всем тем кто прочитал.

Если вам понравилась статья, то подпишитесь на канал и поставьте лайк.

Оставляйте свои вопросы комментариях или в telegram - чате.

Файлы с этой странницы на GitHub.

Наша группа в VK.

Наш телеграм.

#программирование #технологии #python #django #сайт #блог #bootstrap