Django : 현재 페이지 링크를 굵게 표시하는 더 좋은 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/1024168

문제

링크 목록이 포함 된 base.html 템플릿이 있습니다.

예시:

   <div id="sidebar1">
        <ul>
        <li><a href="/" title="">Index</a></li>
        <li><a href="/stuff/" title="" class="current">Stuff</a></li>
        <li><a href="/about/" title="">About Me</a></li>
        <li><a href="/contact/" title="">Contact Me</a></li>
    </div>

그런 다음 내 views.py 각 index.html, witch.html, about.html 및 contact.html에 대한 정의가 있습니다. 이러한 각 템플릿은 단순히 Base.html 템플릿에서 파생되어 각자의 제목과 내용을 설정합니다.

내 질문은 위의 것들에 관한 것입니다. /내가 클래스 = "current"가 있습니다.

내가있는 현재 페이지에 해당 클래스 속성을 갖고 싶습니다.

current_page = "about"와 같은 각보기에서 다른 변수를 설정 한 다음 템플릿에서 비교할 수 있습니다. {% ifequal %} 각 링크의 각 클래스 요소에서는 추가 뷰 변수로 인해 복제 작업처럼 보입니다.

더 좋은 방법이 있습니까? 템플릿이 자동으로 채워진보기 기능 이름을 얻는 방법이 있다면 추가 변수를 설정할 필요가 없습니까? 또한 그것은 많은 ifequals처럼 보입니다.

도움이 되었습니까?

해결책

이 작업을 수행하는 우아한 방법이 있습니다. 어딘가에서 복사 한 우아한 방법은 어디에서나 기억할 수 있기를 바랍니다. 그래서 나는 그들에게 신용을 줄 수있었습니다. 8-)

나는 할당한다 id 다음과 같은 내 페이지 (또는 섹션 내의 모든 페이지)에 다음과 같이합니다.

In index.html:    <body id='section-intro'>...
In faq.html:      <body id='section-faq'>...
In download.html: <body id='section-download'>...

그리고 An id 해당 링크의 경우 :

<li id='nav-intro'><a href="./">Introduction</a></li>
<li id='nav-faq'><a href="./faq.html">FAQ</a></li>
<li id='nav-download'><a href="./download.html">Download</a></li>

그리고 CSS에서 나는 다음과 같은 규칙을 설정했습니다.

#section-intro #nav-intro,
#section-faq #nav-faq,
#section-download #nav-download {
    font-weight: bold;
    /* And whatever other styles the current link should have. */
}

따라서 이것은 현재 페이지가 속한 링크의 스타일을 제어하기위한 대부분 선언적 인 방법으로 작동합니다. 여기에서 실제로 볼 수 있습니다. http://entrian.com/source-search/

일단 설정하면 매우 깨끗하고 간단한 시스템입니다.

  • 링크에서 템플릿 마크 업을 엉망으로 만들 필요가 없습니다.
  • 당신은 결국 큰 못생긴 것을 사용하지 않습니다 switch 진술 또는 if / else / else 진술
  • 섹션에 페이지 추가가 작동합니다 [TM
  • 상황을 바꾸는 것은 마크 업이 아니라 CSS를 변경하는 것을 의미합니다.

나는 django를 사용하지 않지만이 시스템은 어디서나 작동합니다. 귀하의 경우, "각자의 타이틀과 내용을 설정하는"경우 body id, 다른 Django 마크 업은 필요하지 않습니다.

이 아이디어는 다른 상황으로 쉽게 확장됩니다. "다운로드 페이지 자체를 제외한 모든 페이지의 사이드 바에서 다운로드 링크를 원합니다." 다음과 같이 CSS에서 할 수 있습니다.

#section-download #sidebar #download-link {
    display: none;
}

사이드 바 html에 조건부 템플릿 마크 업을 넣지 않아도됩니다.

다른 팁

Django를 사용하지 않았지만 동일한 문제를 처리했습니다. 코나 (PHP) 및 레일.

내가 Kohana에서하는 일 :

<li><a href="/admin/dashboard" <?= (get_class($this) == 'Dashboard_Controller') ? "class=\"active\"" : NULL ?>>Dashboard</a></li>
<li><a href="/admin/campaigns" <?= (get_class($this) == 'Campaigns_Controller') ? "class=\"active\"" : NULL ?>>Campaigns</a></li>
<li><a href="/admin/lists" <?= (get_class($this) == 'Lists_Controller') ? "class=\"active\"" : NULL ?>>Lists</a></li>

내가 레일에서하는 일 :

<li><a href="/main" <%= 'class="active"' if (controller.controller_name == 'main') %>>Overview</a></li>
<li><a href="/notifications" <%= 'class="active"' if (controller.controller_name == 'notifications') %>>Notifications</a></li>
<li><a href="/reports" <%= 'class="active"' if (controller.controller_name == 'reports') %>>Reports</a></li>

반복적 인 ifequals를 피하면서 몇 가지 방법 만 볼 수 있습니다.

  1. 자바 스크립트. (jQuery)의 선을 따라 무언가 :

    var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('#sidebar1 a[href*=' + page + ']').addClass('current');

  2. 관련 제목과 URL이 포함 된 페이지 목록을 포함하도록보기를 변경하고 템플릿에서 { % for %} 루프를 작성하여 해당 목록을 거쳐 단일 { % ifequal %}를 추가하십시오.

옵션 2는 내가 서있는 곳에서 가장 좋아하는 것입니다. 모든 페이지의 논리가 동일하고 템플릿 만 다른 경우 각 페이지에 FlatPages 모델을 사용하는 것을 고려할 수 있습니다. 논리가 다르고 다른 모델이 필요한 경우 어떤 종류의 Menuing 앱을 사용하는 것을 고려할 수 있습니다. 뻔뻔한 플러그 : 나는 a 내 자신의 앱

추가하면 request 컨텍스트 프로세서, 그것은 매우 간단합니다.

settings.py:

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.core.context_processors.request',
    'django.contrib.auth.context_processors.auth'  # admin app wants this too
)

이제 당신은에 액세스 할 수 있습니다 HttpRequest, 요청 경로가 포함되어 있습니다. 현재 페이지를 강조하는 것은 경로가 링크 대상과 일치하는지 확인하는 간단한 문제입니다. 즉, 이미 있습니다.

<li><a class="{% if request.path == '/' %}current{% endif %}" href="/">Index</a></li>
<li><a class="{% if request.path == '/stuff/' %}current{% endif %}" href="/stuff/">Stuff</a></li>
<li><a class="{% if request.path == '/about/' %}current{% endif %}" href="/about/">About Me</a></li>
<li><a class="{% if request.path == '/contact/' %}current{% endif %}" href="/contact/">Contact Me</a></li>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top