如何渲染一个活动项目的菜单与干燥?

时间：2022-11-19 23:35:42

I would like to render a constructions like:

我想呈现这样一个结构:

<a href='/home'>Home</a>
<span class='active'>Community</span>
<a href='/about'>About</a>

Where Community is selected menu item. I have menu with same options for several templates but I would not like to create combinations for each template:

选择社区的菜单项。我有几个模板的相同选项菜单，但我不想为每个模板创建组合:

<!-- for Home template-->
        <span class='active'>Home</span>
        <a href='/comminuty'>Community</a>
        <a href='/about'>About</a>
    ...
<!-- for Community template-->
        <a href='/home'>Home</a>
        <span class='active'>Community</span>
        <a href='/about'>About</a>
    ...
<!-- for About template-->
        <a href='/home'>Home</a>
        <a href='/community'>Community</a>
        <span class='active'>About</span>

We have permanent list of menu items, so, it can be more effective way - to create only one generalized structure of menu then render menu with required option for template.

我们有菜单项的永久列表，因此，它可以是更有效的方法——只创建一个通用的菜单结构，然后呈现带有模板所需选项的菜单。

For example it could be a tag that allows to do that.

例如，它可以是一个允许这样做的标签。

9 个解决方案

#1

46  

Figured out another way to do it, elegant enough thanks to this answer : https://*.com/a/17614086/34871

找到了另一种方法，非常优雅，多亏了这个答案:https://*.com/a/17614086/34871

Given an url pattern such as:

给定一个url模式，例如:

url(r'^some-url', "myapp.myview", name='my_view_name'),

my_view_name is available to the template through request ( remember you need to use a RequestContext - which is implicit when using render_to_response )

my_view_name可以通过请求(记住您需要使用RequestContext——在使用render_to_response时是隐式的)对模板可用。

Then menu items may look like :

那么菜单项可能看起来是:

<li class="{% if request.resolver_match.url_name == "my_view_name" %}active{% endif %}"><a href="{% url "my_view_name" %}">Shortcut1</a></li>
<li class="{% if request.resolver_match.url_name == "my_view_name2" %}active{% endif %}"><a href="{% url "my_view_name2" %}">Shortcut2</a></li>

etc.

等。

This way, the url can change and it still works if url parameters vary, and you don't need to keep a list of menu items elsewhere.

通过这种方式，url可以更改，如果url参数不同，url仍然可以工作，而且不需要在其他地方保留菜单项的列表。

#2

43  

Using template tag

You can simply use the following template tag:

您可以使用以下模板标签:

# path/to/templatetags/mytags.py
import re

from django import template
from django.core.urlresolvers import reverse, NoReverseMatch

register = template.Library()


@register.simple_tag(takes_context=True)
def active(context, pattern_or_urlname):
    try:
        pattern = '^' + reverse(pattern_or_urlname)
    except NoReverseMatch:
        pattern = pattern_or_urlname
    path = context['request'].path
    if re.search(pattern, path):
        return 'active'
    return ''

So, in you your template:

所以，在你的模板中

{% load mytags %}
<nav><ul>
  <li class="nav-home {% active 'url-name' %}"><a href="#">Home</a></li>
  <li class="nav-blog {% active '^/regex/' %}"><a href="#">Blog</a></li>
</ul></nav>

Using only HTML & CSS

There is another approach, using only HTML & CSS, that you can use in any framework or static sites.

还有一种方法，只使用HTML和CSS，可以在任何框架或静态站点中使用。

Considering you have a navigation menu like this one:

考虑到你有一个像这样的导航菜单:

<nav><ul>
  <li class="nav-home"><a href="#">Home</a></li>
  <li class="nav-blog"><a href="#">Blog</a></li>
  <li class="nav-contact"><a href="#">Contact</a></li>
</ul></nav>

Create some base templates, one for each session of your site, as for example:

创建一些基本模板，针对站点的每个会话创建一个模板，例如:

home.html
base_blog.html
base_contact.html

All these templates extending base.html with a block "section", as for example:

所有这些模板都扩展了基。带有“节”块的html，例如:

...
<body id="{% block section %}section-generic{% endblock %}">
...

Then, taking the base_blog.html as example, you must have the following:

然后,base_blog。以html为例，您必须拥有以下内容:

{% extends "base.html" %}
{% block section %}section-blog{% endblock %}

