web-dev-qa-db-ja.com

htmlタグを条件付きでjadeに配置するにはどうすればよいですか？

jade では、 this method のように条件付きのhtmlタグを入れたいと思います。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

htmlファイルの先頭にあります。

私は試した

//[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]
//[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]
//[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]
//[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]
  head
    ...

しかし、jadeはhtmlタグを無視し、最後に書き込みを行いません</html> 鬼ごっこ。これは無効なhtmlであり、結果としてIE何も表示されません。

それを行う方法はありますか？

方法がない場合は、JavaScriptソリューションを使用することを考えています。

htmlinternet-explorernode.jspug
26
zlog

このメソッドは、終了htmlタグで機能します。

!!! 5
//if lt IE 7
    <html class="no-js lt-ie9 lt-ie8 lt-ie7">
//if IE 7
    <html class="no-js lt-ie9 lt-ie8">
//if IE 8
    <html class="no-js lt-ie9">
// [if gt IE 8] <!
html(class="no-js", lang="en")
    // <![endif]
    head
        title= title

    body!= body

差出人： https://Gist.github.com/kmiyashiro/1140425#comment-67555

更新：

kumar-harsh で指摘されているように、この動作は現在減価償却されています。この機能が必要な場合は、通常のhtmlを使用する必要があります。

<!--[if IE]>
  <html class="ie">
<![endif]-->
<![if !IE]>
  <html class="not-ie">
<![endif]>
</html>

差出人： https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732

21
Stephen

これはあなたが探しているものであり、それはまた終了htmlタグを与えます。

!!! 5
//[if lt IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8 lt-ie7"><![endif]
//[if IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8"><![endif]
//[if IE 8]><html lang="en" class="no-js oldie lt-ie9"><![endif]
//[if gt IE 8]><!
html(class='no-js', lang='en')
  //<![endif]
  head
17
Stacey Cordoni

この構文を使用するだけで、異なるインデントに注意してください。

!!! 5
| <!--[if lt IE 7]> <html class="ie6 oldie" lang="en"> <![endif]-->
| <!--[if IE 7]>    <html class="ie7 oldie" lang="en"> <![endif]-->
| <!--[if IE 8]>    <html class="ie8 oldie" lang="en"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
head
  …
11
Frederic

バージョン1.0.0（2013年12月22日にリリース）では、Jadeはコメントコンテンツを解析せず、IE条件付きコメントが削除されました（//if lt IE 7はバージョン0.35.0以下のように機能しません）。

新しいアプローチは、適切にフォーマットされたIE条件付きコメントを使用することです。したがって、上記のIE条件付きコメントを生成するには、Jadeテンプレートは次のようにする必要があります。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
html(class="") 
  <!--<![endif]-->
  ...

最初の4つのhtml要素は適切にフォーマットされたHTML要素であることに注意してください。最後のものはJade構文を使用します。また、最後のコメント<!--<![endif]-->をインデントする必要があります。

Jadeバージョン1.0.0以降では、Jadeは<文字で始まる行を無視するため、HTMLコメントを使用しても安全です。

また、 この投稿 on IE Jadeの条件付きコメントで、Jadeバージョン0.35.0と1.0.0の違いについて説明しています。条件付きコメントにJadeミックスインメカニズムを使用する代替アプローチ。

8
Tom

バージョン1.0.0以降、// ifコンストラクト もう魔法ではありません 。 HTMLを逐語的にレンダリングする（<で始まる行はJadeによってそのまま送信されます）か、別の回答で引用されている Tomのブログ のようにミックスインを使用します。

mixin ie(condition)
    | <!--[!{condition}]>
    block
    | <![endif]-->

doctype html
html
  head
    title= My title
    +ie('if IE 8')
      link(rel='stylesheet', href='/stylesheets/style-ie8-1.css')
3
DomQ

とてもシンプルです。

例：

[〜＃〜] html [〜＃〜]

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->

[〜＃〜]翡翠[〜＃〜]

//[if lt IE 7]>
  <html class="ie ie6" lang="en"> <![endif]
//[if IE 7]>
  <html class="ie ie7" lang="en"> <![endif]
//[if IE 8]>
  <html class="ie ie8" lang="en"> <![endif]
1
Ronald Araújo