Какой самый простой способ шаблонизации html-страниц (js)?

Question

[Spaceoddity]

Не хочется работать с простыней, а собирать из отдельных блоков.
npm, yarn и вебпак подключены.

Comments

[ⓒⓢⓢ]

pug?

[Spaceoddity]

JRK_DV, сейчас покурю, конечно. Но хотелось чего-то совсем простого. Типа директивы \@import (кстати, а не будет ли она работать?)

[ⓒⓢⓢ]

Spaceoddity, похожее на импорт

div.page.page--home
  include ../includes/layer/page-footer

и как приятные плюшки миксины, базовые блоки, js и т.д.

- var Navigation = ['Account', 'Basket', 'Logout'];
div.navigation
  each Link in Navigation
    a(href="#")= Link

На выходе:

<div class="navigation">
  <a href="#">Account</a>
  <a href="#">Basket</a>
  <a href="#">Logout</a>
</div>

Но лучше доку посмотреть, переписывать её незачем

[Сергей delphinpro]

Spaceoddity, Вам для верстки, не для сайта, я так понимаю.

Если хочется совсем простого и эйчтиэмэльного, посмотрите на gulp-twig (или другие порты этого шаблонизатора под нужную вам систему)

Как раз то что вам нужно:

{% include './blocks/header.twig' %}
<div class="my-page">
  bla
</div>
{% include './blocks/footer.twig' %}

Ну и остальные плюшки постепенно освоите в процессе использования.

[Сергей delphinpro]

А все эти паги от лукавого =)) ни к чему учить еще один синтаксис...

Answer 1

[Роман]

самый простой? этот:

https://ru.wikipedia.org/wiki/SSI_(программирование)

Answer 2

[token]

https://github.com/megafonweblab/histone-javascript/ не благодарите.

Answer 3

[Александр Маргинал]

Twig js самый простой и мощный инструмент

Comments

[Александр Маргинал]

А ещё можно пойти за html import, но там кажется все плохо и от него избавился даже Google после выхода polymer 3

Answer 4

[Johny Smith]

haml
slim
mustache
slm
pug

Answer 5

[Dima Polos]

Никто не сказал про nunjucks)