path: root/files/ru/learn/server-side/django/home_page/index.html

---
title: 'Руководство часть 5: Создание домашней страницы'
slug: Learn/Server-side/Django/Home_page
tags:
  - django
  - Для начинающих
  - Изучение
  - Кодирование
  - Отображения
  - Руководство
  - Серверная сторона
  - Статья
  - Шаблоны
translation_of: Learn/Server-side/Django/Home_page
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>

<p class="summary">Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретем практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Требования:</th>
   <td>Прочитать <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Введение в Django</a>. Завершить изучение предыдущих частей руководства (включая <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Руководство часть 4: Django административный раздел сайта</a>).</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Понимать как создавать простые url-преобразования (которые не содержат никаких данных) и отображения, как получать данные из моделей и создавать шаблоны.</td>
  </tr>
 </tbody>
</table>

<h2 id="Обзор">Обзор</h2>

<p>Теперь, когда мы определили наши модели и создали несколько записей в них, пришло время написать код, который будет показывать данную информацию пользователям. И первое, что нам необходимо сделать это определиться какую информацию мы бы хотели показывать на наших страницах,  а затем определить соответствующие URL-адреса для получения соответствующих ресурсов. Затем нам надо создать url-преобразования, отображения (функции, или классы), а затем шаблоны страницы. </p>

<p>Диаграмма, представленная ниже,  демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остается создать следующее:</p>

<ul>
 <li>URL-преобразования для перехода по соответствующему URL-адресу (с учетом информации, передаваемой в данном адресе) к соответствующей функции отображения.</li>
 <li>Функции отображения для запроса соответствующих данных из моделей, создание страниц HTML для показа этих данных и их отправку в клиент пользователя (в браузер).</li>
 <li>Шаблоны, которые используются отображениями для рендеринга (отрисовки) данных.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>

<p>Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдем в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.</p>

<h2 id="Определяем_URL-адреса_страниц">Определяем URL-адреса страниц</h2>

<p>По сути, так как для конечных пользователей, данная версия сайта <em>LocalLibrary</em> является read-only (только для чтения), то нам надо создать домашнюю страницу и страницы, которые будут <em>показывать</em> списки авторов и книг, а также детальную информацию о них, соответственно. </p>

<p>Перечислим URL-адреса, которые понадобятся для наших страниц:</p>

<ul>
 <li><code>catalog/</code> — Домашняя/индексная страница.</li>
 <li><code>catalog/books/</code> — Список всех книг.</li>
 <li><code>catalog/authors/</code> — Список всех авторов.</li>
 <li><code>catalog/book/<em>&lt;id&gt;</em></code> — Детальная информация для определенной книги со значением первичного ключа равного <code><em>&lt;id&gt;</em></code>. Например, <code>/catalog/book/3</code>, для <code>id = 3</code>.</li>
 <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— Детальная информация для определенного автора со значением первичного ключа равного <em><code>&lt;id&gt;. </code></em>Например, <code>/catalog/author/11</code>, для автора с <code>id = 11</code>.</li>
</ul>

<p>Первые три URL-адреса используются для показа домашней страницы, а также списков книг и авторов. Они не кодируют никакой дополнительной информации и результат показа данных страниц будет полностью зависеть от того, что находится в базе данных  и, по сути, будет все время одним и тем же (при неизменной базе данных, конечно).</p>

<p>Последние два URL-адреса применяются для показа детальной информации об определенной книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <code><em>&lt;id&gt;</em></code>, выше). URL-преобразование получает данную информацию и передает ее в отображение, которое применяет ее для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). </p>

<div class="note">
<p><strong>Примечание</strong>: Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа <code>GET</code> (например, <code>/book/?id=6</code>). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными (<a href="https://www.w3.org/Provider/Style/URI">посмотрите совет W3C здесь</a>).<br>
 <br>
 Документация Django рекомендует кодировать информацию в теле URL-адреса, на практике это приводит к лучшей структуре сайта.</p>
