添加活动类以与 sf2 和 twig 链接

Question

下面的简单代码：

<li><a href="{{ path('_list') }}">List</a></li>

如果当前页面与 _list 路由匹配，是否有一种简单的方法来添加 class="active" ？

使用最新的 symfony2 和 twig PR-Release 作为模板引擎

Answer 1

Twig 允许使用条件，并且 Request 对象在整个应用程序中可用。如果您要包含模板，则要获取要使用的路线：

app.request.attributes.get('_route')

如果您正在使用渲染函数，则要使用：

app.request.attributes.get('_internal')

这样，您应该能够使用：

class="{% if app.request.attributes.get('_route') == '_list' %}active{% endif %}"

或更短：

class="{{ app.request.get('_route') == '_list' ? 'active' }}"

Answer 2

有时您不想对路线进行精确匹配。对于这些情况，您可以使用 twig 的“开头为”条件逻辑。

举个例子，假设您正在处理书籍。您有以下路线：book、book_show、book_new、book_edit。您希望在任何这些情况下突出显示导航项 Book。这段代码可以实现这一点。

<a class="{% if app.request.attributes.get('_route') starts with 'book' %}active{% endif %}">Books</a>
<a class="{% if app.request.attributes.get('_route') starts with 'author' %}active{% endif %}">Authors</a>

此示例至少适用于 Symfony 2.3.x

Answer 3

最短版本：

{% set route = app.request.get('_route') %}

 <li class="{{ route starts with 'post' ? 'open' }}"></li>
 <li class="{{ route starts with 'category' ? 'open' }}"></li>

有时有用：

{% set route = app.request.get('_route') %}

<li class="{{ 'post' in route ? 'open' }}"></li>
<li class="{{ 'category' in route ? 'open' }}"></li>

Answer 4

使用三元运算符：

    {% set route = app.request.attributes.get('_route') %}
    <ul class="nav navbar-nav">
        <li {{ route ==  'profile_index' ? 'class="active"' }}><a href="{{ path('profile_index') }}"><i class="icon-profile position-left"></i> My Profile</a></li>
        <li {{ route ==  'influencers_index' ? 'class="active"'}}><a href="{{ path('influencers_index') }}"><i class="icon-crown position-left"></i> Influencers</a></li>
        <li {{ route ==  'task_manager_index' ? 'class="active"'}}><a href="{{ path('task_manager_index') }}"><i class="icon-alarm-check position-left"></i> Task Manager</a></li>
    </ul>

Answer 5

这是使用 symfony 3.4 完成的，但可能可以使用 SF2 完成类似的操作。

src\AppBundle\Twig\AppExtension.php

<?php

namespace AppBundle\Twig;

use Symfony\Component\HttpFoundation\RequestStack;

class AppExtension extends \Twig_Extension
{
    private $requestStack;

    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }

    public function getFunctions()
    {
        return [
            new \Twig_SimpleFunction('activeMenu', [$this, 'activeMenu'])
        ];
    }

    /**
     * Pass route names. If one of route names matches current route, this function returns
     * 'active'
     * @param array $routesToCheck
     * @return string
     */
    public function activeMenu(array $routesToCheck)
    {
        $currentRoute = $this->requestStack->getCurrentRequest()->get('_route');

        foreach ($routesToCheck as $routeToCheck) {
            if ($routeToCheck == $currentRoute) {
                return 'active';
            }
        }

        return '';
    }
}

将其添加到 services.yml

services:
    #... some other services
    AppBundle\Twig\AppExtension:
        arguments: ["@request_stack"]

用法：

<ul class="nav navbar-nav">
    <li class="{{ activeMenu(['form', 'edit_form']) }}"><a href="{{ path('form') }}">Form</a></li>
    <li class="{{ activeMenu(['list']) }}"><a href="{{ path('list') }}">List</a></li>
</ul>

Answer 6

我找到了一个非常好的捆绑包，可以自动处理所有这些东西：

https://github.com/KnpLabs/KnpMenuBundle

Answer 7

SF2.2

{{ dump(app.request.server.get('PATH_INFO')) }}

Answer 8

Symfony2.3，在Twig中，尝试这样获取uri：

{{ dump(app.request.server.get("REQUEST_URI")) }}

Answer 9

我发现更有效地了解我们是否位于活动页面和链接上：

在文件 xx.html.twig 中：
在你的头文件中

{% set route_name = app.request.attributes.get('_route') %}

并添加 twig 的 html 类

{% if route_name matches '{^issue}' %}active{% endif %}

Answer 10

这就是我的做法（使用 Symfony 2.6）

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

'_homepage' 是你的包的 routing.yml 中的路由名称，路由看起来像这样

_homepage:
    path:     /
    defaults: { _controller: CoreBundle:Default:index }

Answer 11

class="class_name {% ifloop.index0 == 0 %}CLASSNAME{% endif %}"