Как использовать условие в 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 передать данные для соей странички?

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

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

Подписаться 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 искал переменные для себя, которых не было. теперь осталось свои файлы настроить правильно. спасибо

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

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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 13 часов назад
- 40 просмотров
1

ответ
Gulp.js

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

ответов
JavaScript

+2 ещё

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

ответ
Gulp.js

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

ответа
CSS

+2 ещё

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

ответ
Gulp.js

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

ответов
Gulp.js

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

ответ
Gulp.js

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

ответ
Gulp.js

Средний
Настраивал Gulp 5 по видео жеки как решить, ошибка выглядит так TypeError [ERR_INVALID_ARG_TYPE]: The «path» argument must be of type string or an i?
- 1 подписчик
- 30 авг.
- 158 просмотров
1

ответ
Gulp.js

Простой
При сборке проекта GULP плодится вот эта ошибка, как понять какой плагин устарел?
- 1 подписчик
- 02 авг.
- 117 просмотров
1

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

Системный аналитик

ИТ-Холдинг Т1

от 350 000 ₽

Архитектор ИС

ИТ-Холдинг Т1

от 400 000 ₽

CTO / Tech Lead (продуктовый start-up категории Health & Fitness)

KOLSA

от 300 000 ₽

Обработать фото в стиле ASCII

22 нояб. 2024, в 08:04

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

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

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?

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

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

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