изменение значков навигационной панели на активные с помощью django - Javascript

Question

Я создал панель навигации с помощью bootstrap4 и хочу, чтобы значок текущей страницы стал активным. В настоящее время я использую

<li class="nav-item"><a href="/" id="A"
                      {% if request.path == "/" %}
                        class="nav-link active" 
                      {% else %}
                        class="nav-link"
                      {% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
                     {% if request.path == "/blog/" %}
                     class="nav-link active" {% else %}
                     class="nav-link"
                     {% endif %}>Blog</a></li> 

то, что мне нужно, это более простой способ с использованием имен URL-адресов, которые могут активировать такой сценарий:

{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>

{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}

Может быть более простой способ ? Предложите выделить значок активной страницы на панели навигации для переключения стилей. Спасибо

Answer 1

Лучший способ сделать это без нарушения принципов DRY и жесткого кодирования ваших URL-адресов - использовать reverse в шаблонах.

Пример:

<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}

<!-- ..... Body HTML ..... -->

<li class="nav-item">
    <a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
        Home
    </a>
</li>
<li class="nav-item">
    <a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
        Blog
    </a>
</li>