Как использовать условие в gulp-file-include?

Question

7GIT @7GIT

Gulp.js

Как использовать условие в gulp-file-include?

Подскажите, как передать данные в navbar в зависимости от страницы?
В проекте созданы две страницы-шаблона (page1 и page2), в которые инклюдятся блоки.

<!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>

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

<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>

Нужно сделать что-то вроде такого условия:
Если page1 показать navbar__list для page1 если нет не показывать...
Или, можно-ли как-то через json передать данные для соей странички?

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

Комментировать

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

Решения вопроса 1

10 комментариев

7GIT @7GIT Автор вопроса
То что нужно...
А то я так делал, жутко не удобно...

@@include('./parts/modules/navbar/navbar.html', { navbar__item: '<a href="#">item</a><a href="#">item</a>' })
Написано более трёх лет назад
dan_mk @dan_mk
а можно ли использовать две разные переменные в одном файле для разных @@if?
пытался сделать такую конструкцию. и не срабатывала вторая переменная button.
El отрабатывала в любом случае. если менял el на button(оставлял одну переменную на весь файл), то button работала.
когда были переменные для разных @@if, то в консоли была ошибка что button не существует, хотя передавал так же, как и el + если просто писать @@button(вне @@if), то она находится.

<div class="swiper @@class"> <b>@@if(button === 'yes')</b> { <button class="swiper__button swiper__button--to-left @@class__button @@class__button--to-left"> @@include("./assets/icons/arrow_left.svg") </button> } <div class="swiper__container-outer @@class__container-outer"> <ul class="swiper__container @@class__container"> @@if (el === "pet"){ @@loop('./partials/components/swiper/_item-pet.html', "@@pathtoJSON")} @@if (el === "testimonial"){ @@loop('./partials/components/swiper/_item-testimon.html', "@@pathtoJSON")} @@if (el === "howitworks"){ @@loop('./partials/components/swiper/_item-howitworks.html', "@@pathtoJSON")} </ul> </div>
Написано более трёх лет назад

YavaDev @YavaDev

dan_mk, да, можно. Вот пример как я делал:
Инклуд:

@@include('_sidebar.html', {
    "isActive": "faq",
    "showSocial": false,
})

Шаблон:

<ul>
    <li>
        @@if (isActive === 'about') {
            <span>About us</span>
        }
        @@if (isActive !== 'about') {
            <a href="about.html">About us</a>
        }
    </li>
    <li>
        @@if (isActive === 'faq') {
            <span>FAQs</span>
        }
        @@if (isActive !== 'faq') {
            <a href="faq.html">FAQs</a>
        }
    </li>
    <!-- дальше много таких li -->
</ul>
@@if (showSocial === true) {
    <div class="sidebar-social">
        <!-- Много кода -->
    </div>
}

