python: Flaskアプリの作成⑧ 条件によって範囲の色を変更する

備忘録です。

今回はhtmlタグ内のクラスの内容を条件によって変えてみる備忘録です。

color

htmlタグ内のclassをjinja2でifを記述し条件分岐させる

{% extends "base.html"%}

{% block content %}
<a href="{{ url_for('add_aspiration')}}" class='btn btn-outline-primary float-end mt-2'>やりたいこと登録</a>
<h1 class="mt-4">やりたいこと一覧</h1>
{% for aspiration in aspirations %}
  # このdiv内のclassを条件づけで変更しています
  <div class="{% if aspiration.status == 0 %}shadow p-3 mb-5 bg-body rounded{% else %}shadow p-3 mb-5 bg-secondary rounded text-white{% endif %}">
    <h2>{{ aspiration.title }}</h2>
    <small>作成日:{{ aspiration.created_at.strftime('%Y-%m-%d %H:%M') }}</small><br/>
    {% if aspiration.completed_at %}
      <small>完了日：{{ aspiration.completed_at.strftime('%Y-%m-%d')}}</small><br/>
    {% endif %}
    {{ aspiration.content }} <br/><br/>
    <a href="{{ url_for('edit_aspiration', id=aspiration.id )}}" class="btn btn-outline-secondary btn-sm">編集</a>
    <a href="{{ url_for('deleat_aspiration', id=aspiration.id)}}" class="btn btn-outline-danger btn-sm">削除</a>
  </div>
{% endfor %}
{% endblock %}

コメントを入れている部分を抜き出しみやすくすると下記のような形です。

class="{% if aspiration.status == 0 %}
                  shadow p-3 mb-5 bg-body rounded
             {% else %}
                  shadow p-3 mb-5 bg-secondary rounded text-white
             {% endif %}"

今回、「やりたいこと」を表示するというアプリなのですが、やりたいことを完了した場合、終わったよ！ということを表示したく、背景色を変えてみる方法にしました。

なんかむしろ終わったものが目立っている感じもしますが。。。

ただ、条件分岐でclassの内容を変える方法もそんなに難しくなくできました。