使用 Django 模板的导航菜单答案

【问题标题】：Navigation menu using Django templates使用 Django 模板的导航菜单
【发布时间】：2009-11-27 02:11:22
【问题描述】：

尝试使用 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 %}

“当前”类没有显示在导航中的相应元素，让我可以根据用户所在的页面为用户设置视觉上下文。

【问题讨论】：

我已经改变了我的答案。希望对您有所帮助。

标签： python django

【解决方案1】：

我认为您不能从包含的模板中替换块。我的建议是您需要重新考虑模板的逻辑。恕我直言，它应该是这样的：

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

【讨论】：

【解决方案2】：

人们处理这个问题的另一种方法是在 CSS 文件中使用 body.class...

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，但有时它比处理一些疯狂的被阻止模板更简单。

【讨论】：

【解决方案3】：

您可以使用 DRY 菜单自定义模板标签解决重复问题。它也解决了活动/非活动菜单类的问题。请看下面的描述。源码：http://djangosnippets.org/snippets/2722/

DRY 菜单模板标签说明。

这是用于创建 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'的第一个参数是菜单选项的名称。 'active'/'inactive' 内部的 'text' 将替换为标签 'opt' 的内部文本（转到 opt...）、'url' 'active'/'inactive' 的 indide 将被标签 'opt' 的第二个参数替换

要在子模板中生成带有一个选定选项的菜单，请执行以下操作：

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

【讨论】：