Jinja2模板中嵌套菜單的最佳實踐

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根類：

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變量，如docs中所述： http : //jinja.pocoo.org/docs/dev/tricks/#highlighting-active-菜單項

我不明白您為什么要從cherrypy傳遞active_page變量，您只需在子模板中進行設置即可。

你說：

請注意，父列表中的<a>和<li>都必須屬於“活動”類。

我不明白，是什么使您無法在<a>標簽和<li>標簽中兩次使用{% if id == active_page %} class="active"{% endif %} ？