HAML中的条件HTML标签

编程入门 行业动态 更新时间:2024-10-07 20:34:13
本文介绍了HAML中的条件HTML标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

如何将HAML格式化为输出类似于用于跨浏览器定位的条件HTML标记的样式?

How would I format HAML to output a style similar to the conditional HTML tags used for cross-browser targeting?

<!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> ,但这对我来说似乎并不理想。

If I add a conditional, it wraps entire page in the conditional as well. I thought about using HAML's :plain filter at the top and manually adding </html> at the bottom, but this seems less than ideal to me.

推荐答案

其中前三个非常简单,因为它们只是简单的HTML注释和您可以使用 Haml支持条件评论:

The first three of these are pretty simple, as they are just plain HTML comments and you can use the Haml support for conditional comments:

/[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中,这看起来像:

The last one is a bit different. Breaking it down, what you want is two comments surrounding the html opening tag, so the second comment is the first content of the html element. Also you can’t use the Haml syntax for conditional comments, you’ll have to use a literal comment. In Haml this would look like:

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

这将生成如下HTML:

This will produce HTML like this:

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

如果您想要,您可以使用空格删除语法,使生成的HTML更像您的示例:

If you wanted you could use the whitespace removal syntax to make the generated HTML more like your example:

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

把它放在一起:

Putting it all together:

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

产生:

which produces:

<!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的包围帮手:

An alternative technique would be to use Haml’s surround helper:

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

更多推荐

HAML中的条件HTML标签

本文发布于:2023-11-30 12:39:16,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:条件   标签   HAML   HTML

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!