Код на салфетке
Вход Регистрация
Cat

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

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

Все статьи

Icon Link

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

Icon Link

Для скачивания материалов необходимо войти или зарегистрироваться

Файлы также можно получить в Telegram-боте по коду: 153069

Ссылки

Icon Link
Telegram-каналTelegram-канал
VKVK
RuTubeRuTube
YouTubeYouTube
Поддержать проектПоддержать проект
Хостинг от TimeWebХостинг от TimeWeb
RSS-лента последних постовRSS-лента последних постов

Реклама

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

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

 

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

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

Автор

avatar

Иван Ашихмин

Программист, фрилансер и автор гайдов. Занимаюсь разработкой ботов, сайтов и не только.

Комментарии

Войдите чтобы добавить комментарий.

  • avatar

    ЮлияБ

    5 января 2025 г. 19:52

    Здравствуйте. Хотелось бы уточнить, а как получилось load static расположить выше DOCTYPE без получения ошибки? Вроде же определение типа документа обязательно должно идти первой строкой?

    Войдите чтобы добавить комментарий.

    • avatar

      proDream

      6 января 2025 г. 9:20

      {% load static %} это тег Django-шаблонизатора, он не мешает формированию HTML-файла. Его (и другие подобные теги) можно расположить в любой части кода, главное, чтобы он был над тем местом, где вызывается функционал тега.

      Войдите чтобы добавить комментарий.

    • Реклама

Оглавление

Поделиться