В веб-разработке создание четкой и интуитивно понятной навигации имеет решающее значение для положительного пользовательского опыта. Одним из эффективных способов улучшить навигацию является внедрение активных ссылок или хлебных крошек с помощью Twig. Активные ссылки визуально указывают текущее местоположение пользователя на веб-сайте и обеспечивают плавную навигацию. В этой статье мы рассмотрим различные методы установки активных ссылок в шаблонах Twig, сопровождаемые примерами кода.

1. Использование функции current_path():
   Twig предоставляет функцию current_path(), которая возвращает текущий путь к отображаемой странице. Вы можете сравнить этот путь с желаемым путем ссылки, чтобы определить, следует ли его пометить как активный. Вот пример:

{% set currentPath = app.request.attributes.get('_route') %}
<ul>
    <li {% if currentPath == 'home' %}class="active"{% endif %}><a href="{{ path('home') }}">Home</a></li>
    <li {% if currentPath == 'about' %}class="active"{% endif %}><a href="{{ path('about') }}">About</a></li>
    <li {% if currentPath == 'contact' %}class="active"{% endif %}><a href="{{ path('contact') }}">Contact</a></li>
</ul>

2. Использование функции is_granted() (для пользователей Symfony):
   Если вы используете платформу Symfony, вы можете использовать функцию is_granted()для проверки определенных разрешений или ролей. Это может быть полезно при настройке активных ссылок на основе ролей пользователей. Вот пример:

<ul>
    <li {% if is_granted('ROLE_ADMIN') %}class="active"{% endif %}><a href="{{ path('admin_dashboard') }}">Admin Dashboard</a></li>
    <li {% if is_granted('ROLE_USER') %}class="active"{% endif %}><a href="{{ path('user_profile') }}">User Profile</a></li>
    <li {% if is_granted('ROLE_GUEST') %}class="active"{% endif %}><a href="{{ path('guest_home') }}">Guest Home</a></li>
</ul>

3. Использование начинается с или заканчивается на сравнение:
   Вы также можете проверить, начинается или заканчивается текущий путь с определенной строки, используя starts withили ends withоператоры сравнения. Этот подход позволяет вам устанавливать активные ссылки для нескольких страниц с похожими URL-адресами. Вот пример:

{% set currentPath = app.request.attributes.get('_route') %}
<ul>
    <li {% if currentPath starts with 'products' %}class="active"{% endif %}><a href="{{ path('products') }}">Products</a></li>
    <li {% if currentPath starts with 'categories' %}class="active"{% endif %}><a href="{{ path('categories') }}">Categories</a></li>
    <li {% if currentPath starts with 'blog' %}class="active"{% endif %}><a href="{{ path('blog') }}">Blog</a></li>
</ul>

Внедряя активные ссылки или хлебные крошки в шаблоны Twig, вы можете значительно улучшить взаимодействие с пользователем вашего веб-приложения. В этой статье мы рассмотрели несколько методов достижения этой функциональности, в том числе использование функции current_path(), функции is_granted()(для пользователей Symfony), а также функции начинается с/заканчивается сравнением. Применяя эти методы, вы можете создать интуитивно понятную навигацию, которая поможет пользователям и повысит их общую удовлетворенность.

Не забудьте тщательно протестировать активные ссылки и адаптировать примеры кода в соответствии с потребностями вашего конкретного проекта. Наслаждайтесь улучшением навигации вашего веб-приложения с помощью Twig!