index.htmlとusers_detail.htmlでは、写真の一覧を表示しています。今よりももう少し綺麗な表示にするために、現状のコードを以下のように書き換えてみましょう。

~/PhotoService/app/templates/app/index.html

{% extends 'app/base.html' %}

{% block content %}

<div class="photo-container">
{% for photo in photos %}
    <div class="photo">
        <a href="{% url 'app:photos_detail' photo.id %}">
            <img src="{{ photo.image.url }}" class="photo-img">
        </a>
        <div class="photo-info">
            <a href="" class="category">{{ photo.category }}</a>
            <a href="{% url 'app:users_detail' photo.user.id %}">@{{ photo.user }}</a>
        </div>
    </div>
{% endfor %}
</div>

{% endblock %}

~/PhotoService/app/templates/app/users_detail.html

{% extends 'app/base.html' %}

{% block content %}

<h2 class="user-name">@{{ user.username }}</h2>

<div class="photo-container">
{% for photo in photos %}
    <div class="photo">
        <a href="{% url 'app:photos_detail' photo.id %}">
            <img src="{{ photo.image.url }}" class="photo-img">
        </a>
        <div class="photo-info">
            <a href="" class="category">{{ photo.category }}</a>
            <a href="{% url 'app:users_detail' photo.user.id %}">@{{ photo.user }}</a>
        </div>
    </div>
{% endfor %}
</div>

{% endblock %}

カテゴリ名や、名前が表示されるようになりました。(今は、カテゴリ名のリンクは何も設定しなくて大丈夫です。)

このままのコードでも良いのですが、index.htmlとusers_detail.htmlではどちらも全く同じコードを書いて写真一覧を表示しています。共通部分のコードは、1つのファイルにまとめてしまいましょう。

共通するコードを1つのファイルにまとめる手順は以下の通りです。

  1. photos_list.htmlというファイルを新規作成し、共通コードをこのファイルに移す。
  2. index.htmlとusers_detail.htmlで、photos_list.htmlを読み込む

1. photos_list.htmlを作る

まずは、photos_list.htmlを作り共通部分のコードをこのファイルにコピーします。

~/PhotoService/app/templates/app/photos_list.html

<div class="photo-container">
{% for photo in photos %}
    <div class="photo">
        <a href="{% url 'app:photos_detail' photo.id %}">
            <img src="{{ photo.image.url }}" class="photo-img">
        </a>
        <div class="photo-info">
            <a href="" class="category">{{ photo.category }}</a>
            <a href="{% url 'app:users_detail' photo.user.id %}">@{{ photo.user }}</a>
        </div>
    </div>
{% endfor %}
</div>

2. photos_list.htmlを読み込む

photos_list.htmlを他のファイルから読み込むためには、includeというテンプレートタグが使えます。

~/PhotoService/app/templates/app/index.html

{% extends 'app/base.html' %}

{% block content %}

<!-- photos_list.html を読み込んで写真一覧を表示する -->
{% include 'app/photos_list.html' %}

{% endblock %}

~/PhotoService/app/templates/app/users_detail.html

{% extends 'app/base.html' %}

{% block content %}

<h2 class="user-name">@{{ user.username }}</h2>

<!-- photos_list.html を読み込んで写真一覧を表示する -->
{% include 'app/photos_list.html' %}

{% endblock %}

これで、共通部分を1つのファイルにまとめることができました。このように、共通しているコードを1つのファイルにまとめて、構造を整理することをリファクタリングと言います。リファクタリングをしておくと、編集範囲が狭くなりメンテナンスなども楽になります。

投稿数を表示する

users_detail.htmlを編集しましたので、ついでにこのページで写真の投稿数がわかるようにしてみましょう。投稿数は、photos.countのように、クエリセットのcount属性で取得することができます。

~/PhotoService/app/templates/app/users_detail.html

<h2 class="user-name">@{{ user.username }}</h2>

{% if photos.count != 0 %}
    <p>投稿<strong>{{ photos.count }}</strong>件</p>
{% else %}
    {% if user == request.user %}
        <p>初めての投稿をしてみましょう!</p>
    {% else %}
        <p>@{{ user.username }}さんはまだ投稿していません。</p>
    {% endif %}
{% endif %}

{% include 'app/photos_list.html' %}

photos.count != 0のとき(1つでも投稿があるとき)は、投稿数を表示します。

自分のページで、1つも投稿がない場合は「初めての投稿をしてみましょう!」とメッセージを表示します。

1つも投稿していない他人のページにアクセスしたときは「@{{ user.username }}さんはまだ投稿していません。」と表示されます。

次はいよいよ最後のレッスンです。カテゴリーごとのページを作りましょう。

< PREV NEXT >
SHARE ! Tweet