twig - 如何在 Twig 中更改没有 js 的活动菜单？

Question

我将Twitter Bootstrap和 Symfony 2 与 Twig 一起使用。我的所有页面都有这个：

<div class="navbar navbar-inverse navbar-static-top"> 
            <div class="navbar-inner">
                <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
                <ul class="nav">
                    <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
                    <li><a href="#about">Reports</a></li>
                    <li><a href="{{ path('categories') }}">Categories</a></li>
                    <li><a href="#contact">Months</a></li>
                    <li><a href="#contact">Bank Accounts</a></li>
                    </ul>
            </div>
</div>

我不想在每一页上复制它......问题是类活动属性应该只用于当前页面。有没有办法在不使用 JavaScript 的情况下成功，只使用一些宏或包含之王？非常感谢您！

---

更新

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="navbar-inner">
        <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
        <ul class="nav">
            {% if var == 'Expenses' %}
            <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
            {% else %}
            <li><a href="{{ path('expenses') }}">Expenses</a></li>
            {% endif %}

            {% if var == 'Reports' %}
            <li class="active"><a href="#">Reports</a></li>
            {% else %}
            <li><a href="#">Reports</a></li>
            {% endif %}

            {% if var == 'Categories' %}
            <li class="active"><a href="{{ path('categories') }}">Categories</a></li>
            {% else %}
            <li><a href="{{ path('categories') }}">Categories</a></li>
            {% endif %}

            {% if var == 'Months' %}
            <li class="active"><a href="#">Months</a></li>
            {% else %}
            <li><a href="#">Months</a></li>
            {% endif %}

           {% if var == 'Bank Accounts' %}
            <li class="active"><li><a href="#">Bank Accounts</a></li>
            {% else %}
            <li><li><a href="#">Bank Accounts</a></li>
            {% endif %} 
            </ul>
    </div>
</div>

我不是很优雅的尝试。我称之为：

{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}

Answer 1

执行此操作的简单方法是使用以下路线：

<ul class="nav nav-pills">

<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
<a href="{{ path('your_route') }}">MyTitle</a>
</li>

...
</ul>

这是对@Winzou 提供的解决方案的改编。

Answer 2

这很简单：

1. 将其定义为单个树枝
   {% block menu_block %} //your content here {% endblock %}
2. 在每一页中使用你的块
   {% block menu_block %} {{ parent() }} {% endblock %}
3. 在当前菜单元素处为您的班级制作条件语句。显然，您必须将页面的名称或 id 传递给您的树枝（或从请求中检索，即），才能完成您想要做的事情

Answer 3

这是一个例子。

{% if menu.url == current_url %} class="active"{% endif %}