Now it is easy to define the actived menu item using CSS only:

现在，仅使用CSS就可以很容易地定义活动菜单项:

#section-home .nav-home,
  #section-blog .nav-blog,
  #section-contact .nav-contact { background-color: #ccc; }

#3

22  

I found easy and elegant DRY solution.

我找到了简单而优雅的干法。

It's the snippet: http://djangosnippets.org/snippets/2421/

的片段:http://djangosnippets.org/snippets/2421/

**Placed in templates/includes/tabs.html**

<ul class="tab-menu">
    <li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
    <li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
    <li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>
</ul>

**Placed in your page template**

{% include "includes/tabs.html" with active_tab='tab1' %}

#4

4  

You could make a context variable links with the name, URL and whether it's an active item:

您可以使用名称、URL以及它是否是活动项来创建上下文变量链接:

{% for name, url, active in links %}
    {% if active %}
<span class='active'>{{ name }}</span>
    {% else %}
<a href='{{ url }}'>{{ name }}</a>
    {% endif %}
{% endfor %}

If this menu is present on all pages, you could use a context processor:

如果所有页面都有此菜单，您可以使用上下文处理器:

def menu_links(request):
    links = []
    # write code here to construct links
    return { 'links': links }

Then, in your settings file, add that function to TEMPLATE_CONTEXT_PROCESSORS as follows: path.to.where.that.function.is.located.menu_links. This means the function menu_links will be called for every template and that means the variable links is available in each template.

然后，在设置文件中，将该函数添加到template_context_processor，如下所示:path.to.where.that.function.is.locat .menu_links。这意味着将为每个模板调用函数menu_links，这意味着每个模板中都可以使用变量链接。

#5

1  

Assuming the nav item is a link with the same URL as the current page, you could just use JavaScript. Here's an annotated method that I use to add a class="active" to a li in a navigation menu with class="nav":

假设nav项目是与当前页面具有相同URL的链接，您可以使用JavaScript。这里有一个带注释的方法，我用class="active"在class="nav"的导航菜单中添加一个class="active"到li:

// Get the path name (the part directly after the URL) and append a trailing slash
// For example, 'http://www.example.com/subpage1/sub-subpage/' 
//     would become '/subpage1/'
var pathName = '/' + window.location.pathname.split('/')[1];
if ( pathName != '/' ) { pathName = pathName + '/'; }

// Form the rest of the URL, so that we now have 'http://www.example.com/subpage1/'
// This returns a top-level nav item
var url = window.location.protocol + '//' +
          window.location.host +
          pathName;
console.log(url);

// Add an 'active' class to the navigation list item that contains this url
var $links = document.querySelectorAll('.nav a');
$link = Array.prototype.filter.call( $links, function(el) {
    return el.href === url;
})[0];
$link.parentNode.className += ' active';

This method means you can simply pop it into your base template once and forget about it. No repetition, and no manual specification of the page URL in each template.

这个方法意味着您可以简单地将它放入基本模板中一次，然后忘记它。没有重复，也没有每个模板中的页面URL的手工规范。

One caveat: this obviously only works if the url found matches a navigation link href. It would additionally be possible to specify a couple of special use cases in the JS, or target a different parent element as needed.

需要注意的是:这显然只适用于找到的url与导航链接href匹配的情况。此外，还可以在JS中指定两个特殊用例，或者根据需要针对不同的父元素。

Here's a runnable example (keep in mind, snippets run on StackSnippets):

这里有一个可运行的示例(请记住，在StackSnippets中运行代码片段):

// Get the path name (the part directly after the URL) and append a trailing slash
// For example, 'http://www.example.com/subpage1/sub-subpage/' 
//     would become '/subpage1/'
var pathName = '/' + window.location.pathname.split('/')[1];
if ( pathName != '/' ) { pathName = pathName + '/'; }

// Form the rest of the URL, so that we now have 'http://www.example.com/subpage1/'
// This returns a top-level nav item
var url = window.location.protocol + '//' +
          window.location.host +
          pathName;
console.log(url);

