Include HTML с условиями?

Question

[HelpSophie]

Дано: есть футер, в нем есть блок, который на разных страницах разный, блок A, блок B, блок C.
Футер это отдельный файлик, который подключается с помощью include.

<include src="source/html-blocks/block_footer.html"></include>

Могу ли я как-нибудь вживить внутрь футера блоки с условиями? Как?
Например, на главной внутри футера должен быть блок A, на страницах каталога блок B, на всех других блок C.

Используется gulp и posthtml-include
таск:

gulp.task("html", function () {
  return gulp.src("source/*.html")
    .pipe(posthtml([
      include()
    ]))
    .pipe(gulp.dest("build"));
});

Comments

[WapSter]

С этим плагином вроде никак. Для этих целей существуют шаблонизаторы pug к примеру

[HelpSophie]

Тимур Турсунбаев, с ним как-то можно писать нормальный html, а не в зависимости от отступов?

[WapSter]

HelpSophie, да pug понимает html, но нужны для него отступы точно не знаю, не проверял. Есть html подобные шаблонизаторы, погуглите их масса разных.

Answer 1

[Сергей delphinpro]

Используйте полноценные шаблонизаторы, а не всякие суррогаты.
Например twig (gulp-twig для верстки)

{% if some_variable == 2 %}
  {% include "file1.twig" %}
{% else %}
  {% include "file2.twig" %}
{% endif %}

UPD
Почитал комменты. Twig это что называется like html шаблонизатор. Т.е. обычный html файл скормленный шаблонизатору не вызовет ошибок компиляции. Это значит, что вы можете по сути в свой html просто вставлять управляющие конструкции шаблонизатора.

Comments

[HelpSophie]

О, с виду, то что нужно. Спасибо большое!

[Вадим Кот]

Сергей delphinpro А почему используете twig.js? Ведь его название вводит путаницу с его php аналогом. Для компиляции в html ведь есть https://github.com/mozilla/nunjucks (для gulp https://www.npmjs.com/package/gulp-nunjucks-render ).

[Сергей delphinpro]

Вадим Кот, Это не аналог. Twig.js — это полноценный порт оригинала.
Может применяться как в среде nodejs, так и в браузерном javascript для рендера на клиенте.
Это широко известный шаблонизатор, для него есть плагины для большинства известных мне IDE и редакторов кода. Соответственно работает автодополнение, подсветка, рефакторинг и т.п. удобные плюшки.
Кроме того, используется во многих бэкэнд проектах. Согласитесь, что удобно, когда везде видишь один и тот инструмент?

[Сергей delphinpro]

Если еще нужно аргументов, то он довольно легко расширяется. Вы можете легко дописать любую возможность, будь то новые фильтр, функция или даже тег.

[Вадим Кот]

Сергей delphinpro, так расширяется и nunjucks, если нужны кастомные фильтры, теги. Для редакторов кода дополнения аналогично есть, кроме PHPStorm, но там он просто ассоциируется с twig.
Только nunjucks на гитхабе 6К звезд, twig.js - 1K. У gulp плагина для nunjucks почти 5К скачиваний в неделю, gulp-twig - 1.8K. Исходя из этого мой выбор пал в пользу nunjucks. Хотя они оба практически аналогичны и пришли из twig (jinja2).

[HelpSophie]

Сергей delphinpro, Сергей, здравствуйте!
Благодаря вам перешла на шаблонизаторы, попробовала Twig, сейчас перешла на Nunjucks.
Но снова уткнулась в проблему.
Если не сложно, посмотрите, пожалуйста Как получать данные из разных JSON для разных страниц и языковых версий (Nunjucks)?

Answer 2

[xmoonlight]

Чтобы проще было управлять кусками HTML, используйте includeHTML.