作品をクリックしたら、詳細画面が表示されるようにします。

URL

詳細画面の URL を作成します。

app/urls.py

from django.urls import path
from app import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('detail/<int:pk>/', views.DetailView.as_view(), name='detail'),
]

コード解説

<int:pk>は、Work データの ID を示しています。

path('detail/<int:pk>/', views.DetailView.as_view(), name='detail'),

ビュー

詳細画面のビューを作成します。

Work データをテンプレートに渡しています。

app/views.py

class DetailView(View):
    def get(self, request, *args, **kwargs):
        work_data = Work.objects.get(id=self.kwargs['pk'])
        return render(request, 'app/detail.html', {
            'work_data': work_data
        })

コード解説

self.kwargs['pk']は URL で指定したpkの値を取得することができます。

work_data = Work.objects.get(id=self.kwargs['pk'])

テンプレート

index

詳細画面へのリンクを追加します。

app/templates/app/index.html

<a class="stretched-link work" href="{% url 'detail' work.id %}"></a>

detail

詳細画面のテンプレートを作成します。

app/templates/app/detail.html

{% extends "app/base.html" %} {% block content %}

<h3 class="mb-4">{{ work_data.title }}</h3>
<div class="card top mb-4">
  <img src="{{ work_data.image.url }}" alt="" />
</div>

<div class="row">
  <div class="col-sm-4 mb-4">
    <h4 class="mb-3">INFORMATION</h4>
    <p>
      <i class="fas fa-laptop-code mr-2"></i>
      <span class="font-weight-bolder">SKILLS : </span>
      {{ work_data.skill }}
    </p>
    <hr />
    <p>
      <i class="fab fa-github mr-2"></i>
      <span class="font-weight-bolder">GITHUB : </span>
      {% if work_data.url %}
      <a class="link-color" href="{{ work_data.url }}" target="_blank">Link</a>
      {% else %} Private {% endif %}
    </p>
    <hr />
    <p>
      <i class="far fa-calendar-alt mr-2"></i>
      <span class="font-weight-bolder">CREATED : </span>
      {{ work_data.created }}
    </p>
    <hr />
  </div>
  <div class="col-sm-8 mb-5">
    <h4 class="mb-3">PROJECT DESCRIPTION</h4>
    <p>{{ work_data.description|linebreaksbr }}</p>
  </div>
</div>

{% endblock %}

コード解説

{% if work_data.url %}は、url データがあるかの判定をしています。

もし url データがあれば、Link を表示し、なければ、Private と表示します。

{% if work_data.url %}
<a class="link-color" href="{{ work_data.url }}" target="_blank">Link</a>
{% else %} Private {% endif %}

linebreaksbrは改行を br に変更してくれます。

よく使いますので、覚えておきましょう。

<p>{{ work_data.description|linebreaksbr }}</p>

CSS

リンクの色を装飾しています。

app/static/css/style.css

/* detail */
.link-color {
  color: #ee6c4d;
}

.link-color:hover {
  color: #c56c55;
  text-decoration: none;
}

確認

詳細画面がこのように表示されていることを確認してください。

作品詳細

作品詳細