Подсветка меню в Jekyll



Все кто пользуется генератором статических сайтов Jekyll сталкивался с ситуацией когда возникает необходимость выделить название меню той страницы где находится посетитель.

Я предлагаю воспользоваться следующим способом:

В качестве примера будем использовать стандартный шаблон 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>
      

Теперь когда посетитель перейдет в какойто раздел меню, допустим “Портфолио” ссылка в меню изменит свой стиль. Для примера я использовал красный цвет активной ссылки.

Активная ссылка в меню Jekyll

Ну вот, теперь наш сайт стал более дружелюбным.