Базовый шаблон

В прошлом уроке мы сделали шаблон главной страницы. Это отличный промежуточный результат работы над проектом, но случайный пользователь останется недоволен: проекту не хватает оформления. Wiki может себе такое позволить, а мы пока нет.
Добавим в проект поддержку CSS и JavaScript.
С HTML вы немного знакомы — это язык разметки веб-страницы, её скелет.
CSS, таблица стилей, отвечает за оформление страницы. Цвет, размер и начертание шрифтов, обрамление и фон элементов страницы, расстояния между элементами и блоками текста, фоновые изображения — всё это описывается в стилевых файлах, связанных с файлом HTML.
JavaScript управляет динамическим поведением страницы, от интерактивных блоков до подгрузки нового содержимого на страницу. Код JavaScript пишется в файлах *.js, привязанных к HTML-файлу.
Созданием HTML, CSS и JS занимаются фронтенд-разработчики, вам не потребуется писать код на этих языках. Но для общего понимания картины вы можете пройти бесплатный курс по фронтенду на Яндекс.Практикум.

Добавление директории для статических файлов

Статическими файлами, «статикой», называют файлы, которые не модифицируются сервером в момент обращения. Эти файлы скачиваются браузером «как есть».
В Django каждое приложение может иметь свой набор статических файлов. Это могут быть картинки, стили, JS или другие файлы, необходимые для работы конкретного приложения. Эти файлы хранятся в папке static в приложении.
Перед публикацией проекта на боевом сервере все статические файлы проекта собираются в единую директорию. Сборка запускается командой collectstatic.
По этой команде Django проверит все директории проекта и скопирует в общую директорию содержимое всех папок с названием static, какие найдёт в проекте. Если по каким-то причинам необходимо назвать папку со статикой иным именем — адрес такой папки нужно зарегистрировать в переменной STATICFILES_DIRS в yatube/settings.py
Адрес общей директории для статики указывается в настройках проекта.
В реальных проектах за отдачу статических файлов часто отвечают отдельные сервера или CDN-сервисы (англ. "content delivery network", «сеть доставки контента»), единственная задача которых — заниматься раздачей статических файлов. После сборки статические файлы из общей папки будет удобнее загрузить на сервер, раздающий статику вашего проекта.
Создайте две директории с названием static: одну в корне проекта, для сборки, вторую — в приложении posts, для статики приложения. Получится такая структура:
Скопировать код
yatube
├── db.sqlite3
├── manage.py
├── posts
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   └── __init__.py
│   ├── models.py
│   ├── static  # директория для статических файлов приложения posts
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── static # директория для сборки статических файлов проекта
├── templates
│   └── index.html
└── yatube
        ├── __init__.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py
В файл yatube/settings.py после переменной STATIC_URL добавьте новую переменную STATIC_ROOT:
Скопировать кодPYTHON
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

# задаём произвольный URL, который будет использоваться для запросов к статическим файлам
STATIC_URL = "/static/" 
# теперь логотип можно будет запросить по адресу sitename.ex**/static/**images/logo.png

# задаём адрес директории, куда командой *collectstatic* будет собрана вся статика
STATIC_ROOT = os.path.join(BASE_DIR, "static")
При разработке не обязательно выполнять команду collectstatic. Командой runserver запустите встроенный веб-сервер Django — и он будет отдавать статику прямо из исходных директорий.

Шаблон на Bootstrap

Вам не понадобится самостоятельно настраивать дизайн проекта, за основу возьмём фреймворк Bootstrap версии 4.3
Этот проект произвёл небольшую революцию в мире разработки сайтов. Он дал возможность backend-программистам быстро получать приемлемый дизайн проектов, не погружаясь в детали фронтенд-разработки. Взял, поставил — готово.
Мы подготовили архив с необходимой статикой. Скачайте и распакуйте его в posts/static.
https://code.s3.yandex.net/backend-developer/learning-materials/static.zip

Включение статических файлов в шаблоны

После того как вы собрали статику и запустили проект с помощью команды runserver, можете попробовать открыть какой-нибудь файл из директории STATIC_ROOT через HTTP.
Например, по ссылке http://127.0.0.1:8000/static/bootstrap/dist/js/bootstrap.js в браузере откроется код JavaScript-библиотеки.
Ссылка состоит из нескольких частей:
Чтобы добавить ссылку на подгрузку файла в шаблон, необходимо загрузить модуль для работы со статикой командой {% load static %}, а в адресах подключаемых файлов применять тег {% static "адрес_файла_относительно_директории_статики" %}:
Скопировать кодHTML
{% load static %}
<script src="{% static "bootstrap/dist/js/bootstrap.js" %}"></script>
Конструкция кажется громоздкой, но на практике это сильно экономит время. Если нужно разместить статику отдельно от проекта, на CDN-сервере — потребуется лишь изменить несколько настроек конфигурации, и проект заработает и на локальном компьютере разработчика, и на боевых серверах.

base.html

Создадим базовый шаблон. Он будет содержать обрамление, повторяющееся на всех страницах. В HTML-коде это будет невидимый пользователю служебный блок <head> с подключенными css и js-файлами.
Уникальные части шаблонов будем хранить в отдельных файлах.
Создадим базовый HTML-файл на основе примера из документации по Bootstrap и определим стандартные блоки для заголовка страницы и тела:
Скопировать кодHTML
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}The Last Social Media You'll Ever Need{% endblock %} | Yatube</title>
    <!-- Загрузка статики -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}">
    <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
</head>

<body>

    <main>
        <div class="container">
            <h1>{% block header %}The Last Social Media You'll Ever Need{% endblock %}</h1>
            {% block content %}
            <!-- Содержимое страницы -->
            {% endblock %}
        </div>
    </main>

</body>

</html>
Сохраните этот файл в папку templates под именем base.html. Теперь измените шаблон главной страницы index.html:
Скопировать кодHTML
{% extends "base.html" %}
{% block title %}Последние обновления на сайте{% endblock %}
{% block header %}Последние обновления на сайте{% endblock %}
{% block content %}

    {% for post in posts %}
    <h3>
        Автор: {{ post.author.get_full_name }}, Дата публикации: {{ post.pub_date|date:"d M Y" }}
    </h3>
    <p>{{ post.text|linebreaksbr }}</p>
    {% if not forloop.last %}<hr>{% endif %}
    {% endfor %}

{% endblock %}
Обновите главную страницу сайта, после всех действий она должна выглядеть более нарядно:
image
Теперь на основе базового шаблона мы сможем создавать новые страницы, сохраняя общую структуру и стилистику. А для изменения общей структуры потребуется изменить лишь один шаблон.