Мы почти закончили с приложением для портфолио и нам осталось создать 2 шаблона:

• project_index - индексный;
• project_detail - детальный.

Давайте начнем с индексного шаблона project_index. Для вывода проектов на индексную страницу воспользуемся Джанговским циклом for:

 {% for project in projects %}

{# Разметка для вывода отдельного проекта #}

{% endfor %}

Создадим новый файл projects/templates/project_index.html и добавим в него следующее содержимое:

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Проекты</h1>
<div class="row">
{% for project in projects %}
    <div class="col-md-4">
        <div class="card mb-2">
            <img class="card-img-top" src="/{% static project.image %}">
            <div class="card-body">
                <h5 class="card-title">{{ project.title }}</h5>
                <p class="card-text">{{ project.description }}</p>
                <a href="/{% url 'project_detail' project.pk %}"
                   class="btn btn-primary">
                    Подробнее...
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

В первой строчке мы указываем, что данный файл расширяет содержимое шаблона из файла base.html. Для придания дополнительной красоты изменим содержимое файла base.html на следующее:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/{% url 'project_index' %}">Мое персональное портфолио</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/{% url 'project_index' %}">Проекты</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/">Блог</a>
            </li>
          </ul>
        </div>
    </div>
</nav>

<div class="container">
    {% block page_content %}{% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Вернемся к файлу project_index.html.

Строчка 2 {% load static %} указывает Django, что нужно загрузить статическое содержимое из папки static, которую нужно создать. Туда и помещаем наши картинки (в папку /projects/static/img/).

Чтобы картинки отображались в Windows нужно в файл settings.py добавить следующие 2 строчки:

STATIC_ROOT = ''
STATICFILES_DIRS = ( os.path.join('static'), )

В строчке 13 файла project_index.html в атрибуте href ({% url 'project_detail' project.pk %}) мы указываем путь (path) c именем (name) project_detail. Это имя указано в файле my-portfolio\projects\urls.py. И также передаем атрибут project.pk (id проекта из БД). Общая форма для создания ссылки такая:

{% url '<url path name>' <view_function_arguments> %}

Осталось добавить шаблон для детальной страницы.

Рядом с файлом project_index.html создайте новый файл с названием project_detail.html. 

Добавьте в него следующее содержимое:

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>{{ project.title }}</h1>
<div class="row">
    <div class="col-md-8">
        <img src="/{% static project.image %}" alt="" width="100%">
    </div>
    <div class="col-md-4">
        <h5>Об этом проекте:</h5>
        <p>{{ project.description }}</p>
        <br>
        <h5>Язык программирования:</h5>
        <p>{{ project.technology }}</p>
        <a href="/{% url 'project_index' %}"
                   class="btn btn-primary">
                    ← Вернуться к списку проектов
        </a>
    </div>
</div>
{% endblock %}