Как сделать условие для активных меню в gulp-file-include?

Question

Sanyok R @sanyokdb

--save-dev

Gulp.js

Как сделать условие для активных меню в gulp-file-include?

Подскажите, как передать данные в navbar в зависимости от страницы?

<!DOCTYPE html>
<html lang="ru" data-color-mode="dark">
<head>
  ...
</head>
<body class="layout">
  
  @@include('header.html')
  @@include('navbar.html')
  @@include('main.html')
  @@include('footer.html')

</body>
</html>

Блок navbar - которое в зависимости от страницы меняется класс active.

<div class="navbar">
  <div class="navbar__list">
    <a href="#" class="navbar__item active">Главная</a>
    <a href="#" class="navbar__item">О нас</a>
    <a href="#" class="navbar__item">Услуги</a>
    <a href="#" class="navbar__item">Контакты</a>
  </div>
</div>

Спасибо за ответ

Вопрос задан более трёх лет назад
213 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Используйте шаблонизатор. Например nunjucks.

Answer 1 · 2021-07-22 07:11:22

<nav>
  <ul>
    <li class="@@activeclassHome">Home</li>
    <li class="@@activeclassAbout">About</li>
  </ul>
</nav>

@@include('_header.html', {activeclassHome": "active", "activeclassAbout": ""})
@@include('_header.html', {activeclassHome": "", "activeclassAbout": "active"})

stackoverflow

может конечно можно и через @@if сравнить переменные, чтобы класс применить нужный, но точно уже не скажу

Как сделать условие для активных меню в gulp-file-include?

Войдите на сайт