python 使用 Django 模板的导航菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1806472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Navigation menu using Django templates
提问by randombits
Trying to work with a trivial navigation menu using django templates, I'm having trouble setting the current class on a particular menu item. Here's my base template:
尝试使用 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>
Then I have a nav.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>
And now in my home.html, I can't seem to get the class current to display:
现在在我的 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 %}
The class 'current' isn't showing up in navigation for the appropriate element, letting me set visual context for a user depending what page they're on.
'current' 类没有出现在相应元素的导航中，让我可以根据用户所在的页面为用户设置视觉上下文。
回答by ikkebr
I don't think you can replace a block from an included template. My suggestion is that you need to rethink the logic of your templates. IMHO it should be something like this:
我认为您不能从包含的模板中替换块。我的建议是您需要重新考虑模板的逻辑。恕我直言，它应该是这样的：
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>
and your home.html should look like
你的 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 %}
回答by T. Stone
The other way people handle this is to just use the body.class in the CSS file...
人们处理这个问题的另一种方式是在 CSS 文件中使用 body.class ......
nav.html
导航.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
主页.html
{% block bodyclass %}home{% endblock %}
your css file
你的 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; }
It breaks DRY but sometimes it's simpler than messing with some crazy blocked templates.
它打破了 DRY 但有时它比弄乱一些疯狂的被阻止的模板更简单。
回答by sergzach
You can solve the duplication problem using DRY menu custom template tag. It solves the problem of active/inactive menu class too. See the description below, please. The source code: http://djangosnippets.org/snippets/2722/
您可以使用 DRY 菜单自定义模板标签解决重复问题。它也解决了活动/非活动菜单类的问题。请看下面的描述。源代码：http: //djangosnippets.org/snippets/2722/
Description of DRY menu template tag.
DRY 菜单模板标签的描述。
This is the description of a custom template tag to create DRY menu. It solves the problem of markup duplication in templates of your site. The menu always has one active option and one or several inactive options.
这是用于创建 DRY 菜单的自定义模板标记的描述。它解决了站点模板中标记重复的问题。菜单总是有一个活动选项和一个或几个非活动选项。
HOW TO USE
如何使用
Define a structure of your menu in a parent template:
在父模板中定义菜单结构：
{% 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 %}
The menu has it's name (first parameter of the tag 'defmenu'.
菜单有它的名字（标签“defmenu”的第一个参数。
First parameter of a tag 'opt' is menu option's name. 'text' inside of 'active'/'inactive' will be substituted by inner text of a tag 'opt' (Go to opt...), 'url' indide of 'active'/'inactive' will be substituted by second parameter of a tag 'opt'
标签“opt”的第一个参数是菜单选项的名称。“文本的”内部“活性” /“无效”将由标签“选择”（转到选择...），的内部文本“取代的url”的球铁QT500“有效” /“无效”将由第二被取代标签“opt”的参数
To generate menu with one selected option in child template do:
要在子模板中使用一个选定选项生成菜单，请执行以下操作：
{% menu "menu1" "opt1" %}
Here: "menu1" is a name of menu that was defined by 'defmenu' tag, "opt1" is selected option.
这里：“menu1”是由“defmenu”标签定义的菜单名称，“opt1”是选择的选项。
Result of the applying 'menu' is the next:
应用“菜单”的结果是下一个：
<span class='active'> Go to opt1</span> <a href='"/opt2/"'>Go to opt2</a> <a href='"/opt3/"'>Go to opt3</a>
