djangoでのテンプレートの継承は強力です．
ですが，activeの切り替えはどうするんだ？と私自身わからなかったことがあるので，その方法を解説します
Headerでのactive切り替えを例に説明します
目次
Headerメニューをページごとでactiveを切り替える
HeaderでHome，Blog, Contactのページ切り替えを行い，そのページごとにactive属性を追加します
やり方はblockタグを実装するだけです
STEP
Headerメニュー
各ページに対応した名前のblockタグを追加します
STEP
各ページ
各ページごとにStep1で追加したblockタグを追加します
Headerメニューの追加
まずはテンプレートの継承元である親HTMLファイルにHeaderを追加します
今回はactive属性にする箇所に別々の名前のblockタグを追加しています
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">はやれてお</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<!--下記にblockタグを追加-->
<a class="nav-link {% block homehead %}{% endblock %}" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<!--下記にblockタグを追加-->
<a class="nav-link {% block bloghead %}{% endblock %}" href="{% url 'blog' %}">Blog</a>
</li>
<li class="nav-item">
<!--下記にblockタグを追加-->
<a class="nav-link {% block contacthead %}{% endblock %}" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
<form class="d-flex" action="{% url 'blog' %}" method="get">
<input name="q" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>各ページにblockタグを追加してactive属性を追加する
今回のページはHome, Blog, Contactの3つになります
<!--templates/blog/home.html-->
{% block homehead %}
active
{% endblock %}
<!--templates/blog/blog.html-->
{% block bloghead %}
active
{% endblock %}
<!--templates/blog/contact.html-->
{% block contacthead %}
active
{% endblock %}これができたらサイトにアクセスしてURLフィールドを更新しましょう
お疲れ様でした
コメント