Создание шаблонов для представлений(view)

Мы создали представления и шаблоны URL для нашего приложения. Теперь настало время добавить шаблоны для отображенияпостов в удобной для пользователя среде(в браузере).

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

templates/
    blog/
        base.html
        post/
            list.html
            detail.html

Это будет файловая структура для наших шаблонов. Файл base.html будет включать основную структуру HTML веб-сайта и разбивать содержимое на основную область содержимого и боковую панель. Файлы list.html и detail.html будут наследоваться от файла base.html, чтобы визуализировать список записей блога и подробные представления постов.

Джанго имеет мощный шаблонизатор, позволяющий задать способ отображения данных. Он основан на тегах шаблона, которые выглядят как переменные шаблона, которые выглядят как и фильтры шаблонов, которые могут применяться к переменным и выглядеть как . Все встроенные теги шаблонов и фильтры можно посмотреть тут https://docs.djangoproject.com/en/1.8/ref/templates/builtins/

Теперь давайте добавим слледующий код в файл base.html:

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
<div id="content">
    {% block content %}
    {% endblock %}
</div>
<div id="sidebar">
    <h2>My blog</h2>
    <p>This is my blog.</p>
</div>
</body>
</html>

{% load staticfiles %}сообщает Джанго о загрузке тегов шаблона staticfiles, которые предоставляются в приложении django.contrib.staticfiles. После загрузки можно использовать фильтр шаблона по всему шаблону.

С помощью этого фильтра шаблона можно включить статические файлы, такие как файл blog.css, который будет найден в коде данного примера, в директории static/ приложения blog. Скопируйте этот каталог в то же расположение проекта, чтобы использовать существующие статические файлы.

Можно увидеть, что имеется два тега . Они говорят Джанго, что мы хотим определить блок в этой области. Шаблоны, наследуемые от этого шаблона, могут заполнить блоки содержимым. Мы определили блок под названием "title" и блок "content".

Добавьте следующий код в файл post/list.html:

{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
    <h1>My Blog</h1>
    {% for post in posts %}
        <h2>
            <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
        </h2>
        <p class="date">
            Published {{ post.publish }} by {{ post.author }}
        </p>
        {{ post.body|truncatewords:30|linebreaks }}
    {% endfor %}
{% endblock %}

С помощью тега шаблона мы сообщаем, что Джанго наследуется из шаблона blog/base.html. Затем заполняются title и блоки содержимого базового шаблона с содержимым. Мы проходим циклом по всем постам и выводим их title, ссылку, дату публикации и автора поста. В теле поста мы применяем два фильтра шаблона: truncatewords - обрезает значение до числа указанных слов, а linebreaks Заменяет переносы строки аналогами из HTML; один перенос строки будет заменен на br/, новая строка с предыдущей пустой строкой оборачиваются в тег p . Можно объединить столько фильтров шаблонов, сколько требуется.

Если у вас не запущен сервер - запустите его командой python manage.py runserver

Перейдите в браузере по адресу: http://127.0.0.1:8000/blog/

Обратите внимание, что необходимо иметь посты со статусом "Опубликовано", чтобы увидеть их здесь. Вы должны увидеть что-то подобное:

Затем отредактируйте файл post/detail.html:

{% extends "blog/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
    <h1>{{ post.title }}</h1>
    <p class="date">
        Published {{ post.publish }} by {{ post.author }}
    </p>
{{ post.body|linebreaks }}
{% endblock %}

Теперь вы можете пройти по ссылке на любой из опубликовынных постов и увидеть следующее:

Обратите внимание на URL он должен выглядеть примерно так: /blog/2015/09/20/who-was-django-reinhardt/ Мы создали дружественный URL

results matching ""

    No results matching ""