// Add an 'active' class to the navigation list item that contains this url
var $links = document.querySelectorAll('.nav a');
$link = Array.prototype.filter.call( $links, function(el) {
    return el.href === url;
})[0];
$link.parentNode.className += ' active';
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: black;
  text-decoration: none;
}
.active a {
  color: red;
}
<ul class="nav">
  <li>
    <a href="http://example.com/">Example Link</a>
  </li>
  <li>
    <a href="http://stacksnippets.net/js/">This Snippet</a>
  </li>
  <li>
    <a href="https://google.com/">Google</a>
  </li>
  <li>
    <a href="http://*.com/">*</a>
  </li>
</ul>

#6

0  

Based on @vincent's answer, there is an easier way to do this without messing up with django url patterns.

根据@vincent的回答，有一种更简单的方法可以在不影响django url模式的情况下做到这一点。

The current request path can be checked against the rendered menu item path, and if they match then this is the active item.

可以根据呈现的菜单项路径检查当前请求路径，如果它们匹配，那么这就是活动项。

In the following example I use django-mptt to render the menu but one can replace node.path with each menu item path.

在下面的示例中，我使用django-mptt来呈现菜单，但是可以替换node。路径与每个菜单项路径。

<li class="{% if node.path == request.path %}active{% endif %}">
    <a href="node.path">node.title</a>
</li>

#7

0  

I ran into this challenge today with how to dynamically activate a "category" in a sidebar. The categories have slugs which are from the DB.

我今天遇到了这个挑战，如何在侧边栏中动态激活一个“类别”。这些类别有来自DB的蛞蝓。

I solved it by checking to see category slug was in the current path. The slugs are unique (standard practice) so I think this should work without any conflicts.

我通过检查类别段是否在当前路径中来解决它。鼻涕虫是唯一的(标准的做法)，所以我认为这应该不会有任何冲突。

{% if category.slug in request.path %}active{% endif %}

Full example code of the loop to get the categories and activate the current one.

循环的完整示例代码以获取类别并激活当前的类别。

{% for category in categories %}
<a class="list-group-item {% if category.slug in request.path %}active{% endif %}" href="{% url 'help:category_index' category.slug %}">
  <span class="badge">{{ category.article_set.count }}</span>
  {{ category.title }}
</a>
{% endfor %}

#8

0  

I am using an easier and pure CSS solution. It has its limitations, of which I know and can live with, but it avoids clumsy CSS class selectors, like this:

我正在使用一个更简单和纯粹的CSS解决方案。它有它的局限性，我知道并且可以接受它，但是它避免了笨拙的CSS类选择器，比如:

<a href="index.html" class="item{% if url == request.path %}active{% endif %}">index</a>

Because a space character before active is missing the class selector gets called itemactive instead of item active and this isn't exactly too difficult to get wrong like that.

因为在活动之前的空间字符缺少类选择器，所以它被称为itemactive，而不是itemactive，这并不是很困难。

For me this pure CSS solution works much better:

对我来说，这个纯CSS解决方案更好:

a.item /* all menu items are of this class */
{
    color: black;
    text-decoration: none;
}

a.item[href~="{{ request.path }}"] /* just the one which is selected matches */
{
    color: red;
    text-decoration: underline;
}

Notice: This even works if the URL has additional path components, because then href also matches partially. That could eventually cause 'collisions' with more than one match, but often enough it just works, because on well structured websites a "subdirectory" of an URL usually is a child of the selected menu item.

注意:如果URL有额外的路径组件，这也可以工作，因为href也部分匹配。这最终可能导致多个匹配项之间的“冲突”，但通常情况下，它只会工作，因为在结构良好的网站上，URL的“子目录”通常是所选菜单项的子目录。

#9

0  

I have come up with a way to utilize block tags within menu-containing parent template to achieve something like this.

我想到了一种方法，在包含菜单的父模板中使用块标记来实现这样的目标。

base.html - the parent template:

基地。html -父模板:

<a href="/" class="{% block menu_home_class %}{% endblock %}">Home</a>
<a href="/about" class="{% block menu_about_class %}{% endblock %}">About</a>
<a href="/contact" class="{% block menu_contact_class %}{% endblock %}">Contact</a>

{% block content %}{% endblock %}

about.html - template for a specific page:

有关。特定页面的html模板:

{% extends "base.html" %}

{% block menu_about_class %}active{% endblock %}

{% block content %}
    About page content...
{% endblock %}

As you can see, the thing that varies between different page templates is the name of the block containing active. contact.html would make use of menu_contact_class, and so on.

如您所见，不同页面模板之间的差异在于包含活动的块的名称。接触。html将使用menu_contact_class，等等。

