3

Собираю проект при помощи gulp'a, допустим я делаю многостраничник, я использую плагин gulp-rigger, его суть в том, что он позволяет соединять какие-либо части шаблона, тоже самое можно делать и с помощью PHP. Допустим у нас есть повторяющаяся шапка, мы можем ее подключить ко всем страницам и после сборки, этот кусок просто вставится в основной html документ. Проблема в том, что если у меня в шапке навигация, и надо подсвечивать определенный активный пункт на странице, как это решить? То есть у меня будет класс который определяет активную часть, и я должен задавать его пунктам меню в зависимости от страницы.

3
  • 1
    Если уж лепить костыли... Можно на основе URL назначать тому или иному элементу класс через JS 31 июл 2018 в 20:11
  • как насчет взять другой плагин который работает и имеет документацию? (panini)
    – E_K
    1 авг 2018 в 12:53
  • похоже, ваш плагин такого не умеет
    – ThisMan
    2 авг 2018 в 9:38

2 ответа 2

6
+25

Использовать gulp-rigger не самое лучшее решение. Он не поддерживается совсем. У автора последний коммит был аж в сентябре 2015 года. На issues он не отвечает с того же времени. Это очень старый не поддерживаемый плагин не имеющий документации.

Есть альтернатива этому плагину - gulp-file-include.
Свою задачу, вы можете решить например вот так:

src/_nav.html

<nav>
  <ul>
    <li class="@@navAbout"><a href="#">О нас</a></li>
    <li class="@@navCatalog"><a href="#">Каталог</a></li>
    <li class="@@navContacts"><a href="#">Контакты</a></li>
  </ul>
</nav>

src/about.html

@@include('_nav.html', {navAbout": "active", "navCatalog": "", "navContacts": ""})

src/catalog.html

@@include('_nav.html', {navAbout": "", "navCatalog": "active", "navContacts": ""})

получается:

about.html

<nav>
   <ul>
     <li class="active"><a href="#">О нас</a></li>
     <li class=""><a href="#">Каталог</a></li>
     <li class=""><a href="#">Контакты</a></li>
   </ul>
</nav>

catalog.html

<nav>
   <ul>
     <li class=""><a href="#">О нас</a></li>
     <li class="active"><a href="#">Каталог</a></li>
     <li class=""><a href="#">Контакты</a></li>
   </ul>
</nav>
1
<script>
        $(function () {
            var location = window.location.pathname; // полный путь после основного URL
            // var cur_url = '/' + location.split('/').pop(); // при необходимости оставить только последню часть пути
            $('.navba-nav li').each(function () {
                var link = $(this).find('a').attr('href');
                if (location == link) // тут в зависимости от того что нужно location можно заменить на cur_url
                {
                    $(this).addClass('current');
                }
            });
        });
    </script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.