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

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

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

Подписаться 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

+1 ещё

Простой
Не применяются стили scss. Что делать?
- 1 подписчик
- 21 апр.
- 92 просмотра
0

ответов
Gulp.js

Сложный
Существует ли современный аналог gulp emitty?
- 1 подписчик
- 19 апр.
- 27 просмотров
0

ответов
Gulp.js

+1 ещё

Средний
Не запускается gulp,пишет: styles errored after 144ms. Как лечить такое?
- 1 подписчик
- 17 апр.
- 93 просмотра
0

ответов
Gulp.js

Сложный
Можно ли в gulp-rigger как-то прописать абсолютную ссылку на шаблон?
- 1 подписчик
- 12 апр.
- 27 просмотров
1

ответ
Вёрстка

+1 ещё

Средний
Есть ли отслеживание страницы при вёрстке в GULP?
- 1 подписчик
- 10 апр.
- 68 просмотров
1

ответ
Gulp.js

Простой
Не запускается gulp, проблема со шрифтами, как исправить?
- 1 подписчик
- 30 мар.
- 264 просмотра
0

ответов
Gulp.js

Средний
Почему gulp не видит изображения?
- 1 подписчик
- 28 мар.
- 43 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как научить компилятор js обрабатывать конструкцию опциональной цепочки '?.' в gulp?
- 1 подписчик
- 25 мар.
- 87 просмотров
2

ответа
Gulp.js

Простой
GULP -что за ошибки?
- 1 подписчик
- 21 мар.
- 86 просмотров
0

ответов
Веб-разработка

+1 ещё

Простой
Gulp browser-sync не обновляет страницу при сохранении и изменении, что делать?
- 1 подписчик
- 14 мар.
- 45 просмотров
0

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

Платформенный инженер

ИТ Плюс • Пермь

от 250 000 ₽

Senior Backend Engineer в агрегатор нейросетей (150к DAU)

NN Media

от 300 000 до 500 000 ₽

Тестировщик SberOs

Сбер • Санкт-Петербург

от 80 000 до 150 000 ₽

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

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

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Телеграм-Бот для выдачи конфигов VPN (VLESS/Reality)

25 апр. 2024, в 00:32

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

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?

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

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

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