Django 6. Базовый шаблон
В этом посте, создадим базовый шаблон и подключим Bootstrap5.
Дополнительные материалы
Для скачивания материалов необходимо войти или зарегистрироваться
Файлы также можно получить в Telegram-боте по коду: 153069
Telegram-канал
VK
RuTube
YouTube
Поддержать проект
Хостинг от TimeWeb
RSS-лента последних постов
Реклама
В базовый шаблон прописывается то, что должно быть на всех страницах сайта. Подключаются все необходимые файлы стилей и скриптов, прописываются мета-теги.
Bootstrap5.
Для создания шаблона, мы будем использовать CSS-фреймворк Bootstrap5.
Давайте его скачаем. Нам нужен CSS-файл и JS-файл.
CSS: https://bootswatch.com/5/lumen/bootstrap.css
JS: https://raw.githubusercontent.com/twbs/bootstrap/v5.3.0/dist/js/bootstrap.bundle.js
Если у вас в браузере, файл не скачивается, а открылся для просмотра, просто нажмите сочетание клавиш CTRL+S
В директории приложения blog создаём папку static, а в ней ещё две папки css и js.
Помещаем скачанные файлы в соответствующие папки в директории static.
В директории приложения blog, создаём папку templates, а в ней папку с названием приложения, то есть, тоже blog.
Должна получиться такая иерархия <проект>/blog/templates/blog. Если вы использовали иное название для приложения, то замените blog, на соответствующее.
Base.html.
Директория blog в папке templates, это место, где будут храниться шаблоны связанные с приложением blog. Создадим там файл base.html со следующим содержимым:
{% load static %}
<!DOCTYPE html>
<html lang="ru" data-bs-theme="dark" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Press Any Button</title>
<link href="{% static "css/bootstrap.css" %}" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<section class="al mt-3">
<div class="container justify-content-center">
<div class="alert alert-dismissible alert-warning">
<h4 class="alert-heading">Приветствую вас!</h4>
<h5 class="mb-0">Сайт находится в процессе разработки.<br>
Следить за процессом разработки и повторять действия, можно в <a href="https://t.me/press_any_button">Telegram-канале
"Код на салфетке"</a></h5>
</div>
</div>
</section>
<script src="{% static "js/bootstrap.bundle.js" %}"></script>
</body>
</html>
Как видим, используется обычная HTML-разметка, с добавлением специальных Django-тегов.
Тег {% load static %} сообщает Django, что в шаблоне используются статические файлы из папки static.
В месте, где мы подключаем CSS и JS файлы, используется тег {% static "путь_до_файла_в_папке_static" %}
Это будет наш базовый шаблон. Впоследствии мы его модернизируем и от него будут наследоваться шаблоны других страниц.
Все статьи