Пользовательские классы для ссылок меню
Как я могу добавить пользовательские классы для ссылок в главное меню в Drupal 8. Это шаблон для моего главного меню под названием menu--main.html.twig
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('main-nav') }}>
{% for item in items %}
<li{{ item.attributes.addClass('main-nav__item') }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
{% else %}
<ul class="main-nav__sub js-nav-submenu ">
{% for item in items %}
<li{{ item.attributes.addClass('main-nav__sub-item') }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
{% endmacro %}
И мне нужно достичь этого результата:
<ul class="main-nav">
<li class="main-nav__item"><a class="main-nav__link main-nav__link--active" href="index.html">Úvod</a></li>
<li class="main-nav__item"><a class="main-nav__link js-nav-submenu-toggler" href="#">O škole</a>
<ul class="main-nav__sub js-nav-submenu">
<li class="main-nav__sub-item"><a class="main-nav__sub-link" href="#">Aktuality</a></li>
<li class="main-nav__sub-item"><a class="main-nav__sub-link " href="pedagogovia.html">Pedagógovia</a></li>
<li class="main-nav__sub-item"><a class="main-nav__sub-link" href="#">Dokumenty</a></li>
<li class="main-nav__sub-item"><a class="main-nav__sub-link " href="historia.html">História</a></li>
</ul>
</li>
<li class="main-nav__item"><a class="main-nav__link" href="#">Informácie o štúdiu</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#">Fotogaléria</a></li>
<li class="main-nav__item"><a class="main-nav__link " href="kontakt.html">Kontakt</a></li>
</ul>
Моя проблема в том, что я не знаю, как установить пользовательский класс для тегов <a href="">
. Есть ли какой-либо способ сделать это с помощью функции link()
. В Drupal 7 есть функция l()
, но атрибуты не похожи. l()
также имеет третий атрибут с возможностью добавления опций. Правда ли, что link($title, $url)
принимает только 2 параметра? Потому что я не могу найти способ, как отправить параметры для link($title, $url)
. Я не знаю о функции link()
, поэтому, если есть какой-то лучший способ, пожалуйста, дайте мне знать. Я открыт для новых идей:)
Спасибо
4 answers
Просто на случай, если кто-то наткнется на это, решение Мартина выше разбивает фрагменты URL, поскольку оно полностью переопределяет параметры URL. Лучший подход здесь:
{{ link(item.title, item.url.setOption('attributes', {'class' : 'main-nav__link'})) }}
Просто замените
{{ link(item.title, item.url) }}
По
{{ link(item.title, item.url, { 'class':['main-nav__link']}) }}
Я, наконец, решил эту проблему, используя следующий синтаксис в шаблоне Twig
{{ link(item.title, item.url.setOptions({'set_active_class' : TRUE, 'attributes' : {'class' : 'main-nav__link'}})) }}
Имя файла /var/www/html/drupal/темы/имя темы/шаблоны/навигация/меню.html.ветка
Мы проверяем название меню в условии if {% если имя_меню ==’учетная запись’%}
Ниже приведен весь код, который вы можете скопировать и заменить
{#
/**
* @file
* Theme override to display a menu.
*
* Available variables:
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*/
#}
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0,menu_name) }}
{% macro menu_links(items, attributes, menu_level,menu_name) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
{% if menu_name =='account' %}
<ul{{ attributes.addClass('') }}>
{% endif %}
{% if menu_name =='main' %}
<ul{{ attributes.addClass('menu nav navbar-nav') }}>
{% endif %}
{% else %}
<ul{{ attributes.addClass('menu nav navbar-nav') }}>
{% endif %}
{% for item in items %}
{%
set classes = [
'menu-item',
item.is_expanded ? 'menu-item--expanded',
item.is_collapsed ? 'menu-item--collapsed',
item.in_active_trail ? 'menu-item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}