В этой главе мы добавим панель навигации со ссылками на другие страницы сайта, чтобы пользователи могли легко перемещаться.
Создайте файл с именем 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