One benefit of this approach is that you can have multiple subpages with the same active menu item. For example, an about page might have subpages giving information about each team members of a company. It could make sense to have the About menu item stay active for each of these subpages.

这种方法的一个好处是，您可以拥有多个具有相同活动菜单项的子页面。例如，一个about页面可能有子页面，提供关于公司每个团队成员的信息。让About菜单项为每个子页面保持活动状态是有意义的。

#1

46  

Figured out another way to do it, elegant enough thanks to this answer : https://*.com/a/17614086/34871

找到了另一种方法，非常优雅，多亏了这个答案:https://*.com/a/17614086/34871

Given an url pattern such as:

给定一个url模式，例如:

url(r'^some-url', "myapp.myview", name='my_view_name'),

my_view_name is available to the template through request ( remember you need to use a RequestContext - which is implicit when using render_to_response )

my_view_name可以通过请求(记住您需要使用RequestContext——在使用render_to_response时是隐式的)对模板可用。

Then menu items may look like :

那么菜单项可能看起来是:

<li class="{% if request.resolver_match.url_name == "my_view_name" %}active{% endif %}"><a href="{% url "my_view_name" %}">Shortcut1</a></li>
<li class="{% if request.resolver_match.url_name == "my_view_name2" %}active{% endif %}"><a href="{% url "my_view_name2" %}">Shortcut2</a></li>

etc.

等。

This way, the url can change and it still works if url parameters vary, and you don't need to keep a list of menu items elsewhere.

通过这种方式，url可以更改，如果url参数不同，url仍然可以工作，而且不需要在其他地方保留菜单项的列表。

#2

43  

Using template tag

You can simply use the following template tag:

您可以使用以下模板标签:

# path/to/templatetags/mytags.py
import re

from django import template
from django.core.urlresolvers import reverse, NoReverseMatch

register = template.Library()


@register.simple_tag(takes_context=True)
def active(context, pattern_or_urlname):
    try:
        pattern = '^' + reverse(pattern_or_urlname)
    except NoReverseMatch:
        pattern = pattern_or_urlname
    path = context['request'].path
    if re.search(pattern, path):
        return 'active'
    return ''

So, in you your template:

所以，在你的模板中

{% load mytags %}
<nav><ul>
  <li class="nav-home {% active 'url-name' %}"><a href="#">Home</a></li>
  <li class="nav-blog {% active '^/regex/' %}"><a href="#">Blog</a></li>
</ul></nav>

Using only HTML & CSS

There is another approach, using only HTML & CSS, that you can use in any framework or static sites.

还有一种方法，只使用HTML和CSS，可以在任何框架或静态站点中使用。

Considering you have a navigation menu like this one:

考虑到你有一个像这样的导航菜单:

<nav><ul>
  <li class="nav-home"><a href="#">Home</a></li>
  <li class="nav-blog"><a href="#">Blog</a></li>
  <li class="nav-contact"><a href="#">Contact</a></li>
</ul></nav>

Create some base templates, one for each session of your site, as for example:

创建一些基本模板，针对站点的每个会话创建一个模板，例如:

home.html
base_blog.html
base_contact.html

All these templates extending base.html with a block "section", as for example:

所有这些模板都扩展了基。带有“节”块的html，例如:

...
<body id="{% block section %}section-generic{% endblock %}">
...

Then, taking the base_blog.html as example, you must have the following:

然后,base_blog。以html为例，您必须拥有以下内容:

{% extends "base.html" %}
{% block section %}section-blog{% endblock %}

Now it is easy to define the actived menu item using CSS only:

现在，仅使用CSS就可以很容易地定义活动菜单项:

#section-home .nav-home,
  #section-blog .nav-blog,
  #section-contact .nav-contact { background-color: #ccc; }

#3

22  

I found easy and elegant DRY solution.

我找到了简单而优雅的干法。

It's the snippet: http://djangosnippets.org/snippets/2421/

的片段:http://djangosnippets.org/snippets/2421/

**Placed in templates/includes/tabs.html**

<ul class="tab-menu">
    <li class="{% if active_tab == 'tab1' %} active{% endif %}"><a href="#">Tab 1</a></li>
    <li class="{% if active_tab == 'tab2' %} active{% endif %}"><a href="#">Tab 2</a></li>
    <li class="{% if active_tab == 'tab3' %} active{% endif %}"><a href="#">Tab 3</a></li>
