Веб-программирование → Расширение html-файлов в Django

Что это такое? Это нужно для того чтобы один и тот же код не писать повторно. Работает как наследование в ООП. Если вы заметили, все ваши html-страницы в начале и в конце одинаковые, и вам приходится один и тот же код писать во всех файлах, а если хотите изменить заголовок, то во всех страницах нужно поменять. 

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

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

Цикл всех статей про Django:

1. Создаем веб-приложение на Django 3.0.6
2. Основы Django фреймворка
3. Статические файлы (js, css, картинки) в Django
4. Расширение html-файлов в Django
5. Регистрация в Django
6. Модели и Базы данных в Django

Например у нас есть две страницы: Главная и Контакты

home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Главная страница сайта</title>
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
</head>
<body>

<h1>Это Главная страница сайта</h1>
<p>
    Добро пожаловать на наш сайт по изучению Django!
</p>

</body>
</html>

contacts.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Контакты</title>
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
</head>
<body>

<h1>Контакты</h1>

<dl>
    <dt>Email</dt>
    <dd>masteraalish@gmail.com</dd>

    <dt>Tel</dt>
    <dd>+996 778 999 999</dd>
</dl>

</body>
</html>

 

Больше 50% содержимого html-кода у двух страниц одинаковая. Так давайте вынесем повторяющуюся часть за скобки, в отдельный файл.

Создадим файл base.html  (base - основа):

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>Мой сайт</title>
    {% endblock %}
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
</head>
<body>

    {% block content %}
    {% endblock %}

</body>
</html>

Вы заметили что внутри тега <body> я добавил блок с названием content а заголовок обернул блоком title? Эти блоки будут меняться в других файлах, а вся остальная часть будет унаследована от этого файла.

Теперь откройте файл home.html. И измените его так, чтобы там не было ничего кроме:

{% extends 'base.html' %}
{% block content %}
    <h1>Это Главная страница сайта</h1>
    <p>
        Добро пожаловать на наш сайт по изучению Django!
    </p>
{% endblock %}

Как вы видите, в начале мы пишем, что этот файл расширяет(наследует) файл base.html. Потом пишем содержимое блока body. 

Теперь так же с файлом contacts.html:

{% extends 'base.html' %}
{% block content %}
    <h1>Контакты</h1>
    
    <dl>
        <dt>Email</dt>
        <dd>masteraalish@gmail.com</dd>
    
        <dt>Tel</dt>
        <dd>+996 778 999 999</dd>
    </dl>
{% endblock %}

Теперь  перезагрузите ваш django сайт и снова посмотрите на ваши страницы, они не изменились. Но html-кода теперь на страницах намного меньше. 

И подключать дополнительные статик файлы, теперь, вы будете только в одном месте.

Блоков таких, как body в данном примере, может быть сколько угодно. И еще, если вы хотите в наследуемые файлы подключать статик файлы, например картинки, вам нужно в этих файлах также прописать {% load static %}, но только после строчки {% extends %}

{% extends 'base.html' %}
{% load static %}

 Надеюсь все было понятно! Если нет, то пишите мне. 

1204 0
Alisher Alikulov