在HAML中的条件HTML标签

Question

在HAML中的条件HTML标签

21

我该如何编写HAML格式输出类似于用于跨浏览器定位的条件HTML标记的样式？

<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

如果我添加一个条件语句，它也会将整个页面包裹在条件语句中。我考虑使用 HAML 的 :plain 过滤器，在顶部手动添加 </html>，但这对我来说似乎不太理想。

- typeoneerror

2个回答

2

<!doctype html>
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
/ [if gt IE 9]><!
%html.no-js{:lang => "en"}
  / <![endif]

- Michael Durrant

相当不错！尽管最后一行有点不同。但可能仍然有效吗？ - typeoneerror

已测试，结果与您想要的HTML完全相同（除了明显没有对齐的<html>标签；不是什么大问题），并且具有语法一致性的优点。如果您使用Sublime Text，肯定会想要HTML2Haml插件-它完美地解析了我的整个布局页面，包括您想要的这个确切示例（我也在使用Boilerplate）。网页版本请访问http://html2haml.heroku.com/。 - iono

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matt · Accepted Answer

这三个内容很简单，因为它们只是普通的HTML注释，你可以使用Haml对条件注释的支持：

/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">

最后一个略有不同。将其分解，您想要的是两个评论围绕html开放标签，因此第二个评论是html元素的第一个内容。另外，您不能使用Haml语法进行条件注释，您必须使用文字注释。在Haml中，它看起来像：

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}
  <!--<![endif]-->

这将生成类似以下的HTML代码：

<!--[if gt IE 9]><!-->
<html class='no-js' lang='en'>
  <!--<![endif]-->

如果您愿意，您可以使用删除空格语法来使生成的HTML更像您的示例：

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
  <!--<![endif]-->

将所有东西放在一起：

!!!
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
  <!--<![endif]-->
  content here

这将产生：

<!DOCTYPE html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->
content here</html>

另一种技术是使用Haml的surround辅助函数：

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
  content here