node.js - preprocesador - ¿Se considera una mala práctica usar HTML en Jade?

programacion pug

Question

Jade parece un genial motor de creación de plantillas y creo que lo usaré para mi próximo proyecto. Sin embargo, parte de la sintaxis no tiene sentido para mí.

¿Qué obtienes al hacer esto?

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

en lugar de:

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

Entiendo que guardes algo de tipeo, pero me parece menos legible. Noté en la demostración en vivo de Jade que el html regular pasa a través de la traducción. Entonces, ¿se consideraría una mala práctica hacer algo como esto?

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

Answer 1

Fondo

En realidad, la sintaxis jade / pug permite HTML sencillo (o cualquier otro texto plano) mediante el uso de 3 sintaxis, como puede ver en la referencia en el sitio del proyecto .

sintaxis punto (también conocido como " Bloquear en una etiqueta ")

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

sintaxis de la tubería (también conocida como " Texto canalizado ")

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

la sintaxis de la etiqueta (también conocida como " Inline in a Tag "), "Simplemente coloque algo de contenido después de la etiqueta" , también puede hacer el truco

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

que representará

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

La pregunta

De vuelta a tu pregunta, tu muestra

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

podría escribirse tan simple como

.someClass
  h3= book.name

Creo que es mucho más legible, así que en ese caso deberías considerar una mala práctica para escribir HTML sin formato, pero no siempre.

IMO

OMI, el sentido común es la mejor buena práctica. Tal vez considere usar un fragmento de HTML en bruto para insertar un widget en la página, es decir, un video de youtube o un mapa de google personalizado <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>

Como se dijo anteriormente, aquí no tiene sentido usar la sintaxis del atributo . El resultado es casi el mismo, y es más rápido dejar el html en bruto.

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

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

Answer 2

Jade ahora proporciona sintaxis en línea para etiquetas anidadas:

a: img

se convierte en

<a><img/></a>

Tomado de la documentación oficial .

Answer 3

También puede utilizar el siguiente enfoque para usar html simple como motor de visualización.

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);
  });

});