How to use condition in gulp-file-include?

7

7GIT2021-04-07 10:20:00

gulp.js

7GIT, 2021-04-07 10:20:00

Tell me how to pass data to navbar depending on the page?
The project has two master pages (page1 and page2), which include blocks.

<!DOCTYPE html>
<html lang="ru" data-color-mode="dark">

<head>
  ...
</head>

<body class="layout">
  
  @@include('./parts/modules/header/header.html')

  @@include('./parts/modules/navbar/navbar.html')

  @@include('./parts/modules/body/main.html')
  
  @@include('./parts/modules/footer/footer.html')

</body>

</html>

The navbar block is a menu that changes depending on the page.

<div class="navbar">

  <!--Меню для page1-->
  <div class="navbar__list">
    <a href="#" class="navbar__item">nav-item1-for-page1</a>
    <a href="#" class="navbar__item">nav-item2-for-page1</a>
  </div>

  <!--Меню для page2-->
  <div class="navbar__list">
    <a href="#" class="navbar__item">nav-item1-for-page2</a>
    <a href="#" class="navbar__item">nav-item2-for-page2</a>
  </div>

</div>

You need to make something like this condition:
If page1 show navbar__list for page1 if not, do not show ...
Or, is it possible to somehow transfer data for your page via json?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

J

JavaDev, 2021-04-07
@7GIT

Include a file with a variable:

@@include('./parts/modules/navbar/navbar.html', {
    "page": "page1",
})

Conditions in navbar.html:

@@if (page === 'page1') {
    <span>Navbar for page 1</span>
}
@@if (page === 'page2') {
    <span>Navbar for page 2</span>
}

You can change the variable pageand its values as you like.