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持っている：私のhome.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>

そして今を、私はディスプレイにクラス電流を得るように見えることはできません。

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

適切な要素のナビゲーションに 'current'というクラスが表示されないため、ユーザーの視覚的なコンテキストを自分のページに応じて設定できます。

出典

2009-11-27 randombits

私は私の答えを変更しました。それが役に立てば幸い。 – sergzach

私はあなたが含まれているテンプレートからブロックを置き換えることはできませんと思います。私の提案は、テンプレートのロジックを再考する必要があるということです。私見では、このようなものでなければなりません：

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

それはDRY壊れ時にはそれはいくつかのクレイジーなテンプレートをブロックいじりよりも簡単です。

出典

2009-11-27 05:53:52

DRYメニューのカスタムテンプレートタグを使用して、複製の問題を解決できます。アクティブ/非アクティブメニュークラスの問題も解決します。以下の説明を参照してください。ソースコード：http://djangosnippets.org/snippets/2722/

DRYメニューテンプレートタグの説明。

これは、DRYメニューを作成するためのカスタムテンプレートタグの説明です。それはあなたのサイトのテンプレートでマークアップの重複の問題を解決します。メニューには、常に1つのアクティブなオプションと1つまたは複数の非アクティブなオプションがあります。

親テンプレートであなたのメニューの構造を定義して使用するためにどのように

：

{% 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」indideは、子テンプレート内の1つの選択オプションを使用してメニューを生成するには、タグ「オプト」の第2パラメータ

により置換されています実行します。

{% 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テンプレートを使用したナビゲーションメニュー

答えて

関連する問題