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

Создайте файл с именем base.html в папке шаблонов. Этот файл будет служить родительским шаблоном для сайта.

PROJECT
└── example
├── listings
│ ├── migrations
│ ├── templates/listings
│ │ ├── index.html
│ │ ├── all_listings.html
│ │ ├── base.html
│ │ └── new_listing.html
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── forms.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── venv 
└── manage.py

В родительских шаблонах есть общие элементы, такие как панели навигации, логотипы, боковые панели и т. д. Мы помещаем общие элементы в родительский шаблон, чтобы нам не приходилось переписывать код в каждом шаблоне.

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

Откройте base.html и добавьте следующий код.

#listings/templates/listings/base.html
<nav class="navbar">
  <a href="{% url 'listings:index' %}">BIKE FINDER</a> -
  <a href="{% url 'listings:all_listings' %}">LISTINGS</a> -
  <a href="{% url 'listings:new_listing' %}">NEW LISTING</a>
</nav>
                    
{%block content%}
                    
{%endblock content%}

{%block content%} — {%endblock content%}

Эти пустые теги блоков будут заполнены содержимым других шаблонов (дочерних шаблонов).

Домашняя страница и панель навигации

Откройте index.html и добавьте следующий код.

#listings/templates/listings/index.html
{% extends "listings/base.html" %}
{%block content%}
<h3>Bike Find3r</h3>
<p>This is a homepage</p>
{%endblock content%}

{% расширяет "parent_template" %}

Тег extends позволяет Django узнать, от какого родительского шаблона наследуется дочерний шаблон.

В приведенном выше коде base.html является родительским шаблоном, от которого наследуется дочерний шаблон index.html.

Тег extends берет из родительского шаблона base.html панель навигации и пустую пару тегов блока контента.

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

На каждой странице отображается разная информация, поэтому оберните информацию в шаблоны тегами блока контента и добавьте тег extends, чтобы иметь панель навигации на этой конкретной странице.

Мы будем следовать тому же процессу для двух других страниц.

Страница списков и панель навигации

Откройте all_listings.html и отредактируйте его, как показано.

#listings/templates/listings/all_listings.html
{% extends "listings/base.html" %}
{%block content%}
<h1>LISTINGS</h1>
<div class="col">
  <div class="card">
      
    {% for listing in all_listings %}
      
    <p><b>Title:</b> {{ listing.title }}</p>
    <p><b>Condition:</b> {{ listing.condition }}</p>
    <p><b>Sale Type:</b> {{ listing.sale_type }}</p>
    <p><b>Price:</b> $ {{ listing.price|floatformat:2 }}</p>
    <p><b>Location:</b> {{ listing.city }}, {{ listing.state }}</p>
    <p><b>Post Date:</b> {{ listing.list_date }}</p>
      
    <ul>
      <a class="btn" href="">View Listing</a>
    </ul>
    <hr>
      
    {% endfor %}
      
  </div>
</div>
{%endblock content%}

Содержание страницы со списками совсем не изменилось. Мы только что добавили тег extends и обернули информацию страницы списков тегами блока контента.

Новая страница со списком и панель навигации

Откройте new_listing.html и добавьте необходимые теги.

#listings/templates/listings/new_listing.html
{% extends "listings/base.html" %}
{%block content%} 
<h1>NEW LISTING</h1>
<form action="{% url 'listings:new_listing' %}" 
        method='post' enctype="multipart/form-data">
  
  <div class="form-group">
      {% csrf_token %}
      {{ form.as_p }}
  </div>
  
  <button type="submit" class="btn">Create Listing
  </button>
  
</form>
{%endblock content%}

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

Если вам нравится сериал, следите за мной в Twitter и на Youtube, чтобы узнать больше.

Youtube: Брайам Лоайза

Твиттер: balt1794