Является ли плохая практика использовать HTML в Jade?

Jade выглядит как классный шаблонный движок, и я думаю, что буду использовать его для своего следующего проекта. Однако некоторые из синтаксисов для меня не имеют смысла.

Что вы получаете, делая это:

ul
  li
    a(href="#book-a") Book A

вместо:

<ul>
  <li><a href="#book-a">Book A</a></li>
</ul>

Я понимаю, что вы сохраняете какую-то типизацию, но мне кажется менее читаемой. Я заметил в Jade live demo, что обычный html проходит прямо через перевод. Так что было бы плохой практикой сделать что-то вроде этого:

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

Ответ 1

Фон

На самом деле синтаксис jade/pug позволяет использовать обычный HTML (или любой другой простой текст) с помощью трех синтаксисов, как вы можете видеть в ссылку на проект сайт.

Синтаксис

dot (также известный как Block in a Tag)

ul.
  <li><a href="#book-a">Book A</a></li>
  <li><a href="#book-b">Book B</a></li>

синтаксис труб (также известный как Piped Text")

ul
  | <li><a href="#book-a">Book A</a></li>
  | <li><a href="#book-b">Book B</a></li>

синтаксис тегов (также известный как " Inline in the Tag" ), "Просто разместите контент после тег", также может сделать трюк

ul
  li <a href="#book-a">Book A</a>

который отобразит

<ul><li><a href="#book-a">Book A</a></li></ul>

Вопрос

Вернемся к вашему вопросу, ваш образец

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

можно было бы написать так же просто, как

.someClass
  h3= book.name

Это гораздо более читаемый, я думаю, поэтому в этом случае вам следует подумать о плохой практике написания необработанного HTML, но не всегда.

ММО

ИМО, здравый смысл - лучшая хорошая практика. Возможно, я бы рассмотрел использование необработанного фрагмента HTML для вставки виджета на странице, то есть видео с YouTube или пользовательской карты google <iframe> .

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>

Как было сказано выше, здесь нет смысла использовать синтаксис атрибута . Результат почти такой же, и быстрее выйдет из сырого html.

iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed")

iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)

Ответ 2

Теперь Jade предоставляет встроенный синтаксис для вложенных тегов:

a: img

превращается в

<a><img/></a>

Взято из официальной документации .

Ответ 3

вы также можете использовать следующий подход, чтобы использовать простой html в качестве механизма просмотра.

app.set('views', path.join(__dirname, '/path/to/your/folder'));
app.set("view options", {layout: false});
app.engine('html', function(path, opt, fn) {
  fs.readFile(path, 'utf-8', function(error, str) {
      if (error)
          return str;
      return fn(null, str);
  });

});