Во второй строчке у вас вижу тег <b> который оборачивает @@if. Скорее всего из-за этого и не работает. Уберите его.
<b>@@if(button === 'yes')</b> {

Написано более трёх лет назад

dan_mk @dan_mk

YavaDev, тегом b я хотел указать на форуме нужную строку. так его в разметке нет. спасибо, попробую ваш совет.

Написано более трёх лет назад
7GIT @7GIT Автор вопроса
YavaDev, а не подскажите ещё, как можно подключить json.
Не могу разобраться, как правильно подключить.

 @@include('_link.html', 'data.json')  <a href="#">@@link-text</a>  [ { "link-text": "My post title" } ]

Или это работает только через @@loop("loop-article.html", "data.json")?
Написано более трёх лет назад
YavaDev @YavaDev

7GIT, я не использовал у себя в проектах json файлы, всегда писал всё в коде. Поэтому здесь опыта у меня нет. Но глянул только, что документацию и не нашел там возможности делать @@include с json файлом. Скорее всего json файл можно передавать только в @@loop, как вы и написали.

Написано более трёх лет назад
dan_mk @dan_mk
YavaDev, не могу понять в чем проблема. сделал как у вас в посте.
импортнул в существующий проект файлы с разметкой из вашего поста. все работает, но в консоль залетает постоянно ошибка

[12:00:56] 'handleHTML' errored after 121 ms [12:00:56] Error in plugin "gulp-file-include" Message: isActive is not defined: (isActive === 'about') Details: domainEmitter: [object Object] domainThrown: false

кажется один только раз сработало все без ошибки, но я пропустил этот момент.

в gulpfile функция выглядит так

function handleHTML() { return src(path.src.html) .pipe( fileInclude({ basepath: "./" + sourceFolder + "/", }), ) .pipe(webpHTML()) .pipe(dest(path.build.html)) .pipe(browserSync.stream()); }
Написано более трёх лет назад
YavaDev @YavaDev

dan_mk, isActive is not defined: (isActive === 'about') эта ошибка говорит о том, что переменная isActive не определенна.
Скорее всего вы вставляете данный шаблон в разных местах и где-то забыли передать переменную.
Проверьте все инклуды данного шаблона.

Написано более трёх лет назад

dan_mk @dan_mk

YavaDev, вставляю шаблон в одном месте.
Повторюсь, все работает. переменные в тегах h4 отрабатывают, в условиях переменные тоже отрабатывают, но постоянно вылетает ошибка. Сборщик с такой ошибкой запускаться не хочет,
Уже отключил все свои инклюды, оставив один.
вот так вызываю

@@include('_sidebar.html', {
    "isActive": "about",
    "showSocial": true,
})

вот содержимое.

<h3 class="title-text">test</h3>

<h4 class="title-text">isActive = @@isActive</h4>
<h4 class="title-text">showSocial = @@showSocial</h4>
<ul>
  <li>
    @@if (isActive === 'about') {
    <h3 style="color: red; font-size: 24px">About us</h3>
    } @@if (isActive !== 'about') {
    <a href="about.html"><h4>About us</h4></a>
    }
  </li>
  <li>
    @@if (isActive === 'faq') {
    <h3 style="color: red; font-size: 24px">FAQs</h3>
    } @@if (isActive !== 'faq') {
    <a href="faq.html"><h4>FAQs</h4></a>
    }
  </li>
  <!-- дальше много таких li -->
</ul>
@@if (showSocial === true) {
<div class="sidebar-social">
  <!-- Много кода qweqweqeqweqe -->
</div>
}

Написано более трёх лет назад

dan_mk @dan_mk

YavaDev, разобрался. я хранил в корне эти файлы. соответственно, они тоже обрабатывались. и голый _sidebar искал переменные для себя, которых не было. теперь осталось свои файлы настроить правильно. спасибо

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Gulp.js

Простой
Gulp livereload не перезагружает браузер, как исправить?
- 1 подписчик
- 25 нояб.
- 30 просмотров
1

ответ
Gulp.js

Простой
Gulp сборка, изображения при автоматическом переносе в dist не читабельные, как исправить?
- 1 подписчик
- 24 нояб.
- 63 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 180 просмотров
2

ответа
Gulp.js

Средний
Как сделать чтобы gulp не ломал картинки любого формата при сжатии?
- 1 подписчик
- 06 нояб.
- 82 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Не обновляется styles в сборке gulp?
- 2 подписчика
- 27 сент.
- 127 просмотров
1

ответ
Gulp.js

Простой
Did you forget to signal async completion? gulpv5 выдает ошибку, почему?
- 1 подписчик
- 08 сент.
- 66 просмотров
2

ответа
CSS

+2 ещё

Простой
Перестает обновляться style.min.css в сборке gulp. Почему?
- 1 подписчик
- 07 сент.
- 101 просмотр
1

ответ
Gulp.js

Средний
Что делать если не могу задеплоить свой архив на удалённый ftp сервер на Gulp 5?
- 1 подписчик
- 31 авг.
- 109 просмотров
0

ответов
Gulp.js

Простой
Почему не подключаются шрифты в сборке gulp?
- 1 подписчик
- 31 авг.
- 57 просмотров
1

ответ
Gulp.js

Сложный
Что делать если при создании zipархива в gulp5 по сборке www.youtube.com/@FreelancerLifeStyle у меня ошибки в терминале не появляются ,но zip не появ?
- 1 подписчик
- 30 авг.
- 137 просмотров
1

ответ
Показать ещё Загружается…

Ведущий системный аналитик

Сбер • Москва

от 240 000 ₽

DevOps Engineer/System Administrator

Freuders

от 4 000 $

Senior PHP Программист

Автомакон

от 287 000 до 440 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

1000 руб./за проект

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Answer 1 · 2021-04-07 10:35:46

Инклудим файл с переменной:

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

Условия в navbar.html:

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

Переменную page и ее значения можете менять как угодно.

Как использовать условие в gulp-file-include?

Войдите, чтобы написать ответ

Минуточку внимания

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