Все кто пользуется генератором статических сайтов Jekyll сталкивался с ситуацией когда возникает необходимость выделить название меню той страницы где находится посетитель.
Я предлагаю воспользоваться следующим способом:
В качестве примера будем использовать стандартный шаблон Jekyll.Я добавил несколько страниц в меню для наглядности.Теперь наш тестовый сайт выглядит следующим образом
Как Вы видите наше меню состоит из пунктов: Главная, Портфолио, FAQ, О Нас. За выделение активной ссылки отвечает class “active”.Пропишем небольшой скрипт который будет вставлять class=”active” в шаблон текущей страницы.Для начала создадим папку ‘ _data ‘ в корневой директории сайта.В этой папке создадим файл ‘ links.yml ‘ и пропишем в этом файле название рубрик и ссылки на эти рубрики
- title: Главная
url: index.html
- title: Портфолио
url: foto.html
- title: FAQ
url: faq.html
- title: О Нас
url: about.html
Сам скрипт имеет следующий вид
{ % for link in site.data.links % }
{ % assign active = nil % }
{ % if page.url contains link.url % }
{ % assign active = 'active' % }
{ % endif % }
<li class="{ % if forloop.first % }{ % endif % } {{ active }} { % if forloop.last % }{ % endif % }">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{ % endfor % }
Скрипт делает проверку, если текущая страница есть в списке меню ей подставляется класс “active”
Теперь нам необходимо отредактировать страницу в которой находится наше меню.
<div class="trigger">
<ul class= "page-link">
<li class="active">
<a href="index.html">Главная</a>
</li>
<li>
<a href="foto.html">Портфолио</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="about.html">О нас</a>
</li>
</ul>
</div>И заменить на строки
<div class="trigger">
<ul class= "page-link">
{ % for link in site.data.links % }
{ % assign active = nil % }
{ % if page.url contains link.url % }
{ % assign active = 'active' % }
{ % endif % }
<li class="{ % if forloop.first % }{ % endif % } {{ active }} { % if forloop.last % }{ % endif % }">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{ % endfor % }
</ul>
</div>
Теперь когда посетитель перейдет в какойто раздел меню, допустим “Портфолио” ссылка в меню изменит свой стиль. Для примера я использовал красный цвет активной ссылки.
Ну вот, теперь наш сайт стал более дружелюбным.