Django: Gibt es eine bessere Art und Weise zu fett dem aktuellen Seite Link

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

Frage

Ich habe eine base.html Vorlage, die eine Liste von Links enthält.

Beispiel: 

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

Dann habe ich in meiner views.py eine Definition für jede der index.html, stuff.html, about.html und contact.html. Jede dieser Vorlagen ableiten einfach aus einer base.html Vorlage und ihren eigenen jeweiligen Titel und Inhalt.

Meine Frage ist über die oben / stuff I eine Klasse = „Strom“.

Ich möchte die aktuelle Seite machen, die ich auf habe ich diese Klasse Attribut.

Ich könnte eine andere Variable in jeder Ansicht wie current_page gesetzt = „über“ und dann ein in der Vorlage mit {% ifequal %} in jeder Klasse Elemente jeder Verbindung zu vergleichen, aber das scheint wie Doppelarbeit (wegen der zusätzlichen Ansicht variabel) .

Gibt es einen besseren Weg? Vielleicht, wenn es einen Weg gibt, den View-Funktion Namen zu erhalten, die die Vorlage automatisch gefüllt würde ich nicht die zusätzliche Variable setzen müssen? Auch scheint es wie eine Menge ifequals.

War es hilfreich?

Lösung

Hier ist eine elegante Art und Weise, dies zu tun, die ich von irgendwo kopiert und ich wünschte nur, ich könnte daran erinnern, wo, so kann ich ihnen den Kredit geben. 8 -)

I weisen Sie einen id jedem meiner Seiten (oder alle Seiten in einem Abschnitt) wie folgt aus: 

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

Und dann ein id für die entsprechenden Links: 

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

Und die in der CSS setze ich eine Regel wie folgt aus: 

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

So funktioniert dies in einer meist deklarative Weise den Stil der Verbindung zu steuern, dass die aktuelle Seite gehört in Sie können es in Aktion sehen hier. http://entrian.com/source-search/

Es ist ein sehr sauberes und einfaches System, sobald Sie es eingerichtet haben, denn:

  • Sie brauchen nicht zu verwirren über mit Vorlagen-Markup in Ihren Links
  • Sie haben keine großen hässlichen switch Aussagen oder if / else / else Aussagen am Ende mit
  • Hinzufügen von Seiten zu einem Abschnitt nur Works [TM]
  • Ändern der Art und Weise die Dinge sehen immer nur bedeutet, die CSS zu ändern, nicht das Markup.

Ich verwende Django nicht, aber dieses System funktioniert überall. In Ihrem Fall, in dem Sie „ihre eigenen jeweiligen Titel und Inhalte einstellen“ müssen Sie auch die body id setzen, und es gibt keine andere Django Markup erforderlich.

Diese Idee erstreckt sich leicht auf andere Situationen als auch, zum Beispiel. „Ich mag einen Download-Link in der Seitenleiste auf jeder Seite außer den Download-Seiten selbst.“ Sie können, dass wie dies in CSS tun: 

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

anstatt bedingte Vorlagen-Markup in der Sidebar HTML setzen.

Andere Tipps

Haben Django nicht, aber ich habe mit dem gleichen Problem gehandelt Kohana (PHP) und Rails .

Was ich in 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>

Was ich tue, in Rails: 

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

Ich sehe nur ein paar Möglichkeiten, es zu tun, während wiederholt ifequals vermeiden:

  1. Javascript. Etwas nach dem Vorbild von (jQuery): 

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

  2. Ändern Sie Ihre Ansichten, die eine Liste von Seiten mit den zugehörigen Titel und URLs enthalten und eine {% für%} Schleife in Ihrer Vorlage erstellen, die sich durch diese Liste gehen, und fügen Sie eine einzelne {% IfEqual%} .

Option 2 ist der Favorit von wo ich stehe. Wenn die Logik für alle Seiten gleich ist, und nur die Vorlagen unterscheiden, könnten Sie das Modell für Flatpages jeder Ihrer Seiten verwenden. Wenn die Logik ist anders, und Sie verschiedene Modelle benötigen, könnten Sie eine menuing App von einer Art verwendet wird. Eine schamlose Werbung: Ich habe ein menuing app meiner eigenen

Wenn Sie den request Kontext Prozessor hinzufügen, es ist ziemlich einfach: 

settings.py:

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

Jetzt haben Sie Zugriff auf die HttpRequest, die den Anforderungspfad enthält. die aktuelle Seite Hervorhebungen ist eine einfache Sache, zu überprüfen, ob der Pfad des Links zum Reiseziel, das heißt, Sie sind schon da: 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top