ajouter la classe active pour faire le lien avec sf2 et twig
code simple suivant:
<li><a href="{{ path('_list') }}">List</a></li>
est-il un moyen simple d'ajouter un class="active" si la page courante correspond au _list route?
en utilisant le plus récent PR-Release de symfony2 et brindille comme moteur de modèle
10 réponses
Twig permet les conditionnels et l'objet Request est disponible dans toute l'application. Si vous êtes y compris le modèle, pour obtenir l'itinéraire que vous souhaitez utiliser:
app.request.attributes.get('_route')
Si vous utilisez la fonction rendu, vous souhaitez utiliser:
app.request.attributes.get('_internal')
Avec ça, vous devriez être en mesure d'utiliser:
class="{% if app.request.attributes.get('_route') == '_list' %}active{% endif %}"
ou plus court:
class="{{ app.request.get('_route') == '_list' ? 'active' }}"
Parfois, vous ne voulez pas faire la correspondance exacte de l'itinéraire. Pour ces cas, vous pouvez utiliser la logique conditionnelle de la brindille" commence par".
par exemple, supposons que vous travaillez avec des livres. Vous avez les routes suivantes: book, book_show, book_new, book_edit. Vous voulez que le livre d'items de navigation soit surligné pour n'importe lequel de ces cas. Ce code accomplirait cela.
<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>
Cet exemple fonctionne avec au moins Symfony 2.3.x
version la plus courte:
{% set route = app.request.get('_route') %}
<li class="{{ route starts with 'post' ? 'open' }}"></li>
<li class="{{ route starts with 'category' ? 'open' }}"></li>
Parfois utile:
{% set route = app.request.get('_route') %}
<li class="{{ 'post' in route ? 'open' }}"></li>
<li class="{{ 'category' in route ? 'open' }}"></li>
avec opérateur ternaire:
{% 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>
j'ai trouvé un très bon Bundle qui gère tout ça automatiquement:
Symfony2.3, dans Twig, essayez ceci pour obtenir uri:
{{ dump(app.request.server.get("REQUEST_URI")) }}
C'est la façon dont je le fais (à l'aide de Symfony 2.6)
<li {% if app.request.get('_route') == '_homepage' %} class="active" {% endif %}><a href="{{ path('_homepage') }}">Student</a></li>
'_homepage' est le nom de la route dans routing.yml de votre bundle et la route ressemble à ceci
_homepage:
path: /
defaults: { _controller: CoreBundle:Default:index }
C'est fait avec symfony 3.4, mais probablement quelque chose de similaire peut être fait avec 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 '';
}
}
ajouter ceci aux services.yml
services:
#... some other services
AppBundle\Twig\AppExtension:
arguments: ["@request_stack"]
Utilisation:
<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>
class="class_name {% si la boucle.index0 = = 0 %}CLASSNAME{% endif%}"