</ul>

**Placed in your page template**

{% include "includes/tabs.html" with active_tab='tab1' %}

#4

4  

You could make a context variable links with the name, URL and whether it's an active item:

您可以使用名称、URL以及它是否是活动项来创建上下文变量链接:

{% for name, url, active in links %}
    {% if active %}
<span class='active'>{{ name }}</span>
    {% else %}
<a href='{{ url }}'>{{ name }}</a>
    {% endif %}
{% endfor %}

If this menu is present on all pages, you could use a context processor:

如果所有页面都有此菜单，您可以使用上下文处理器:

def menu_links(request):
    links = []
    # write code here to construct links
    return { 'links': links }

Then, in your settings file, add that function to TEMPLATE_CONTEXT_PROCESSORS as follows: path.to.where.that.function.is.located.menu_links. This means the function menu_links will be called for every template and that means the variable links is available in each template.

然后，在设置文件中，将该函数添加到template_context_processor，如下所示:path.to.where.that.function.is.locat .menu_links。这意味着将为每个模板调用函数menu_links，这意味着每个模板中都可以使用变量链接。

#5

1  

Assuming the nav item is a link with the same URL as the current page, you could just use JavaScript. Here's an annotated method that I use to add a class="active" to a li in a navigation menu with class="nav":

假设nav项目是与当前页面具有相同URL的链接，您可以使用JavaScript。这里有一个带注释的方法，我用class="active"在class="nav"的导航菜单中添加一个class="active"到li:

// Get the path name (the part directly after the URL) and append a trailing slash
// For example, 'http://www.example.com/subpage1/sub-subpage/' 
//     would become '/subpage1/'
var pathName = '/' + window.location.pathname.split('/')[1];
if ( pathName != '/' ) { pathName = pathName + '/'; }

// Form the rest of the URL, so that we now have 'http://www.example.com/subpage1/'
// This returns a top-level nav item
var url = window.location.protocol + '//' +
          window.location.host +
          pathName;
console.log(url);

// Add an 'active' class to the navigation list item that contains this url
var $links = document.querySelectorAll('.nav a');
$link = Array.prototype.filter.call( $links, function(el) {
    return el.href === url;
})[0];
$link.parentNode.className += ' active';

This method means you can simply pop it into your base template once and forget about it. No repetition, and no manual specification of the page URL in each template.

这个方法意味着您可以简单地将它放入基本模板中一次，然后忘记它。没有重复，也没有每个模板中的页面URL的手工规范。

One caveat: this obviously only works if the url found matches a navigation link href. It would additionally be possible to specify a couple of special use cases in the JS, or target a different parent element as needed.

需要注意的是:这显然只适用于找到的url与导航链接href匹配的情况。此外，还可以在JS中指定两个特殊用例，或者根据需要针对不同的父元素。

Here's a runnable example (keep in mind, snippets run on StackSnippets):

这里有一个可运行的示例(请记住，在StackSnippets中运行代码片段):

// Get the path name (the part directly after the URL) and append a trailing slash
// For example, 'http://www.example.com/subpage1/sub-subpage/' 
//     would become '/subpage1/'
var pathName = '/' + window.location.pathname.split('/')[1];
if ( pathName != '/' ) { pathName = pathName + '/'; }

// Form the rest of the URL, so that we now have 'http://www.example.com/subpage1/'
// This returns a top-level nav item
var url = window.location.protocol + '//' +
          window.location.host +
          pathName;
console.log(url);

// Add an 'active' class to the navigation list item that contains this url
var $links = document.querySelectorAll('.nav a');
$link = Array.prototype.filter.call( $links, function(el) {
    return el.href === url;
})[0];
$link.parentNode.className += ' active';
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: black;
  text-decoration: none;
}
.active a {
  color: red;
}
<ul class="nav">
  <li>
    <a href="http://example.com/">Example Link</a>
  </li>
  <li>
    <a href="http://stacksnippets.net/js/">This Snippet</a>
  </li>
  <li>
    <a href="https://google.com/">Google</a>
  </li>
  <li>
    <a href="http://*.com/">*</a>
  </li>
</ul>

#6

0  

Based on @vincent's answer, there is an easier way to do this without messing up with django url patterns.

