使用Django模板的導航菜單

嘗試使用django模板處理繁瑣的導航菜單，我在設置特定菜單項上的當前類時遇到了問題。這是我的基本模板：使用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>

然後，我有一個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>

我home.html的

而現在，我似乎無法獲取類當前顯示：

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

類的'當前'沒有顯示在適當的元素的導航，讓我爲用戶設置視覺上下文取決於他們在哪個頁面上。

來源

2009-11-27 randombits

我已經改變了我的答案。希望能幫助到你。 – sergzach 2012-03-22 19:06:57

我不認爲你可以從包含的模板中替換塊。我的建議是，你需要重新思考你的模板的邏輯。恕我直言，它應該是這樣的：

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>

和你home.html的應該像

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

來源

2009-11-27 02:43:48 ikkebr

其他方式處理的人，這是隻使用身體。類在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 %}

你的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; }

它打破了幹，但有時它比搞亂一些瘋狂的封鎖模板簡單。

來源

2009-11-27 05:53:52

您可以使用DRY菜單自定義模板標籤來解決重複問題。它也解決了主動/非主動菜單類的問題。請參閱下面的描述。源代碼：http://djangosnippets.org/snippets/2722/

DRY菜單模板標籤的描述。

這是對創建乾燥菜單的自定義模板標籤的描述。它解決了網站模板中標記重複的問題。菜單始終有一個活動選項和一個或多個非活動選項。

如何使用

定義你的菜單的結構在父模板：

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

菜單上有它的名字（標籤「defmenu」的第一個參數

第一個參數'opt'是菜單選項的名稱'text''active'/'inactive'中的內容將被替換爲標記'opt'的內部文本（轉到選擇...），的「URL」球鐵QT500「有效」 /「無效」將由標籤「選擇」

爲了生成具有在子模板中的一個選擇的選項的菜單的第二個參數被取代做：

{% menu "menu1" "opt1" %}

這裏：「menu1」是由'defmenu'標籤定義的菜單名稱，選擇「opt1」選項。在應用「菜單」的

結果是下一個：

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

來源

2012-03-21 08:59:16 sergzach

使用Django模板的導航菜單

回答

相關問題