사이트 탐색

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

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

settings.py의 TEMPLATES에 request 컨텍스트 프로세서가 나열되어 있으므로, 모든 템플릿에서 응답 중인 요청인 request를 읽을 수 있습니다. 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 %}

챌린지

중급

base.html에서 탐색 링크를 Home, Menu, Drinks, Hours, About 순서로 만들고, 각 주소는 {% url %}로 구성하세요. 각 페이지에서는 해당 페이지로 연결되는 링크에만 class="active"를 지정하세요.

style.css에서 nav a.active에 굵은 글씨와 같은 스타일을 지정한 다음, Run을 누르고 탐색 링크를 차례로 클릭하세요.

직접 해보기

{% 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>