web-dev-qa-db-ja.com

JadeでHTMLを使用することは悪い習慣と見なされますか？

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>
node.jsexpresspugtemplate-engine
35
n0pe

バックグラウンド

実際、jade/pug構文では、3つの構文を使用してプレーンHTML（またはその他のプレーンテキスト）を使用できます。これは、 プロジェクトのサイトのリファレンス で見ることができます。

ドット構文（「 タグ内のブロック 」とも呼ばれます）

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>

タグの構文（「 タグ内のインライン ）」とも呼ばれます、」タグの後のコンテンツ」、トリックもできます

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ビデオまたはカスタムの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>

上記のように、ここでは 属性構文 を使用する意味がありません。結果はほぼ同じで、生の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)
75
laconbass

Jadeは、ネストされたタグのインライン構文を提供するようになりました。

a: img

になる

<a><img/></a>

公式ドキュメント から取得。

7
Nelo Mitranim

次のアプローチを使用して、プレーン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);
  });

}）;

1
nilakantha singh deo