</div>

<p>Как было отмечено ранее, оставшаяся часть данной статьи описывает как сделать главную страницу сайта.</p>

<h2 id="Создание_главной_страницы_сайта">Создание главной страницы сайта</h2>

<p>Первой страницей, которую мы создадим, будет главная страница сайта (<code>catalog/</code>). Она будет небольшой статической HTML-страницей, которая будет показывать вычисленные "количества" различных записей из базы данных. Для того, чтобы проделать данную работу мы вначале создадим URL-преобразование, затем отображение и шаблон. </p>

<div class="note">
<p><strong>Примечание</strong>: Лучше уделить больше внимания на данный раздел, поскольку информация, представленная здесь, применяется для создания всех страниц сайта.</p>
</div>

<h3 id="URL-преобразование">URL-преобразование</h3>

<p>Когда мы создавали <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">скелет сайта</a> мы обновили <strong>locallibrary/urls.py </strong>так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключен для обработки оставшейся части строки.</p>

<pre><code>urlpatterns += [
    path('catalog/', include('catalog.urls')),
]</code></pre>

<p>Примечание: всякий раз, когда Django сталкивается c  <code><a href="https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.include" title="django.conf.urls.include">django.urls.include()</a></code>  он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включенный URLconf для дальнейшей обработки.</p>

<p>Внутри нашего каталога приложения откройте <strong>urls.py</strong> и поместите в него текст, отмеченный жирным, ниже. </p>

<pre class="brush: python line-numbers  language-python"><code class="language-python">urlpatterns = [
<strong>    path('', views.index, name='index'),</strong>
]</code></pre>

