Question

我正在尝试找到在Jinga2模板中生成带有无序列表的嵌套菜单的最佳方法。到目前为止它工作正常，但我找不到设置活动链接的好方法，因为父项和子项需要属于活动类才能工作。

这是我的导航对象。

navigation = [
    {'href': '/', 'id': 'dashboard', 'caption': 'Dashboard', 'icon-class': 'fa fa-dashboard'},
    {'href': '/electricity', 'id': 'electricity', 'caption': 'Electricity', 'icon-class': 'fa fa-cogs',
        'sub-item': (
            {'href': '/electricity?usage', 'id': 'electricity-usage', 'caption': 'Usage'},
            {'href': '/electricity?status', 'id': 'electricity-status', 'caption': 'Status'},
        )}
]

CherryPy Root class：

class Root:
@cherrypy.expose
def index(self):
    tmpl = env.get_template('base.html')
    return tmpl.render(siteName='Test', navigation_bar=navigation, title='Index')

@cherrypy.expose
def electricity(self):
    tmpl = env.get_template('base.html')
    return tmpl.render(siteName='Test', navigation_bar=navigation, active_page='electricity', title='Electricity')

这是我当前的jinja2模板文件，其中包含菜单代码部分：

{% set active_page = active_page|default('dashboard') -%}

  <aside>
      <div id="sidebar"  class="nav-collapse ">
          <!-- sidebar menu start-->

          <ul class="sidebar-menu" id="nav-accordion">
              {% for pitem in navigation_bar %}
                <li class="mt">
                    <a {% if id == active_page %} class="active"{% endif %} href="{{ pitem['href']|e }}">
                      <i class="{{ pitem['icon-class']|e }}"></i>
                      <span>{{ pitem['caption']|e }}</span>
                  </a>
                    {% if pitem['sub-item'] %} <ul class="sub"> {% endif %}
                    {% for sitem in pitem['sub-item'] %}
                        <li {% if id == active_page %} class="active"{% endif %} ><a  href="{{ sitem['href'] }}">{{ sitem['caption'] }}</a></li>
                    {% endfor %}
                    {% if pitem['sub-item'] %} </ul> {% endif %}
                </li>
              {% endfor %}
          </ul>

          <!-- sidebar menu end-->
      </div>
  </aside>

这是它需要生成的结构的一个例子：

<ul class="sidebar-menu" id="nav-accordion">        
<li class="mt">
    <a href="index.html">
        <i class="fa fa-dashboard"></i>
        <span>Dashboard</span>
    </a>
</li>

<li class="sub-menu">
    <a class="active" href="javascript:;" >
        <i class="fa fa-desktop"></i>
        <span>UI Elements</span>
    </a>
    <ul class="sub">
        <li class="active"><a  href="general.html">General</a></li>
        <li><a  href="buttons.html">Buttons</a></li>
        <li><a  href="panels.html">Panels</a></li>
    </ul>
</li>

请注意，父列表中的<a>和<li>都必须属于“有效”类。

Answer 1

您是将导航HTML放在子模板中而不是父基本模板中吗？您可以将所有导航模板HTML放在基本模板中，并在子模板中设置active_page变量，如文档中所述：http://jinja.pocoo.org/docs/dev/tricks/#highlighting-active-menu-items

我不明白你为什么要从cherrypy传递active_page变量，你只需在子模板中设置它。

你说：

请注意，父列表中的<a>和<li>都必须属于＆＃34;有效＆＃34;。

我不明白，是什么阻止您在{% if id == active_page %} class="active"{% endif %}代码和<a>代码中使用<li>两次？

Jinja2模板中嵌套菜单的最佳实践

1 个答案: