Python 使用Django模板的导航菜单
尝试使用django模板处理一个简单的导航菜单时,我在设置特定菜单项上的当前类时遇到问题。以下是我的基本模板:Python 使用Django模板的导航菜单,python,django,Python,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> &
<!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>
{% 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 %}
{%block title%}{%endblock%}
{%block content%}{%endblock%}
{%block-footer%}{%endblock%}
然后我有一个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>
{%if perms.staffing.add_staffrequest%}
{%endif%}
现在在my 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 %}
{%extends“base.html”%}
{%block title%}主门户{%endblock%}
{%block content%}
{%include“nav.html”%}
{%block home%}当前{%endblock%}
你好,{{user.first_name}}
请通过填写表格在此处创建员工申请
下面
{%endblock%}
“current”类没有显示在相应元素的导航中,因此我可以根据用户所在的页面为其设置可视上下文。我认为您无法替换包含模板中的块。我的建议是,您需要重新考虑模板的逻辑。我想应该是这样的: 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>
{%block title%}{%endblock%}
{%block content%}
{%block-navigation%}
{%if perms.staffing.add_staffrequest%}
{%endif%}
{%endblock%}
{%block real_content%}
你好,{{user.first_name}}
请填写下表,在此处创建员工申请
{%endblock%}
{%endblock%}
{%block-footer%}{%endblock%}
你的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 %}
{%extends“base.html”%}
{%block title%}主门户{%endblock%}
{%block home%}当前{%endblock%}
{%block real_content%}
你好,{{user.first_name}}
请通过填写表格在此处创建员工申请
下面
{%endblock%}
另一种处理方法是只使用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>
{% 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; }
它会干涸,但有时比处理一些疯狂的阻塞模板更简单。您可以使用“干涸”菜单自定义模板标记解决复制问题。它还解决了主动/非主动菜单类的问题。请看下面的描述。源代码: 干式菜单模板标签的说明 这是用于创建干式菜单的自定义模板标记的说明。它解决了站点模板中标记重复的问题。菜单始终有一个活动选项和一个或多个非活动选项 如何使用 在父模板中定义菜单的结构:
<!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>
{% 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 %}
此处:“menu1”是由“defmenu”标记定义的菜单名称,“opt1”是选中选项
应用“菜单”的结果是下一个:
<span class='active'> Go to opt1</span> <a href='"/opt2/"'>Go to opt2</a> <a href='"/opt3/"'>Go to opt3</a>
转到opt1
我已更改了答案。希望能有帮助。