사이트 탐색

Coddy Django 여정의 Django 기초 섹션에 포함된 레슨. 23개 중 23번째.

이제 사이트에는 공통 레이아웃을 사용하는 페이지가 다섯 개 있습니다(About에도 템플릿이 생겼습니다). 하지만 base.html의 탐색 메뉴에는 페이지가 세 개만 나열되어 있고, 현재 페이지가 어디인지도 표시되지 않습니다.

모든 템플릿은 해당 페이지의 요청인 request를 읽을 수 있습니다. settings.py의 TEMPLATES에 모든 컨텍스트에 이름을 추가하는 함수인 request 컨텍스트 프로세서가 지정되어 있으므로 Django가 이를 모든 템플릿의 컨텍스트에 추가합니다. request.resolver_match는 일치한 경로를 설명합니다. url_name은 네임스페이스를 제외한 경로의 이름("contact")이고, view_name은 전체 이름("menu:contact")입니다. 레이아웃에는 한 페이지에만 표시되는 문장을 넣을 수 있습니다.

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

한 페이지에만 속성을 추가하려면 태그를 <a> 태그 안에 넣을 수도 있습니다.

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

챌린지

중급

탐색 메뉴에 현재 위치를 표시하세요.

base.html에서 Home, Menu, Drinks, Hours, About 탐색 링크를 이 순서대로 만들고, 각 링크의 주소는 {% 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>