Djangoで記事をカード型で表示するようにした

参考サイト

Bootstrap公式ドキュメント
https://getbootstrap.com/docs/4.3/components/card/

Card decksの部分をほぼそのまま使った。

css部分は以下のQiitaの記事を参考にさせていただいた。
https://qiita.com/iwato/items/840b831ad66fec0dd4c1

コード

html

<div class="col-sm-4">
  <div class="card card-link post-card">
    <a href="{% url 'posts:post_detail' post.id %}"></a>
    <img class="card-img-top" src="{{ post.middle_image.url }}" alt="thumbnail">
    <div class="card-body">
      <h5 class="card-title">{{ post.title }}</h5>
    </div>
    <div class="card-footer">
      <small class="text-muted">published at {{ post.published|date:"Y/n/j" }}</small>
    </div>
  </div>
</div>

一行に最大3つ記事を表示するためにcol-sm-4を指定している。
記事のサムネイル、タイトル、公開日を表示するようにしている。

css

/*div要素全体にリンクをつけるために必要な要素*/
.card-link {
  position: relative;
}
.card-link a {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
}

.post-card {
  margin-top: 5px;
  margin-bottom: 5px;
}

カード全体にリンクをつけるために.card-linkに対してcssを設定した。
また、カードの上下に間隔がなかったため、marginを別途設定した。