处理模板引擎中的 n 个菜单项

Question

我需要创建 N 个菜单项，可能有 N 个子项。

这适用于一个级别。

items = {'link1': 'value1', 
         'link2': 'value2', 
         'link3': 'value3'
         }

---

<nav id="menu">
    <ul>
        {% for key in items %}
        <li>
           <a href="{{ escape(key) }}"> {{ escape(items[key]) }}</a>
        </li
       {% end %}
    </ul>
</nav>

这将输出：

<nav id="menu">
    <ul>
        <li>
            <a href="link1"> value1</a>
        </li>
        <li>
            <a href="link2"> value2</a>
        </li>
        <li>
            <a href="link3"> value3</a>
        </li>
    </ul>
</nav>

但是如果我有这样一个更复杂的结构，如何处理呢？

level 1
   level 1.1
   level 1.2
   level 1.3
level 2
   level 2.1
      level 2.1.1
          level 2.1.1.1
      level 2.1.2
level 3
   level 3.1
   level 3.2

Answer 1

改为使用 dicts 列表，并允许每个 dicts 有一个“children”键。 “两级”菜单示例：

items = [
    {'label': 'label1', 
     'link': 'link1',
     'children': [
         {'label':'label1.1', 'link': 'link1.1'}, 
         {'label':'label1.2', 'link': 'link1.2'} 
         ]
     },
    {'label': 'label2', 
     'link': 'link2',
     'children': [
         {'label':'label2.1', 'link': 'link2.1'}, 
         {'label':'label2.2', 'link': 'link2.2'} 
         ]
     },
    # etc
    ]

然后在你的模板中：

<nav id="menu">
    <ul>
        {% for item in items %}
        <li>
           <a href="{{ escape(item['link']) }}"> {{ escape(item['label']) }}</a>
           {% if 'children' in item %}
           <ul>
             {% for child in item['children'] %}
             <li>
               <a href="{{ escape(child['link']) }}"> {{ escape(child['label']) }}</a>
             </li>
             {% end %}
           </ul>
           {% end %}
        </li
       {% end %}
    </ul>
</nav>

如果您希望能够处理任意深度，则需要在模板中使用一些递归机制，但由于我不知道您使用的是什么模板引擎，所以在这里我无能为力。

Answer 2

有一种方法可以进行这种迭代，那就是了解它的类型。所以，假设你有列表，在这个列表中你有字符串和列表。所以，这就是我的做法：

{% if key.get_type == "list" %}
    {% for var in key %}
     ... (this will only work for as many levels as you define)

Answer 3

要将输出视为嵌套列表，请使用以下命令： （我假设您已经拥有类似格式的 items 字典。）

items = [
{'link': 'link1','value': 'value1',
 'sub_items': [
       {'link':'link1.1','value':'value1.1'},
       {'link':'link1.2','value':'value1.2'},
       {'link':'link1.3','value':'value1.3'},
  ]
 },
 {'link': 'link2','value': 'value2',
  'sub_items': [
       {'link':'link2.1','value':'value2.1',
        'sub_items': [
            {'link':'link2.1.1','value':'value2.1.1',
             'sub_items': [
                {'link':'link2.1','value':'value2.1.1.1'}
             ]
            }
        ]
       }
  ]
 },
 {'link': 'link3','value': 'value3',
  'sub_items': [
       {'link':'link3.1','value':'value3.1'}
  ]
 }
]

---

在您的模板中：

<nav id="menu">
<ul>
{% for item in items %}
  <li>
    <a href="{{ item.link }}"> {{ item.value }}</a>
    {% if item.sub_items %}
      <ul>
      {% for item2 in item.sub_items %}
        <li>
        <a href="{{ item2.link }}"> {{ item2.value }}</a>
        {% if item2.sub_items %}
          <ul>
          {% for item3 in item2.sub_items %}
            <li>
            <a href="{{ item3.link }}"> {{ item3.value }}</a>
            {% if item3.sub_items %}
              <ul>
                {% for item4 in item3.sub_items %}
                  <li>
                    <a href="{{ item4.link }}"> {{ item4.value }}</a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
            </li>
          {%endfor%}
          </ul>
        {% endif %}
        </li>
      {%endfor%}
      </ul>
    {% endif %}
  </li>
{%endfor%}
</ul>
</nav>

它将产生所需的输出。