Простой блог на Django - часть 7. Работа с шаблонами.

Данную тему нагляднее объяснять на примере какой-то готовой HTML вёрстки, поэтому я взял за основу бесплатный шаблон «Clean blog» (скачать его можно в приложении к данному уроку). Было решено использовать готовую вёрстку, чтобы не отвлекаться на ненужные нюансы, связанные с визуальным отображением, поскольку заметка не об этом. Но если вам в принципе это интересно, то я могу порекомендовать бесплатные уроки по HTML.

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

К статическим файлам относятся картинки, стили, JS-скрипты, шрифты и прочие файлы - их объединяет то, что они скачиваются браузером как есть и никак не модифицируются. И так уж принято, что по умолчанию такие файлы находятся в директории static приложения (да, для каждого приложения это может быть своя такая папка). Так что перейдём в папку приложения posts и создадим там папку static. 

А теперь давайте скопируем наш шаблон в папку newapp/static (сделать это нужно так, чтобы файл index.html находился в папке /newapp/newapp/static)

И ещё кое-что! Поскольку мы находимся в режиме разработки, то у нас статические файлы будут отдаваться напрямую из исходных директорий. Однако, когда будете переносить проект на боевой сервер, не забудьте перед этим собрать все статические файлы всех приложений в единую директорию. Сделать это можно с помошью команды:

collectstatic

Директория, в которой будут собираться все статические файлы, прописывается в файле newapp/newapp/settings.py: 

STATIC_ROOT = os.path.join(BASE_DIR, "static")

Не забудьте эту самую директорию static создать в директории newapp. Плюс, так же импортируем библиотеку os:

import os

Создание базового шаблона

Под базовым шаблоном понимается повторяющийся кусок HTML кода, который будет общим для всех страниц - сюда можно отнести шапку, подвал, а так же тэг head. Но сперва нам нужно определиться, где будет храниться наш шаблон. За то, в каких директориях Django будет искать шаблоны сайта, отвечает переменная DIRS, которая в свою очередь находится в файле newapp/newapp/settings.py. Обычно в качестве названия такой папки используют "templates" и чтобы не отходить от традиций, поступим так же: 

'DIRS': [os.path.join(BASE_DIR, "templates")],

Ну и разумеется не забываем создать папку templates по следующему пути - newapp/templates И вот в эту папку скопируем файл index.html из нашего шаблона.

Но чтобы данный шаблон подгружался, необходимо изменить файл posts/views.py Для этого удаляем всё, что идёт после

latest = Post.objects.order_by('-pub_date')[:10]

и добавляем функцию render, которая отвечает за вызов шаблона и передачу ему указанных данных:

return render(request, "index.html", {"posts": latest})

Не забываем импортировать саму функцию:

from django.shortcuts import render

Теперь если обратиться к сайту, то получим неоформленную кашу из текста.

И неудивительно - так произошло потому, что стили не подгрузились. Поэтому давайте первым делом исправим пути к файлам в секции head. Как я уже объяснял ранее, все файлы у нас будут храниться в папке static, поэтому логично что в самом Django есть функция, которая ответственна за подгрузку файлов из этой папки. Но для начала необходимо подгрузить вспомогательный модуль для работы со статикой: 

{% load static %}

Сами же пути к файлам мы меняем следующим образом. Строчку вида:

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

я поменял на:

<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">

И так делаем для всех CSS и JS файлов. По итогу секция head у меня стала выглядеть вот так:

Как итог, если сейчас обновить главную страничку, то можно увидеть что она преобразилась. Это конечно всё здорово, однако напомню - наша задача выделить общие элементы шаблона. С подключением файлов в секции head, шапкой и футером всё понятно - они изменяться не будут; пришло время обратить внимание на те элементы, которые от страницы к странице будут меняться - в данном случае это H1 и непосредственно сама контентная часть. И вот наша задача эти секции обозначить, чтобы в дальнейшем в дочернем шаблоне (который будет наследоваться от базового), была возможность эти секции менять (переопределять).

Займёмся тэгом H1. Если было:

<h1>Clean Blog</h1>

то будет:

<h1>{% block h1 %}Clean Blog{% endblock %}</h1>

Дальше контентная часть. Она расположена внутри тэга с классом "container", аккурат после комментария:

<!-- Main Content -->

А значит внутри этого тэга обозначаем данную секцию так:

<!-- Main Content -->
<div class="container">
  {% block content %}
  <div class="row">
    HTML-код постов
    ...
    ...
  </div>
  {% endblock %}
</div>

Ещё у нас будет меняться заголовок браузера:

<title>{% block title %}Clean Blog - Start Bootstrap Theme{% endblock %}</title>

И чтобы я ещё сделал, так это поправил бы ссылку на главную страницу. Для этого я исправил href="index.html" на href="/"

Итак, базовый шаблон мы подготовили - именно его мы и будем брать за основу при создании новых шаблонов. Об этом поговорим в следующей заметке, где рассмотрим как это можно сделать, используя наследование шаблонов. 

Как и всегда, изменения можно посмотреть в репозитории - https://github.com/maclen2007/simple_django_blog/commit/d47af2efa95e277ce45b76f6cf00395cb0c98b71