Cat

Django 6. Базовый шаблон

В этом посте, создадим базовый шаблон и подключим Bootstrap5.

Все статьи

Icon Link

Дополнительные материалы

Icon Link

Реклама

Icon Link
Сайт на Django proDream 03 Август 2023 Просмотров: 1326

В базовый шаблон прописывается то, что должно быть на всех страницах сайта. Подключаются все необходимые файлы стилей и скриптов, прописываются мета-теги.

 

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" %}

Это будет наш базовый шаблон. Впоследствии мы его модернизируем и от него будут наследоваться шаблоны других страниц. 

Автор

    Нет комментариев

    Реклама