2009-06-21 12 views
7

我有一個base.html模板,其中包含一個鏈接列表。Django:是否有更好的方式來加粗當前頁面鏈接

例子:

<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的,stuff.html,about.html和contact.html的定義。這些模板中的每一個都是從base.html模板中派生出來的,並設置它們各自的標題和內容。

我的問題是關於上述/我有一個類=「當前」的東西。

我想讓當前的頁面具有該類屬性。

我可以在每個視圖中設置一個不同的變量,例如current_page =「about」,然後在模板中與每個鏈接的每個類元素中的{% ifequal %}進行比較,但似乎像複製工作(由於額外的視圖變量)。

有沒有更好的方法?也許如果有一種方法來獲取模板被自動填充的視圖函數名稱,我不需要設置額外的變量?此外,它看起來像很多ifequals。

回答

16

這是一個優雅的方式來做到這一點,我從某處複製,我只希望我能記得在哪裏,所以我可以給他們信貸。 8-)

我分配一個id給每個我的網頁(或所有部分中像這樣頁):

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

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

+0

這是否意味着大量的重複內容的CSS關係嗎? – 2009-06-21 16:17:11

2

沒有使用Django的,但我已經經歷了同樣的問題英寸Kohana(PHP)和Rails

我做的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> 

我在做什麼的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> 
1

我只看到一對夫婦做的方式,同時避免重複ifequals:

  1. 的JavaScript。沿着東西線(jQuery的):

    var parts = window.location.pathname.split('/'); 
    var page = parts[parts.length-1]; 
    $('#sidebar1 a[href*=' + page + ']').addClass('current'); 
    
  2. 更改您的視圖包含與它們相關的標題和網址的網頁列表,並在你的模板創建{%用於%}循環,它會通過列表,並添加一個{%ifequal%}。

選項2是我最喜歡的地方。如果所有頁面的邏輯相同,並且只有模板不同,則可以考慮爲每個頁面使用FlatPages模型。如果邏輯不同,並且您需要不同的模型,則可以考慮使用某種菜單應用程序。一個無恥的插頭:我有一個menuing app of my own

1

如果添加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> 
相關問題