Как менять некоторые части html при сборке шаблона?

#javascript #gulp #gulp_rigger

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

Ответы

Ответ 1

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

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

src/_nav.html


  

    
О нас
    
Каталог
    
Контакты
  



src/about.html

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


src/catalog.html

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


получается:

about.html


   

     
О нас
     
Каталог
     
Контакты
   



catalog.html


   

     
О нас
     
Каталог
     
Контакты
   



Ответ 2

Как менять некоторые части html при сборке шаблона?

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

Ответ

Использовать gulp-rigger не самое лучшее решение. Он не поддерживается совсем. У автора последний коммит был аж в сентябре 2015 года. На issues он не отвечает с того же времени. Это очень старый не поддерживаемый плагин не имеющий документации.
Есть альтернатива этому плагину - gulp-file-include Свою задачу, вы можете решить например вот так:
src/_nav.html

• О нас
• Каталог
• Контакты

src/about.html
@@include('_nav.html', {navAbout": "active", "navCatalog": "", "navContacts": ""})
src/catalog.html
@@include('_nav.html', {navAbout": "", "navCatalog": "active", "navContacts": ""})
получается:
about.html

• О нас
• Каталог
• Контакты

catalog.html

• О нас
• Каталог
• Контакты