2009-06-21 27 views
7

Tôi có mẫu base.html chứa danh sách liên kết.Django: Có cách nào tốt hơn để in đậm liên kết trang hiện tại

Ví dụ:

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

Sau đó, tôi có trong views.py tôi một định nghĩa cho mỗi index.html, stuff.html, about.html và contact.html. Mỗi mẫu trong số đó chỉ lấy từ mẫu base.html và đặt tiêu đề và nội dung tương ứng của riêng chúng.

Câu hỏi của tôi là về nội dung trên/thứ tôi có class = "current".

Tôi muốn làm cho trang hiện tại mà tôi đang có thuộc tính lớp đó.

Tôi có thể đặt biến khác trong mỗi chế độ xem như current_page = "about" và sau đó thực hiện so sánh trong mẫu với {% ifequal %} trong mỗi phần tử lớp của mỗi liên kết, nhưng điều đó có vẻ giống như công việc nhân bản (vì biến số lượt xem bổ sung).

Có cách nào tốt hơn không? Có lẽ nếu có một cách để có được tên chức năng xem mà các mẫu đã được điền từ tự động tôi sẽ không cần phải thiết lập các biến thêm? Ngoài ra nó có vẻ như rất nhiều ifequals.

Trả lời

16

Đây là một cách thanh lịch để làm điều này, mà tôi đã sao chép từ đâu đó và tôi chỉ ước mình có thể nhớ ở đâu, vì vậy tôi có thể cho họ tín dụng. 8-)

tôi chỉ định một id vào từng trang của tôi (hoặc tất cả các trang trong một phần) như thế này:

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

Và sau đó một id cho các liên kết tương ứng:

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

Và trong CSS tôi đặt một quy tắc như sau:

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

Vì vậy, điều này hoạt động theo cách chủ yếu để kiểm soát kiểu của liên kết mà trang hiện tại thuộc về. Bạn có thể thấy nó hoạt động ở đây: http://entrian.com/source-search/

Hệ thống rất đơn giản và dễ dàng khi bạn đã thiết lập, vì:

  • bạn không cần phải mess về với mẫu đánh dấu trong các liên kết của bạn
  • bạn không kết thúc bằng lớn xấu xí switch báo cáo hoặc báo cáo if/else/else
  • Thêm trang đến một phần Chỉ việc [TM]
  • Thay đổi cách mọi thứ trông chỉ bao giờ có nghĩa là thay đổi CSS, chứ không phải đánh dấu.

Tôi không sử dụng Django, nhưng hệ thống này hoạt động ở mọi nơi. Trong trường hợp của bạn, nơi bạn "đặt tiêu đề và nội dung tương ứng của riêng mình", bạn cũng cần phải đặt số body id và không cần đánh dấu Django khác.

Ý tưởng này cũng mở rộng dễ dàng với các tình huống khác, ví dụ: "Tôi muốn một liên kết tải xuống trong thanh bên trên mỗi trang ngoại trừ các trang tải xuống."Bạn có thể làm điều đó trong CSS như thế này:

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

thay vì phải đặt đánh dấu mẫu có điều kiện trong HTML sidebar

+0

Không này có nghĩa là rất nhiều nội dung trùng lặp trong CSS mặc dù? –

+0

... Ý tôi là kiểu cho mỗi id liên kết. –

+0

Đó là một dòng CSS cho mỗi trang/phần. Bản thân kiểu chỉ xuất hiện một lần, với một danh sách các cặp phần/nav được phân tách bằng dấu phẩy trước nó. – RichieHindle

2

đã không được sử dụng Django, nhưng tôi đã giải quyết vấn đề tương tự trong. Kohana (PHP) và Rails

Những gì tôi làm trong 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> 

Những gì tôi làm trong Rails:

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

tôi nhìn thấy chỉ là một vài cách để làm việc đó, trong khi tránh ifequals lặp đi lặp lại:

  1. Javascript. Một cái gì đó dọc theo dòng (jQuery):

    var parts = window.location.pathname.split('/'); 
    var page = parts[parts.length-1]; 
    $('#sidebar1 a[href*=' + page + ']').addClass('current'); 
    
  2. Thay đổi quan điểm của bạn có chứa một danh sách các trang có tiêu đề và URL có liên quan của họ và tạo ra một {% cho%} loop trong mẫu của bạn, mà sẽ đi qua đó và thêm một {% ifequal%} duy nhất.

Tùy chọn 2 là yêu thích từ nơi tôi đứng. Nếu logic cho tất cả các trang của bạn giống nhau và chỉ có các mẫu khác nhau, bạn có thể xem xét sử dụng mô hình FlatPages cho mỗi trang của mình. Nếu logic là khác nhau, và bạn cần các mô hình khác nhau, bạn có thể xem xét sử dụng một ứng dụng menu của một số loại. Một plug biết xấu hổ: Tôi có một menuing app of my own

1

Nếu bạn thêm bộ xử lý request bối cảnh, nó khá đơn giản:

settings.py: 

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

Bây giờ bạn có quyền truy cập vào các HttpRequest, trong đó có con đường yêu cầu. Nêu bật những trang hiện là một vấn đề đơn giản của việc kiểm tra nếu con đường phù hợp với địa điểm của liên kết, nghĩa là, bạn đã có:

<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> 
Các vấn đề liên quan