サイトのナビゲーション

CoddyのDjangoジャーニー「Djangoの基礎」セクションの一部。レッスン 23/23。

サイトには共有レイアウトを使うページが5つあります（Aboutにもテンプレートができました）が、base.htmlのナビゲーションに載っているのは3つだけで、現在のページも示されません。

すべてのテンプレートからrequest、つまりそのページへのリクエストを読み取れます。Djangoは、settings.pyのTEMPLATESに、すべてのコンテキストに名前を追加する関数であるrequestコンテキストプロセッサが指定されているため、すべてのテンプレートのコンテキストにこれを追加します。request.resolver_matchは、一致したルートを表します。url_nameは名前空間を含まない名前（"contact"）で、view_nameは完全な名前（"menu:contact"）です。テンプレートでは、1つのページだけに行を表示できます。

{% if request.resolver_match.url_name == "contact" %}
    <p>We reply within a day.</p>
{% endif %}

タグを<a>タグの中に置いて、1つのページだけに属性を追加することもできます。

<a href="/contact/"{% if request.resolver_match.url_name == "contact" %} class="active"{% endif %}>Contact</a>

チャレンジ

中級

ナビゲーションに現在のページがわかるようにしましょう。

base.htmlで、ナビゲーションリンクを「ホーム」、「メニュー」、「ドリンク」、「営業時間」、「概要」の順に作り、それぞれのリンク先を{% url %}で指定します。各ページでは、そのページへのリンクだけにclass="active"を設定します。
style.cssで、nav a.activeを太字にします。

ナビゲーションリンクをそれぞれクリックしてみましょう。現在表示しているページへのリンクだけが太字になります。

自分で試してみよう

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'menu/style.css' %}">
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>