Menu di navigazione con i modelli Django

Cercando di utilizzare un semplice menu di navigazione con i modelli di Django, ho problemi a impostare la classe corrente su una particolare voce di menu. Ecco il mio modello di base:Menu di navigazione con i modelli Django

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
<title>{% block title %}{% endblock %}</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="/media/css/base.css" /> 
<link rel="stylesheet" type="text/css" href="/media/css/login.css" /> 
<link rel="stylesheet" href="/site_media/css/style.css" type="text/css" /> 
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]--> 
</head> 
<body class="{% block bodyclass %}{% endblock %}"> 
{% block content %}{% endblock %} 
{% block footer %}{% endblock %} 
</body> 
</html>

poi ho un nav.html:

<ul id="top"> 
    <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li> 
    <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li> 
    {% if perms.staffing.add_staffrequest %} 
    <li><a class="{% block createsr %}{% endblock %}" 
    href="/create/staffrequest/">Staff Request</a></li> 
    {% endif %} 
    </ul>

E ora nel mio home.html, io non riesco a ottenere la corrente class per visualizzare:

{% extends "base.html" %} 
{% block title %}Home Portal{% endblock %} 
{% block content %} 

<div id="content"> 
{% include "nav.html" %} 
    {% block home %}current{% endblock %} 
<div id="intro"> 
    <p>Hello, {{ user.first_name }}.</p> 
    <p>Please create a Staff Request here by filling out the form 
    below.</p> 
</div> <!-- end intro --> 
<div id="logout"> 
    <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a> 
</div> 
</div> <!-- end content --> 

{% endblock %}

La classe "corrente" non viene visualizzata nella navigazione per l'elemento appropriato, consentendomi di impostare il contesto visivo per un utente in base alla pagina in cui si trova.

fonte

2009-11-27 randombits

ho cambiato la mia risposta. Spero che sia d'aiuto. – sergzach

Non penso che sia possibile sostituire un blocco da un modello incluso. Il mio suggerimento è che è necessario ripensare la logica dei modelli. IMHO dovrebbe essere qualcosa di simile:

base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
<title>{% block title %}{% endblock %}</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="/media/css/base.css" /> 
    <link rel="stylesheet" type="text/css" href="/media/css/login.css" /> 
    <link rel="stylesheet" href="/site_media/css/style.css" type="text/css" /> 
    <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]--> 
</head> 
    <body class="{% block bodyclass %}{% endblock %}"> 
    {% block content %} 

    <div id="content"> 

     {% block navigation %} 
      <ul id="top"> 
       <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li> 
       <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li> 
       {% if perms.staffing.add_staffrequest %} 
       <li><a class="{% block createsr %}{% endblock %}" 
        href="/create/staffrequest/">Staff Request</a></li> 
       {% endif %} 
      </ul> 
     {% endblock %} 

     {% block real_content %} 
     <div id="intro"> 
      <p>Hello, {{ user.first_name }}.</p> 
      <p>Please create a Staff Request here by filling out the form below.</p> 
      </div> <!-- end intro --> 

      <div id="logout"> 
      <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a> 
      </div> 
      {% endblock %} 

    </div> <!-- end content --> 


    {% endblock %} 
    {% block footer %}{% endblock %} 
</body> 
</html>

e la tua home.html dovrebbe essere simile

{% extends "base.html" %} 
{% block title %}Home Portal{% endblock %} 

{% block home %}current{% endblock %} 


{% block real_content %} 

<div id="content"> 

<div id="intro"> 
    <p>Hello, {{ user.first_name }}.</p> 
    <p>Please create a Staff Request here by filling out the form 
    below.</p> 
</div> <!-- end intro --> 
<div id="logout"> 
    <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a> 
</div> 
</div> <!-- end content --> 

{% endblock %}

fonte

2009-11-27 02:43:48 ikkebr

Le altre persone modo in cui gestire questa situazione è di utilizzare solo il corpo. classe nel file CSS ...

nav.html

<ul id="top"> 
    <li><a class="home" href="/">Home</a></li> 
    <li><a class="myaccount" href="/profile/">My Account</a></li> 
    {% if perms.staffing.add_staffrequest %} 
    <li><a class="createsr" 
    href="/create/staffrequest/">Staff Request</a></li> 
    {% endif %} 
    </ul>

home.html

{% block bodyclass %}home{% endblock %}

file CSS

body.home li.home { font-weight: bold; color: blue; } 
body.myaccount li.myaccount { font-weight: bold; color: blue; } 
body.createsr li.createsr { font-weight: bold; color: blue; }

Si rompe secco ma a volte è più semplice di fare scherzi con qualche pazzo bloccato modelli.

fonte

2009-11-27 05:53:52

È possibile risolvere il problema di duplicazione utilizzando il tag del modello personalizzato del menu DRY. Risolve anche il problema della classe menu attiva/inattiva. Vedi la descrizione qui sotto, per favore. Il codice sorgente: http://djangosnippets.org/snippets/2722/

Descrizione del tag modello menu DRY.

Questa è la descrizione di un tag modello personalizzato per creare menu DRY. Risolve il problema della duplicazione del markup nei template del tuo sito. Il menu ha sempre un'opzione attiva e una o più opzioni inattive.

COME USARE

definire una struttura del menu in un modello genitore:.

{% defmenu "menu1" %} 

{% active %}<span class='active'>{{text}}</span>{% endactive %} 
{% inactive %}<a href='{{url}}'>{{text}}</a>{% endinactive %} 

{% opt "opt1" "/opt1/" %}Go to opt1{% endopt %} 
{% opt "opt2" "/opt2/" %}Go to opt2{% endopt %} 
{% opt "opt3" "/opt3/" %}Go to opt3{% endopt %} 

{% enddefmenu %}

Il menu è il suo nome (primo parametro del tag 'defmenu'

Primo parametro di un tag 'opt' è il nome dell'opzione di menu. 'text' all'interno di 'active'/'inactive' sarà sostituito dal testo interno di un tag 'opt' (Vai a opt ...), 'url' indide di 'attivo'/'inattivo', sarà sostituito dal secondo parametro di un tag 'opt'

Per generare menu con un'opzione selezionata nel template figlio fare:

{% menu "menu1" "opt1" %}

Qui: "menu1" è un nome di menu che è stato definito dal tag "defmenu", "opt1" è l'opzione selezionata.

Risultato del 'menù' applicazione è la prossima:

<span class='active'> Go to opt1</span> <a href='"/opt2/"'>Go to opt2</a> <a href='"/opt3/"'>Go to opt3</a>

fonte

2012-03-21 08:59:16 sergzach

Menu di navigazione con i modelli Django

risposta

Problemi correlati