如何在jade中添加条件html标签？

发布于 2024-12-10 04:13:14 字数 1114 浏览 1 评论 0原文

在 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]-->

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，导致 IE 根本不显示任何内容。

有什么办法可以做到吗？

我想如果没有办法的话我会使用 javascript 解决方案。

原文

In jade, I want to put in a html tag conditional as per this method, which puts in

<!--[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]-->

at the top of a html file.

I tried

//[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
    ...

but jade ignores the html tag, and doesn't write in the end </html> tag. This is invalid html, and results in IE not displaying anything at all.

Is there any way of doing it?

I'm thinking I'll just use a javascript solution if there isn't a way.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屋顶上的小猫咪 2024-12-17 04:13:14

~~此方法有效，带有结束 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/kmyashiro/1140425#comment-675550~~

更新：

如所指出的通过 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

~~This method works, with the closing html tag:~~

~~from: https://gist.github.com/kmiyashiro/1140425#comment-675550~~

Update:

As pointed out by kumar-harsh this behaviour has now been depreciated, if you need this functionality you now should use regular html:

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

from: https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732

回复收藏 0 原文

野の 2024-12-17 04:13:14

这就是您要寻找的内容，它还会给出结束 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

This is what you're looking for, and it will also give the closing html tag.

!!! 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

回复收藏 0 原文

成熟稳重的好男人 2024-12-17 04:13:14

只需使用此语法，注意不同的缩进：

!!! 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
  …

Simply use this syntax, mind the different indentation:

!!! 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
  …

回复收藏 0 原文

如梦初醒的夏天 2024-12-17 04:13:14

在1.0.0版本（2013年12月22日发布）中，Jade不再解析注释内容，并且删除了对IE条件注释的支持（//如果 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]-->
  ...

请注意，前四个 html 元素是格式良好的 HTML 元素。最后一个使用 Jade 语法。最后一个注释也必须缩进。

在 Jade 版本 1.0.0 及更高版本中，可以安全地使用 HTML 注释，因为 Jade 将忽略以 < 字符开头的任何行。

您还可以访问这篇文章 Jade 中的 IE Conditional Comments 讨论了 Jade 版本 0.35.0 和 1.0.0 之间的差异。它还展示了使用 Jade mixins 机制进行条件注释的替代方法。

In version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and support for the IE conditional comments has been removed (//if lt IE 7 will not work as in version 0.35.0 and below).

The new approach is to use well formatted IE conditional comments. So in order to generate above IE conditional comments, Jade template will have to be as follows:

<!--[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]-->
  ...

Note that the first four html elements are well formatted HTML elements. The last one uses Jade syntax. Also the last comment  has to be indented.

With Jade version 1.0.0 and above it is safe to use HTML comments as Jade will ignore any line beginning with < character.

You can also visit this post on IE Conditional Comments in Jade which talks about difference between Jade version 0.35.0 and 1.0.0. It also shows alternative approach of using Jade mixins mechanism for conditional comments.

回复收藏 0 原文

你不是我要的菜∠ 2024-12-17 04:13:14

从版本 1.0.0 开始， // if 构造不再神奇了。逐字渲染 HTML（任何以 < 开头的行均由 Jade 按原样传输）或使用 mixin，按照 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')

Starting at version 1.0.0, the // if construct is not magical anymore. Either render HTML verbatim (any line starting with < is transmitted as-is by Jade) or use a mixin, as per Tom's blog cited in another answer:

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

回复收藏 0 原文

余厌 2024-12-17 04:13:14

很简单。

示例：

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]-->

JADE

//[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]

Very simple.

Exemple:

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]-->

JADE

//[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]

回复收藏 0 原文

泛滥成性 2024-12-17 04:13:14

据我所知你不能在jade中放置这样的html标签。为此，您需要包含一个 html 或在支持文本的标签中使用尾随 (.)，例如：

p. <html><script></script>....

So html tag does not support text so you can't do it.另一个解决方案是：

-if IE==6
    html.ie6
-if IE==7
    html.ie7
-if IE==8
    html.ie8
-if IE==9
    html.ie9
  head
  body
      h1 My sit

as far as i know you can not put html tags like this in jade. for this either you need to include an html or by using trailing (.) in tags which supports text like:

p. <html><script></script>....

So html tag does not support text so you cant do it. the other solution is:

-if IE==6
    html.ie6
-if IE==7
    html.ie7
-if IE==8
    html.ie8
-if IE==9
    html.ie9
  head
  body
      h1 My sit

回复收藏 0 原文

~没有更多了~

关于作者

当梦初醒

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

如何在jade中添加条件html标签？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如何在jade中添加条件html标签？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。