在Jade中使用HTML被认为是一种不好的做法吗？

Question

Jade看起来像是一个很酷的模板引擎，我想用它来做我的下一个项目。然而，其中一些语法对我来说不太合理。

通过这样做，您会得到什么：

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

相比之下：

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

我知道你想要省点打字，但对我来说这似乎不太易读。我注意到在Jade的实时演示中，常规的html可以直接通过翻译。那么像这样做是否被认为是不好的实践呢：

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

- user623990

---

ul: li: a(href="#book-a") Book A 看起来非常易读。你只是打算使用Jade进行模板逻辑吗？ - Blender

@Blender，单独使用它还不错。但是在更大的页面中，我觉得我会迷失方向。我以前从未使用过Jade，所以我可以学习适应它。但我想知道我的上述解决方案是否明智。 - user623990

Jade 对我来说似乎很糟糕，因为与其他模板引擎相比它非常缓慢且不易读取。此外，还有一个巨大的学习曲线。EJS 快速、简单，没有学习曲线，就像 PHP 一样。 - Gabriel Llamas

在我看来，如果你有很多额外的尖括号和双倍于实际需要的标签，那么很容易迷失方向。当你删除多余的噪音时，我不明白为什么会变得更难阅读。 - Dave Newton

你能否使用Jade仅呈现HTML的动态部分，而不干扰其余部分？ - Muhammad Umer

Answer 1

背景

实际上，Jade/Pug语法通过使用三种语法允许使用纯HTML（或任何其他纯文本），如您可以在该项目网站的参考资料中看到。

点号语法（也称为“标签中的块”）

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

管道语法（也称为“管道文本”）

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

tag syntax（也称为“内联于标签中”）“只需在标签后面放置一些内容”，也可以起到作用。

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>

如上所述，在此不使用attribute syntax没有意义。结果几乎相同，并且更快地保留原始的html。

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)

- laconbass

---

@weisjohn 感谢您关于链接更改的建议。已更新答案并删除了现在失效的链接（指向visionmedia repo的链接）。 - laconbass

Answer 2

Jade现在提供嵌套标签的内联语法：

a: img

转化为

<a><img/></a>

本文内容摘自官方文档。

- Nelo Mitranim

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

});

- nilakantha singh deo