<p>Эта функция <code>path()</code> определяет URL-паттерн (в данном случае это пустая строка:<code>'' - </code>мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введенный адрес будет соответствует данному паттерну (<code>views.index</code> — это функция с именем <code>index()</code> в <strong>views.py</strong>).</p>

<p>Данная функция <code>path()</code>, кроме того, определяет параметр <code>name</code>, который уникально определяет <em>это </em>частное URL-преобразование. Вы можете использовать данное имя для "обратного" ("reverse") преобразования — то есть, для динамического создания URL-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:</p>

<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>

<div class="note">
<p><strong>Примечание</strong>: Мы могли бы, конечно, жестко указать прямую ссылку (то есть, <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), но тогда, если мы изменим адрес нашей домашней страницы (например на <code>/catalog/index</code>), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!</p>
</div>

<h3 id="Отображения_(на_основе_функций)">Отображения (на основе функций)</h3>

<p>Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей <code>Book</code>, <code>BookInstance</code>, доступности <code>BookInstance</code>, а также записи <code>Author</code> из базы данных, затем передает эти записи в шаблон страницы, генерирует страницу и передает ее пользователю (клиенту пользователя, например браузеру).</p>

<p>Откройте <strong>catalog/views.py</strong> и отметьте для себя, что данный файл уже импортирует функцию <a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">render()</a> - функцию, которая генерирует HTML-файлы при помощи шаблонов страниц и соответствующих данных. </p>

<pre class="brush: python">from django.shortcuts import render

# Создайте ваше отображение здесь
</pre>

<p>Скопируйте следующий код в нижнюю часть файла. Первая строка импортирует классы модели, которые мы будем использовать для доступа к данным во всех наших функциях (позже и классах) отображения.</p>

<pre class="brush: python">from .models import Book, Author, BookInstance, Genre

def index(request):
    """
    Функция отображения для домашней страницы сайта.
    """
    # Генерация "количеств" некоторых главных объектов
    num_books=Book.objects.all().count()
    num_instances=BookInstance.objects.all().count()
    # Доступные книги (статус = 'a')
    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
    num_authors=Author.objects.count()  # Метод 'all()' применен по умолчанию.

    # Отрисовка HTML-шаблона index.html с данными внутри
    # переменной контекста context
    return render(
        request,
        'index.html',
        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
    )</pre>

<p>Первая часть функции отображения получает количество записей при помощи вызова функции <code>objects.all()</code> у атрибута <code>objects</code>, доступного для всех классов моделей. Похожим образом мы получаем список объектов <code>BookInstance</code>, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства (<a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Руководство часть 3: Применение моделей &gt; Поиск записей</a>).</p>

<p>В конце функции <code>index</code> вызывается функция  <code>render()</code>, которая, в качестве ответа, создает и возвращает страницу HTML  (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект <code>request</code>  (типа <code>HttpRequest</code>), шаблон HTML-страницы с метками (<code>placeholders</code>), которые будут замещены данными,  а также переменной <code>context</code> (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). </p>

<p>В следующем разделе мы более подробно поговорим о шаблонах и переменной контекста. Давайте создадим наш шаблон, чтобы показать уже что-нибудь пользователю!</p>

<h3 id="Шаблон">Шаблон</h3>

<p>Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем '<strong>templates</strong>' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов <code>render()</code> будет пытаться найти файл <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдете в браузер и наберете в адресной строке <code>127.0.0.1:8000</code>. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.</p>

<div class="note">
<p><strong>Примечание</strong>: На самом деле, в зависимости от настроек проекта, Django просматривает несколько мест в поисках шаблона (поиск в директории приложения осуществляется по умолчанию!). Вы можете найти больше информации о шаблонах и форматах, которые они поддерживают, перейдя по ссылке <a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Шаблоны</a> (Django docs).</p>
</div>

<h4 id="Расширение_шаблонов">Расширение шаблонов</h4>

<p>Шаблон главной страницы нашего сайта должен соответствовать стандарту разметки HTML для разделов <code>head</code> и <code>body</code>, кроме того иметь разделы для навигации (на другие страницы, которые мы создадим позже) и показа некоторого вводного текста. Большая часть данной структуры будет одинаковой для всех страниц нашего сайта. Таким образом, чтобы избежать копирования одной и той же информации, язык создания шаблонов Django позволяет вам объявить базовый шаблон, а затем расширить его, замещая только те части, которые являются специфическими для каждой страницы. </p>

<p>Например, базовый шаблон <strong>base_generic.html</strong> может выглядеть как показано ниже. Как вы видите, этот файл содержит некоторую "общую" структуру HTML, разделы для заголовка, панель навигации и содержимое, отмеченное тэгами шаблона <code>block</code> и <code>endblock</code> (показано жирным). Данные блоки могут быть пустыми, или иметь содержимое, которое будет использоваться "по умолчанию" всеми страницами-наследниками.</p>

<div class="note">
<p><strong>Примечание</strong>: <em>Тэги</em> шаблона подобны функциям, которые могут применяться для создания циклов по спискам, выполнять условные операции и так далее. Кроме тэгов, язык шаблона позволяет использовать переменные (которые передаются в шаблон из отображения), а также <em>шаблонные фильтры</em>, которые переформатируют переменные (например, переводят строку в нижний регистр).</p>
</div>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
&lt;/head&gt;

&lt;body&gt;
  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Когда мы определяем шаблон для конкретного отображения, то в первую очередь мы объявляем базовый шаблон (при помощи тэга <code>extends</code> — смотрите код в следующем фрагменте). Если имеются блоки в базовом шаблоне, которые мы хотим заместить, тогда в нашем текущем шаблоне мы объявляем <code>block</code>/<code>endblock</code> и указываем соответствующее имя блока. </p>

<p>Например фрагмент кода, показанный ниже, демонстрирует применение тэга <code>extends</code> и переопределяет блок с именем <code>content</code>. Окончательный код HTML будет содержать все структуры базового файла шаблона (включая содержимое по умолчанию, которое мы указали в блоке <code>title</code>) и код блока <code>content</code>, который мы разместили в текущем файле шаблона.</p>

<pre class="brush: html">{% extends "base_generic.html" %}

{% block content %}
&lt;h1&gt;Local Library Home&lt;/h1&gt;
&lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
{% endblock %}</pre>

<h4 id="Базовый_шаблон_сайта_LocalLibrary">Базовый шаблон сайта LocalLibrary</h4>

<p>Базовый шаблон, который мы планируем использовать для сайта <em>LocalLibrary</em>, представлен ниже. Как вы видите, данный фрагмент содержит HTML код и объявляет следующие блоки <code>title</code>, <code>sidebar</code> и <code>content</code>. Мы добавили заголовок по умолчанию (который, возможно, мы захотим изменить), а также боковую панель навигации, содержащей ссылки на списки всех книг и авторов (панель навигации, мы, вероятно, не будем менять/замещать, но, тем не менее, добавив этот блок, мы оставим для себя такую возможность).</p>

<div class="note">
<p><strong>Примечание</strong>: Во фрагменте мы используем два дополнительных шаблонных тега: <code>url</code> и <code>load static</code>. Они будут описаны в следующих разделах.</p>
</div>

<p>Создайте новый файл — <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> — и добавьте в него следующее содержимое:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

  &lt;!-- Добавление дополнительного статического CSS файла --&gt;
  {% load static %}
  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class="container-fluid"&gt;

    &lt;div class="row"&gt;
      &lt;div class="col-sm-2"&gt;
      {% block sidebar %}
      &lt;ul class="sidebar-nav"&gt;
          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     {% endblock %}
      &lt;/div&gt;
      &lt;div class="col-sm-10 "&gt;
      {% block content %}{% endblock %}
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>Шаблон использует (и включает в себя) JavaScript и CSS от <a href="http://getbootstrap.com/">Bootstrap</a> для лучшего размещения элементов и формирования внешнего вида HTML страницы. Применение Bootstrap, или любого другого фреймворка для клиентской части сайта, является довольно продуктивным способом повышения привлекательности страницы, в том числе, это учитывает возможность запроса и показа сайта с устройств, с различными разрешениями экрана, а кроме того, это позволяет нам повысить уровень взаимодействия с пользователем — мы направим большую часть своих усилий на серверную часть нашего сайта!</p>

<p>Базовый шаблон ссылается на локальный файл css  (<strong>styles.css</strong>), который предоставляет дополнительные стили. Создайте <strong>/locallibrary/catalog/static/css/styles.css</strong> и добавьте в него следующее содержимое:</p>

<pre class="brush: css">.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}</pre>

<h4 id="Индексный_шаблон_(шаблон_главной_страницы_сайта)">Индексный шаблон (шаблон главной страницы сайта)</h4>

<p>Создайте файл HTML <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и скопируйте в него код, указанный ниже. Как вы наверное заметили, в первой строке мы расширяем наш базовый шаблон, а затем замещаем содержимое блока <code>content</code>, базового шаблона, новым содержимым текущего шаблона.</p>

<pre class="brush: html">{% extends "base_generic.html" %}

{% block content %}
&lt;h1&gt;Local Library Home&lt;/h1&gt;

  &lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;

&lt;h2&gt;Dynamic content&lt;/h2&gt;

  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
  &lt;/ul&gt;

{% endblock %}</pre>

<p>В данном фрагменте, в разделе <em>Динамическое содержимое, </em>мы объявили метки (<em>шаблонные переменные</em>) для информации, которую мы получаем из соответствующего отображения.  Данные переменные объявляются при помощи "двойных фигурных скобок" (в предыдущем фрагменте выделено жирным).</p>

<div class="note">
<p><strong>Примечание:</strong> Переменные шаблона заключаются в двойные фигурные скобки (<code>\{{ num_books }}</code>) , а тэги шаблона (функции шаблона), помещаются в одинарные фигурные скобки со знаками процента (<code>{% extends "base_generic.html" %}</code>).</p>
</div>

<p>Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых <em>ключей</em> из словаря переменной <code>context</code>, которая, в свою очередь, передается из отображения, во время вызова функции <code>render()</code> (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, <em>значения</em>.  </p>

<pre class="brush: python">return render(
    request,
    'index.html',
     context={'<strong>num_books</strong>':num_books,'<strong>num_instances</strong>':num_instances,'<strong>num_instances_available</strong>':num_instances_available,'<strong>num_authors</strong>':num_authors},
)</pre>

<h4 id="Ссылка_на_статические_файлы_их_шаблонов">Ссылка на статические файлы их шаблонов</h4>

<p>Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения <code>STATIC_URL</code> (по умолчанию, значение параметра <code>STATIC_URL</code> установлено в '<code>/static/</code>',  но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то еще).</p>

<p>Внутри шаблона вы  вызываете функцию (тэг) <code>load</code>, которая загружает статическую библиотеку "static" (как показано ниже). После того как статическая библиотека загружена, вы можете использовать тэг шаблона <code>static</code>, который указывает относительный путь URL к интересующему вас файлу.</p>

<pre class="brush: html"> &lt;!-- Добавляем дополнительный статический CSS-файл --&gt;
{% load static %}
&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>

<p>Тем же способом вы можете загрузить нужное изображение. Например:</p>

<pre class="brush: html">{% load static %}
&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/&gt;
</pre>

<div class="note">
<p><strong>Примечание</strong>: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (<strong>/locallibrary/locallibrary/urls.py</strong>), который мы создали в части <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">создание скелета сайта</a>. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернемся к этому позже.</p>
</div>

<p>Для получения более подробной информации о работе со статическими файлами  обратитесь к документации по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Управление статическими файлами</a> (Django docs).</p>

<h4 id="Построение_URL-адресов">Построение URL-адресов</h4>

<p>Базовый шаблон, указанный выше, вводит тэг <code>url</code>.</p>

<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
</pre>

<p>Данный тэг с именем <code>url()</code>, ищет в файле <strong>urls.py</strong> связанное значение переменной, указанной в качестве ее параметра <code>'index'</code>, а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.</p>

<h2 id="Как_теперь_все_это_выглядит">Как теперь все это выглядит?</h2>

<p>На данный момент мы должны были сделать все что необходимо, для того, чтобы показать главную страницу нашего сайта. Запустите сервер (<code>python3 manage.py runserver</code>) и введите в ваш браузер адрес <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>. Если все настроено как надо, то ваш сайт должен выглядеть как показано на следующей картинке.</p>

<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>

<div class="note">
<p><strong>Примечание:</strong> На данном этапе вы не сможете воспользоваться ссылками на страницы <strong>All books</strong> и <strong>All authors</strong>, потому что url-адреса, отображения и шаблоны для данных страниц не созданы (мы просто объявили метки для соответствующих ссылок в базовом шаблоне<code> base_generic.html</code>).</p>
</div>

<h2 id="Проверьте_себя">Проверьте себя</h2>

<p>А теперь парочка заданий, чтобы проверить, насколько вы усвоили работу с запросами к моделям базы данных, взаимодействия с отображениями и шаблонами. </p>

<ol>
 <li>В главном файле шаблона (<em>base_generic.html</em>) есть блок <code>title</code>. Переопределите этот блок в индексном шаблоне (<em>index.html</em>) и задайте новый заголовок для этой страницы.</li>
 <li>Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учета регистра), а затем передайте эти значения в шаблон.</li>
</ol>

<ul>
</ul>

<h2 id="Итог">Итог</h2>

<p>Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-еще-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.</p>

<p>В  следующей части, при помощи наших новых знаний, мы  создадим еще четыре страницы.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial03/">Написание вашего первого приложения Django, часть 3: Отображения и Шаблоны</a>  (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/">URL-диспетчер</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/views/">Функции отображения</a> (DJango docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Шаблоны</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Управление статическими файлами</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">Удобные (встроенные) функции Django</a> (Django docs)</li>
</ul>

<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>