根据@vincent的回答，有一种更简单的方法可以在不影响django url模式的情况下做到这一点。

The current request path can be checked against the rendered menu item path, and if they match then this is the active item.

可以根据呈现的菜单项路径检查当前请求路径，如果它们匹配，那么这就是活动项。

In the following example I use django-mptt to render the menu but one can replace node.path with each menu item path.

在下面的示例中，我使用django-mptt来呈现菜单，但是可以替换node。路径与每个菜单项路径。

<li class="{% if node.path == request.path %}active{% endif %}">
    <a href="node.path">node.title</a>
</li>

#7

0  

I ran into this challenge today with how to dynamically activate a "category" in a sidebar. The categories have slugs which are from the DB.

我今天遇到了这个挑战，如何在侧边栏中动态激活一个“类别”。这些类别有来自DB的蛞蝓。

I solved it by checking to see category slug was in the current path. The slugs are unique (standard practice) so I think this should work without any conflicts.

我通过检查类别段是否在当前路径中来解决它。鼻涕虫是唯一的(标准的做法)，所以我认为这应该不会有任何冲突。

{% if category.slug in request.path %}active{% endif %}

Full example code of the loop to get the categories and activate the current one.

循环的完整示例代码以获取类别并激活当前的类别。

{% for category in categories %}
<a class="list-group-item {% if category.slug in request.path %}active{% endif %}" href="{% url 'help:category_index' category.slug %}">
  <span class="badge">{{ category.article_set.count }}</span>
  {{ category.title }}
</a>
{% endfor %}

#8

0  

I am using an easier and pure CSS solution. It has its limitations, of which I know and can live with, but it avoids clumsy CSS class selectors, like this:

我正在使用一个更简单和纯粹的CSS解决方案。它有它的局限性，我知道并且可以接受它，但是它避免了笨拙的CSS类选择器，比如:

<a href="index.html" class="item{% if url == request.path %}active{% endif %}">index</a>

Because a space character before active is missing the class selector gets called itemactive instead of item active and this isn't exactly too difficult to get wrong like that.

因为在活动之前的空间字符缺少类选择器，所以它被称为itemactive，而不是itemactive，这并不是很困难。

For me this pure CSS solution works much better:

对我来说，这个纯CSS解决方案更好:

a.item /* all menu items are of this class */
{
    color: black;
    text-decoration: none;
}

a.item[href~="{{ request.path }}"] /* just the one which is selected matches */
{
    color: red;
    text-decoration: underline;
}

Notice: This even works if the URL has additional path components, because then href also matches partially. That could eventually cause 'collisions' with more than one match, but often enough it just works, because on well structured websites a "subdirectory" of an URL usually is a child of the selected menu item.

注意:如果URL有额外的路径组件，这也可以工作，因为href也部分匹配。这最终可能导致多个匹配项之间的“冲突”，但通常情况下，它只会工作，因为在结构良好的网站上，URL的“子目录”通常是所选菜单项的子目录。

#9

0  

I have come up with a way to utilize block tags within menu-containing parent template to achieve something like this.

我想到了一种方法，在包含菜单的父模板中使用块标记来实现这样的目标。

base.html - the parent template:

基地。html -父模板:

<a href="/" class="{% block menu_home_class %}{% endblock %}">Home</a>
<a href="/about" class="{% block menu_about_class %}{% endblock %}">About</a>
<a href="/contact" class="{% block menu_contact_class %}{% endblock %}">Contact</a>

{% block content %}{% endblock %}

about.html - template for a specific page:

有关。特定页面的html模板:

{% extends "base.html" %}

{% block menu_about_class %}active{% endblock %}

{% block content %}
    About page content...
{% endblock %}

As you can see, the thing that varies between different page templates is the name of the block containing active. contact.html would make use of menu_contact_class, and so on.

如您所见，不同页面模板之间的差异在于包含活动的块的名称。接触。html将使用menu_contact_class，等等。

One benefit of this approach is that you can have multiple subpages with the same active menu item. For example, an about page might have subpages giving information about each team members of a company. It could make sense to have the About menu item stay active for each of these subpages.

这种方法的一个好处是，您可以拥有多个具有相同活动菜单项的子页面。例如，一个about页面可能有子页面，提供关于公司每个团队成员的信息。让About菜单项为每个子页面保持活动状态是有意义的。

标签：

相关文章