Если не знаете, что такое блоки, ознакомьтесь со статьёй Для чего нужны блоки и где их создавать.
Префикс блока
В зависимости от используемой темы префикс theme нужно заменить на id темы.
Т.е. название блока для каждой темы будет своё:
- super.wa_apps для темы Super
- sexy.wa_apps для темы Sexy
- prestige.wa_apps для темы Prestige
- special.wa_apps для темы Special
Назначение блока
Блок позволяет заменить собой стандартное меню wa_apps, которое обладает рядом недостатков:
- Нет возможности задавать иконки или хотя бы доп. параметры;
- Нет возможности присваивать классы ссылкам в меню;
- Нет возможности задавать другие атрибуты для содержимого меню.
Где выводится блок
По умолчанию блок выводится:
- В верхней панели сайта;
- В сайдбаре, в разделе Страницы, перед списком страниц
В других местах, где предусмотрен вывод wa-apps меню.
Как выглядит блок
В демо-версии код блока выглядит так:
{strip}
<li class="{if $wa->currentUrl() == '/'}uk-active{/if}">
<a class="" href="/">
<i class="nav-icon fas fa-home"></i> Главная
</a>
</li>
<li class="{if $wa->currentUrl() == '/site/'}uk-active{/if}">
<a href="/site/">
<i class="nav-icon fas fa-globe"></i> Сайт
</a>
</li>
<li class="{if $wa->currentUrl() == '/blog/'}uk-active{/if}">
<a href="/blog/">
<i class="nav-icon far fa-newspaper"></i> Новости
</a>
</li>
<li class="{if $wa->currentUrl() == '/photos/'}uk-active{/if}">
<a href="/photos/">
<i class="nav-icon fas fa-camera-retro"></i> Фото
</a>
</li>
{/strip}
Разбор содержимого блока
Теги {strip}{/strip} удаляют из кода переносы строк, что позволяет сэкономить на весе страницы за счёт удаления пустых строк в коде.
Далее разберём содержимое блока на фрагменте кода одной ссылки.
Для наглядности разберём вторую ссылку:
<li class="{if $wa->currentUrl() == '/site/'}uk-active{/if}">
<a href="/site/">
<i class="nav-icon fas fa-globe"></i> Сайт
</a>
</li>
Здесь ссылка выглядит как /site/ т.е. она поведёт нас на страницу https://super.weberia.ru/site/ (но так как ссылка относительная, домен отбрасываем и получаем /site/).
Обратите внимание на то, что ссылка на страницу используется дважды:
- Первый раз для проверки на открытую страницу – <li class="{if $wa->currentUrl() == '/site/'}uk-active{/if}">
- Второй раз для задания непосредственно ссылки – <a href="/site/">
Иконка
Перед текстом ссылки можно вставить иконку.
Код иконки выглядит так:
<i class="nav-icon fas fa-globe"></i>
Где класс nav-icon обязателен для всех иконок, а остальные классы (в данном случае fas fa-globe) определяют какая именно иконка должна использоваться.
Подробнее про иконки можно прочитать в этом топике.
Всплывающие окна
Чтобы открывать ссылку во всплывающем окне, необходимо ссылке присвоить класс ajax-me.
Т.е. код ссылки должен превратиться из этого:
<a href="/site/">
В этот:
<a href="/site/" class="ajax-me">
ВАЖНО!
Ссылка должна вести на страницу, работающую на Super теме и это должна быть текстовая страница.
Подробнее про выплывающие окна можно прочитать в этом топике.
3 комментария
Здравствуйте, Владимир!
Прошу подсказать, как проще реализовать верхнее меню сайта, чтобы менялся язык меню при изменении языка через переключатель языков и при нажати на пункт меню открывалась информация на соответствующем языке. Приложение MyLang установлено. Русская и Украинская локали созданы. Страницы созданы, но не получается правильно переключать языки этих подстраниц. Как правильно все реализовывать при наличии данных приложений?
Здравствуйте, Леонид!
На сколько мне известно, приложение My Lang не позволяет переводить контент страниц. Поэтому нужно под каждое поселение делать свои страницы.
В рамках блока super.wa_apps вы можете разграничить ссылки на страницы на разных языках следующим образом:
{if $wa->locale() == 'ru_RU'} ссылки на страницы на русском языке {else} ссылки на страницы на другом языке {/if}Поскольку, у вас других языков не установлено, то данная конструкция будет работать корректно. Я просто не помню, как "выглядит" определение украинской локали.
Полностью пример будет выглядеть так:
{if $wa->locale() == 'ru_RU'} <li class="{if $wa->currentUrl() == '/site/'}uk-active{/if}"> <a href="/site/"> <i class="nav-icon fas fa-globe"></i> Сайт </a> </li> {else} <li class="{if $wa->currentUrl() == '/site_ua/'}uk-active{/if}"> <a href="/site_ua/"> <i class="nav-icon fas fa-globe"></i> Сайт </a> </li> {/if}Для тех, кому нужно выпадающее меню, есть примеры в этом обсуждении.