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

Posted 2023-03-03

技术标签:

【中文标题】在 Jade 中使用 HTML 是不是被认为是不好的做法？【英文标题】：Is it considered bad practice to use HTML in Jade?在 Jade 中使用 HTML 是否被认为是不好的做法？ 【发布时间】：2013-04-12 05:52:45 【问题描述】：

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>

【问题讨论】：

ul: li: a(href="#book-a") Book A 看起来很可读。您只是打算将 Jade 用于模板逻辑吗？ @Blender，是的，它本身还不错。然而，在更大的页面中，我觉得我会迷路。我以前从未使用过 Jade，所以我可以学会习惯它。但我想知道我的上述解决方案是否聪明。 Jade 真的可以让你在 Jade 模板中插入 HTML 吗？我认为使用 Jinja2 之类的 Node 会更开心：nunjucks.jlongster.com @Blender，我想是的。我使用了他们的演示站点并放入了一些原始 html，然后看到它在输出中是原始的。 Jinja2 看起来棒极了！它与 express 配合得很好（这就是让我开始使用 Jade 的原因）。 jade 对我来说似乎很糟糕，因为与其他模板引擎相比，它是 sloooow 并且可读性较差。此外，还有一个很大的学习曲线。 EJS 快速、简单、没有学习曲线，就像 php。 【参考方案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，常识是最好的做法。也许我会考虑使用原始 HTML 块在页面上插入小部件，即 youtube 视频或自定义谷歌地图。

<iframe   frameborder="0" scrolling="no" margin margin 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   src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>

如上所述，这里使用attribute syntax 没有意义。结果几乎相同，并且更快地离开原始 html。

iframe(, , frameborder="0", scrolling="no", margin, margin 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(, , src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)

【讨论】：

大声笑“我的声誉不足以发布超过 2 个链接”，所以我将在此处链接 attribute syntax。我希望我对 *** 的第一个回答是尊重和有用的。 np @MaxMackie，多亏了你，现在我编辑了帖子以添加该链接；） @weisjohn 感谢您对链接更改的建议。用新的 url 更新了答案，并删除了现在损坏的链接（指向 visionmedia repo 的链接）。【参考方案2】：

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

);

【讨论】：

【参考方案3】：

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