Для создания условия для активных меню в gulp-file-include вам потребуется использовать три вещи: переменные, шаблоны и операторы условий.
Шаблоны
Первым шагом вам нужно создать шаблонный файл, который будет содержать ваше меню. Например, вам нужно создать файл menu.html, в котором будет разметка вашего меню.
<ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> <!-- Добавьте дополнительные ссылки меню, если необходимо --> </ul>
Переменные
Затем, в вашем gulpfile.js, вы должны создать переменную, которая будет хранить информацию о текущем активном пункте меню. Например, если вы хотите, чтобы ссылка "About" была активна, ваш код может выглядеть следующим образом:
const activeMenuItem = 'about';
Операторы условий
Далее, используя функциональность gulp-file-include, вы можете добавить операторы условий в ваш шаблонный файл. Например, вы можете использовать оператор if и проверить, является ли текущая ссылка активной ссылкой, и добавить класс active для активных элементов:
<ul>
<li<% if (activeMenuItem === 'home') { %> class="active"<% } %>><a href="/home">Home</a></li>
<li<% if (activeMenuItem === 'about') { %> class="active"<% } %>><a href="/about">About</a></li>
<li<% if (activeMenuItem === 'contact') { %> class="active"<% } %>><a href="/contact">Contact</a></li>
<!-- Добавьте дополнительные ссылки меню, если необходимо -->
</ul>
Вывод
Когда вы запустите gulp с задачей, в которую включен gulp-file-include, он будет компилировать ваш шаблонный файл menu.html с учетом переменной activeMenuItem. Например, если вы хотите, чтобы ссылка "About" была активной, компилированный результат будет выглядеть следующим образом:
<ul> <li><a href="/home">Home</a></li> <li class="active"><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> <!-- Добавьте дополнительные ссылки меню, если необходимо --> </ul>
Таким образом, вы создали условие для активных меню с использованием gulp-file-include.