如何在翡翠中放置一个有条件的html标签？
Posted
技术标签:
【中文标题】如何在翡翠中放置一个有条件的html标签？【英文标题】：How do I put a html tag conditional in jade? 【发布时间】：2011-12-07 02:49:49 【问题描述】：在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 解决方案。
【问题讨论】：
【参考方案1】：很简单。
示例：
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]
【讨论】：
【参考方案2】：从版本 1.0.0 开始，// if 构造 is not magical anymore。逐字呈现 HTML（任何以 Tom's blog：
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】：1.0.0 版本（2013 年 12 月 22 日发布）Jade 不再解析 cmets 内容，并且已删除对 IE 条件 cmets 的支持（//if lt IE 7 将无法像版本中那样工作0.35.0 及以下）。
新方法是使用格式良好的 IE 条件 cmets。所以为了生成上面的 IE 条件 cmets，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 语法。最后一条评论 <!--<![endif]--> 也必须缩进。
对于 Jade 1.0.0 及更高版本，使用 HTML cmets 是安全的，因为 Jade 将忽略任何以 < 字符开头的行。
您也可以访问 Jade 中的 IE Conditional Comments this post，其中讨论了 Jade 版本 0.35.0 和 1.0.0 之间的区别。它还展示了将 Jade mixins 机制用于条件 cmets 的替代方法。
【讨论】：
【参考方案4】：此方法有效，带有结束 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-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
【讨论】：
请注意，jade 1.0.0 中已弃用此功能。现在您必须编写普通的旧 HTML cmets。 See this issue 感谢 Kumar，我已经更新了答案以防止任何混淆。【参考方案5】：这就是你要找的，它也会给出结束的 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
【讨论】：
我认为这是适当的回复，因为这些条件显示为 cmets，而不是干净的读取代码。此外，您还获得了 html 结束标记。 这对我来说非常适合关闭html 标签。没有必要再看下去了。我要做的唯一更改是不再支持 !!! 5 doctype 声明。相反，请使用doctype html。见jade-lang.com/reference/doctype【参考方案6】：
只需使用这个语法，注意不同的缩进：
!!! 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
…
【讨论】：
你有一个结束的【参考方案7】：据我所知，您不能将这样的 html 标签放在玉中。为此，您需要包含一个 html 或在支持以下文本的标签中使用尾随 (.)：
p. <html><script></script>....
所以html标签不支持文本所以你不能这样做。另一个解决方案是：
-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
【讨论】：
IE 未定义为变量，您尚未在答案中声明它。以上是关于如何在翡翠中放置一个有条件的html标签？的主要内容，如果未能解决你的问题，请参考以下文章
在 Plotly Dash 图表中放置刻度标签 - Python