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>

Answer 1

背景

实际上，jade / pug语法通过使用3种语法允许纯HTML（或任何其他纯文本），如the reference on the project's site中所示。

点语法（也称为“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 a 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的不良做法，但并非总是如此。

IMO

IMO，常识是最好的做法。也许我会考虑使用一大块HTML来在页面上插入一个小部件，即YouTube视频或自定义谷歌地图＆lt; iframe＆gt ;.

<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&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)

Answer 2

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

a: img

变成

<a><img/></a>

取自official documentation。

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

}）;

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

3 个答案:

背景

问题

IMO