web-dev-qa-db-ja.com

sf2およびtwigとリンクするアクティブなクラスを追加します

次の簡単なコード：

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

現在のページがclass="active"ルートに一致する場合、_listを追加する簡単な方法はありますか？

symfony2の最新のPRリリースとtwigをテンプレートエンジンとして使用する

phpurlsymfonytwig
33
choise

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' }}"
91
Tau_Zero

ルートを完全に一致させたくない場合があります。これらの場合、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で動作します

21
John Kramlich

最短バージョン：

{% 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>
19
Max Lipsky

三項演算子の場合：

    {% 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>
8
Yuriy Korman

これは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>
4
Darius.V

このすべてを自動的に処理する非常に優れたバンドルを見つけました。

https://github.com/KnpLabs/KnpMenuBundle

3
choise

TwigのSymfony2.3では、これを試してuriを取得します。

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

SF2.2

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