Активное состояние меню диска с использованием nunjucks и файла json - PullRequest
Новая
       35

Активное состояние меню диска с использованием nunjucks и файла json

0 голосов
/ 14 апреля 2020

У меня есть меню с активным состоянием, установленным на странице, поэтому в зависимости от того, где вы находитесь, активное состояние изменяется следующим образом: 

<ul>
    <li><a href="/a" class="{{active.a}}">Item A</a></li>
    <li><a href="/b" class="{{active.b}}">Item B</a></li>
</ul>

Чтобы установить мой пункт меню «Элемент A» как активный, я могу передать следующее с моей точки зрения, это прекрасно работает. 

{% set active = { a: 'active'} %}

Когда страница отображается, это выглядит так: 

<ul>
    <li><a href="/a" class="active">Item A</a></li>
    <li><a href="/b" class="">Item B</a></li>
</ul>

Теперь у меня есть json файл, как показано ниже, который я могу создать структуру навигации просто отлично. Тем не менее, я думаю, это из-за того, как JSON отображается, но он не отображает nunjucks в точке загрузки представления. 

[
    {
    "nav": "topNavLeft",
        "items": [{
            "text": "Item A",
            "route": "/a",
            "target": "_self",
            "class": "{{active.a}}"
        },
        {
            "text": "Item B",
            "route": "/b",
            "target": "_self",
            "class": "{{active.b}}"
        }]
    }
]

Используя это json, я могу сделать навигация выглядит следующим образом: 

{% for i in nav %}
    {% for navItem in i.items %}
      <li><a href="{{navItem.route}}" class="{{navItem.class}}">{{navItem.text}}</a></li>
    {% endfor %}
{% endfor %}

Однако это выглядит так: 

<li><a href="/" class="active.a">Item A</a></li>
<li><a href="/" class="active.b">Item B</a></li>
<li><a href="/" class="active.c">Item C</a></li>

Я хочу, чтобы при загрузке страницы использовался файл json, чтобы отобразить меню и затем со страницы установите соответствующее активное состояние.

...