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

Question

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

这是我的导航对象。

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 根 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> 都需要是 class "active".

Answer 1

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

我不明白你为什么要从 cherrypy 传递 active_page 变量，你可以简单地在子模板中设置它。

你说：

Note that both the <a> in the parent list and the <li> needs to be of class "active".

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

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

Best practice for nested menus in Jinja2 Templates

python

cherrypy

jinja2