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

翡翠看起来像一个很酷的模板引擎,我想我会用它来做我的下一个项目。 但是,有些语法对我来说没有意义。

你怎么做到这一点:

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> 

       

网上收集的解决方案 "在Jade中使用HTML被认为是不好的做法?"

背景

实际上,通过使用3种语法,jade / pug语法允许纯HTML(或任何其他纯文本),正如您可以在项目网站的参考资料中看到的那样。

点语法 (也称为“ 标记中的块 ”)

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

pipe道语法 (也称为“ pipe道文本 ”)

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

标签语法 (也称为“ 在标签中embedded ”), “只需在标签后放置一些内容” ,也可以做到这一点

 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

海事组织,常识是最好的做法。 也许我会考虑使用一块原始的HTML在页面上插入一个小部件,即一个YouTubevideo或一个自定义的谷歌地图<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) 

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

 a: img 

变成

 <a><img/></a> 

取自官方文件 。

您也可以使用以下方法将纯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); }); 

});