`
aideehorn
  • 浏览: 259175 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
阅读更多

Haml 转化成 html 的网络工具 http://lab.hamptoncatlin.com/play/with/haml Haml是一种用来描述任何XHTML web document的标记语言,它是干净,简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems,比如PHP,ERB(Rails的模板系统),ASP。不过, haml避免了直接coding XHTML到模板,因为它实际上是一个xhtml的抽象描述,内部使用一些code来生成动态内容。 它有什么特点呢? 1. 空格标识层次嵌套关系 2. 良好的标签格式 3. DRY(Don’t repeat yourself) 4. 遵循CSS标准 5. 集成了Ruby代码 6. 用.haml扩展名代替了rails模板(.rhtml) Haml的使用 Haml的使用有两种方式:作为Ruby on Rails的插件来使用。作为一个独立的Ruby module来使用。 Rails 插件方式:这是使用Haml最常用的方式。当然,安装Haml的方式,就是Rails里常用的插件安装方式了: ./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable 一旦安装好以后,你必须以.haml为扩展名来使用。你在ERB模板里可以使用的实例变量在Haml里照样可以使用,Helper方法也不例外。比如: # file: app/controllers/movies_controller.rb class MoviesController < ApplicationController def index @title = "Teen Wolf" end end # file: app/views/movies/index.haml #content .title %h1= @title = link_to 'Home', home_url 上面的haml代码会被编译为:

Teen Wolf

Home

Ruby Module方式: Haml可以完全从rails和ActionView里拿出来单独使用。下下面这样做: gem install haml 然后用Haml::Engine: engine = Haml::Engine.new("%p Haml code!") engine.render #=> "

Haml code!

\n" XTML Tags:下面这些字符会渲染出相应的xhtml tag % 百分号符号是一行的开始,紧接着一个元素的名字,然后后面跟一个可选的修饰语(见下例),比如一个空格,或一行文本等,就会被渲染到这个元素里成为其内容。它会创建一个这样的形式:.。举个例子: %one %two %three Hey there 会被编译为: Hey there 对于任何一个有效的标准元素字符,Haml都会自动的为其生成闭合标签。 {} 括号内的Ruby hash是用来指名一个元素的属性。它作为一个ruby hash的字面量,局部变量也可以在其中使用。Hash放在被定义好的标签之后,基本上就和Ruby语法一样,看例子: %head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" } 编译后为: <script src="/admin/blogs/284034/javascripts/script_9" type="text/javascript"></script> [] 方括号跟在一个标签定义之后,包含一个Ruby 对象,被用来为这个标签设置class和id属性。这个class的值被设置为这个对象的类名(两个单词用下划线形式表示,而不是驼峰表示方法)并且id的值被设置为对象的类名加上这个对象的id,也是下划线连接。因为一个对象的id通常是朦胧的实现细节,这是表现model的实例最有用的元素了(这句是不是翻译的太差?)。看例子: # file: app/controllers/users_controller.rb def show @user = CrazyUser.find(15) end # file: app/views/users/show.haml %div[@user] %bar[290]/ Hello! 转换为:

Hello!

这是基于RailsConf Europe 2006 大会上DHH提出的SimpleHelpful语法 / 这个斜线字符,放在一个tag定义之后,可以让这个标签自我关闭。例子: %br/ %meta{'http-equiv' => 'Content-Type', :content => 'text/html'}/ 转换为:
有一些标签(meta, img, link, script, br, and hr tags等)当没有内容的时候会自动关闭。看例子: %br %meta{'http-equiv' => 'Content-Type', :content => 'text/html'} 转换为:
. and # 这两个符号是从CSS里借鉴来的。他们被用来表示一个元素的class和id属性。看例子: %div#things %span#rice Chicken Fried %p.beans{ :food => 'true' } The magical fruit %h1.class.otherclass#id La La La 转换为:

Chicken Fried

The magical fruit

La La La

注意h1标签。两个点连用,第一个表示class属性,第二个则是用来链接那两个字符的空格。

 

#content .articles .article.title Doogie Howser Comes Out .article.date 2006-11-05 .article.entry Neil Patrick Harris would like to dispel any rumors that he is straight

 

转换为:

Doogie Howser Comes Out
2006-11-05
Neil Patrick Harris would like to dispel any rumors that he is straight

Implicit Div Elements(隐藏DIV)因为Div这个标签经常被用,所以你仅用.and#这两个符号来定义class和id的时候,一个div元素就会被自动的使用。例如: #collection .item .description What a cool item! 和下面的这个相似: %div{:id => collection} %div{:class => 'item'} %div{:class => 'description'} What a cool item! 都会被转换为:

What a cool item!

= 等号符号用来插入ruby 代码的值到模板中。 %p= "hello" 和下面的这种形式不太一样: %p = "hello" XHTML Helpers No Special Character 如果没有这些特定的字符打头的话,返回的只是一个普通的文本,比如下面的Wow this is cool! %gee %whiz Wow this is cool! 转换为: Wow this is cool! !!! 当用haml来表示一个XHTML文档,你可以通过!!!这个符号来自动生成文档类型和XML prolog。比如: !!! XML !!! %html %head %title Myspace %body %h1 I am the international space station %p Sign my guestbook 转换为:

I am the international space station

Sign my guestbook

你也可以在!!!后面加版本号。比如: !!! 1.1 转换为:

and !!! Strict

如果你不想用UTF-8的编码,你也可以指定你想要的编码: !!! XML iso-8859-1 转换为:

/ 如果这个斜线写在打头的位置,则会注释这行。 %billabong / This is the billabong element I like billabongs! 转换为:

I like billabongs! 放在代码的上方,则注释整个代码: / %p This doesn't render... %div %h1 Because it's commented out! 转换为:

/[if IE] %a{ :href => 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox 转换为:

Get Firefox

\ 反斜杠符号允许字符串前面的第一个符号作为纯文本使用。 %title = @title \- MySite 转换为: | 管道符可以允许把输出为一行的内容写成多行。 %whoo %hoo I think this might get | pretty long so I should | probably make it | multiline so it doesn't | look awful. | %p This is short. is compiled to: I think this might get pretty long so I should probably make it multiline so it doesn't look awful. : 冒号是指定一个过滤器。冒号后面是你要使用的那个过滤器的名字。For example, %p :markdown Textile ======= Hello, *World* 转换为:

Textile

Hello, World

Haml支持的过滤器定义 plain ruby preserve erb sass redcloth textile markdown Ruby evaluators(执行Ruby代码,前面说了) = 等号允许执行ruby代码并返回一个值作为显示文本。 %p = ['hi', 'there', 'reader!'].join " " = "yo" 编译为:

hi there reader! yo

你也能使用双等号来更容易的嵌入ruby代码。比如: %p == 1 + 1 = #{1 + 1} 编译为:

1 + 1 = 2

- 横杠符号,很有性格,可以使文本变为”silent script”:意思是,代码可以执行,但并不输出任何东西。 这里不推荐使用这种扩展,所有的逻辑代码都应该限制在controller,helper或partials里 For example: - foo = "hello" - foo << " there" - foo << " you!" %p= foo 转换为:

hello there you!

Blocks Ruby中的块,也不需要明显的去关闭,haml会让它自动关闭。这写都是基于缩进的。千万记住要缩进两个空格。 - (42...47).each do |i| %p= i %p See, I can count! 编译为:

42

43

44

45

46

Another example: %p - case 2 - when 1 = "1!" - when 2 = "2?" - when 3 = "3." is compiled to:

2?

< -# 相当于一个注释吧,跟在这个符号后面的文本无法输出。 For example: %p foo -# This is a comment %p bar is compiled to:

foo

bar

h2>Other Useful Things Helpers Haml offers a bunch of helpers that are useful for doing stuff like preserving whitespace, creating nicely indented output for user-defined helpers, and other useful things. The helpers are all documented in the Haml::Helpers and Haml::Helpers::ActionViewExtensions modules. Haml提供了很多有用的helper方法。比如为用户定义的helper方法保留空格创建漂亮的缩进等其他一些有用的东西。这些helpers方法都在Haml::Helpers和Haml::ActionViewExtensions这两个modules里。 Haml Options Options can be set by setting the hash Haml::Template.options from environment.rb in Rails, or by passing an options hash to Haml::Engine. Available options are: 可以在Rails的environment.rb文件中通过设置Haml::Template.options的hash来设置Options,或者通过传一个hash到Haml::Engine里来设置。也就是你可以设置如下option来自定义haml,可用的options如下所示: :suppress_eval :attr_wrapper :filename :filters :locals

分享到:
评论

相关推荐

    为什么要使用HAML和SASS

    标题“为什么要使用HAML和SASS”涉及到的是前端开发中的两个重要工具——HAML(HTML Abstraction Markup Language)和SASS(Syntactically Awesome Style Sheets)。这两个工具都是为了提高HTML和CSS编码的效率和...

    MtHaml:PHP实现的HAML模板语言类库.zip

    $haml = new Haml(); $html = $haml-&gt;render('path/to/your/file.haml'); echo $html; ``` `MtHaml` 提供了一些自定义配置选项,如设置输出的 HTML 版本、开启或关闭 CSS 选择器支持等。通过调整这些配置,你可以...

    Ruby-Haml是一个HTML的模板引擎

    Haml是Ruby社区广泛采用的模板语言之一,因其简洁的缩进式语法而受到青睐。 **Haml的基本语法** 1. **缩进表示嵌套**:Haml中的元素通过空格或制表符来表示层级关系,与Python或Git的代码风格类似。每增加一个元素...

    前端项目-clientside-haml-js.zip

    这个项目的目标是帮助前端开发者在浏览器端直接编译Haml模板,以实现更高效、更简洁的前端代码编写。 Haml是一种预处理语言,旨在提高HTML代码的可读性和简洁性。它通过缩进和简化的语法减少HTML的冗余,使得代码...

    让脚手架直接生成Haml模板

    你可能需要在`app/views/scaffolds`目录下创建Haml版本的模板文件,如`index.haml`, `show.haml`, `new.haml`, `edit.haml`等,以便脚手架可以使用这些模板。 4. **使用插件**:有些Rails插件,如`haml-rails`,...

    MtHaml:PHP实现的HAML模板语言类库

    $haml = new \MTHaml\Haml(); $html = $haml-&gt;render('path/to/your/template.haml'); ``` ## 4. MtHaml与其他模板引擎的比较 - **与HTML模板比较**:HAML和 MtHaml 提供了更简洁的语法,减少了模板文件的体积,...

    Laravel开发-laravel-blade-haml

    **Laravel 开发:深入理解 Laravel Blade 和 HAML** 在 Laravel 框架中,Blade 是一个强大的模板引擎,它允许开发者以简洁且可读性强的语法编写视图。Blade 提供了 PHP 代码与 HTML 的无缝集成,使得在处理复杂的...

    haml:HTML抽象标记语言-标记Haiku

    将Haml与Rails一起使用要将Haml与Rails一起使用,只需将Haml添加到您的Gemfile中并运行bundle 。 gem 'haml' 如果您想用Haml替换基于Rails基于Erb的生成器,请将也添加到您的Gemfile中。格式化Haml的最基本元素是...

    haml-to-php:PHP的haml实现

    编写类似于ruby的haml实现的代码 在错误的标签嵌套上失败,例如table&gt; td&gt; tr 图书馆支持 请参阅如果您将对haml-to-php.com的支持添加到框架中,我想参考您的工作。 我知道的相关工作 请参阅此处。 最引人注目。 ...

    ruby-haml-loader:使用实际Ruby`haml`的Webpack Haml加载器

    用于Webpack的Ruby Haml加载程序 将Haml文件作为模块导入Webpack项目中。 返回渲染的模板。 这很慢。 它是为临时使用而创建的,直到转换为Jade。 此自述文件基于自述文件。 设置 添加到您的webpack配置模块....

    Haml2Html:一个易于使用的编译器,用于使用Haml&Sass开发静态页面

    用法将所有.haml文件保存在/app/views 将所有.sass文件保存在/app/styles 要观看文件运行(在终端中): ./watch要停止观看: Control + C就是这样! 所有已编译的Haml文件都存储在/compiled/ 所有已编译的Sass文件...

    前端开源库-ewg-haml-coffee-gulp

    "前端开源库-ewg-haml-coffee-gulp"是一个专为前端开发者设计的项目,它整合了三个重要的技术: EWG HAML、CoffeeScript 和 Gulp。 首先,让我们深入了解一下这三个核心组件: 1. **EWG HAML**: EWG HAML是一种...

    herbalizer:转换HAML到ERB

    用Haskell编写的HAML到ERB转换器。 该程序将模板转换为 。 为什么 很多人更喜欢HAML而不是ERB。 但不是每个人,也不是每个情况都如此。 ERB更简单,更容易记住规则,并且对HTML熟悉的人都可以访问。 ERB模板更易于...

    hamlet-compiler:Haml 的形式化语法

    《哈姆雷特编译器:Haml的形式化语法详解》 在Web开发领域,HTML作为标记语言,一直是构建网页的基础。然而,随着技术的发展,为了提高开发效率和代码的可读性,出现了许多预处理器,如Haml...

    s-ublime-text-haml-sass-master.zip

    "s-ublime-text-haml-sass-master.zip"这个压缩包文件显然是为Sublime Text 2设计的一个扩展资源,目的是为了增强其对HAML和SASS这两种语言的支持。 HAML(HTML Abstraction Markup Language)是一种简洁、清晰的...

    基于Ruby的Haml模板引擎设计源码

    本项目是基于Ruby的Haml模板引擎设计源码,包含149个文件,主要文件类型为rb、haml、xhtml、erb、x、md、gitignore、gitmodules、yml和yardopts。该项目适用于Haml模板引擎的开发和设计,为用户提供了一个丰富的资源...

    yii-haml:Yii 框架的 HAML 视图渲染器

    Yii 框架的 HAML 视图渲染器 yii-haml是扩展,它为您的视图带来了功能。 基于项目的分支。 使用 Composer 安装 将此添加到您的composer.json : " repositories " : [ { " type " : " composer " , " url " : ...

    gulp-ruby-haml:用于Gulp的Haml插件,使用Ruby Haml gem

    gulp-ruby-haml 这是一个,将使用该插件haml命令行脚本编译Haml的文件转换成HTML。 您需要同时安装Ruby和Haml才能使用此功能。 尝试gem install haml 。 如果使用 ,请将gem 'haml'添加到Gemfile中,然后运行bundle...

    haml-lint:编写干净且一致的HAML的工具

    HAML-Lint haml-lint是一种帮助保持文件清洁和可读的工具。 除了特定于 HAML 的样式和 lint 检查之外,它还与集成以将其强大的静态分析工具带到您的 HAML 文档中。 您可以从命令行手动运行haml-lint ,也可以将其...

    haml:CakePHP HAML模板引擎

    CakePHP HAML视图类 CakePHP 2.x的模板引擎。 基于 ,这是PHP的HAML实现。 安装 将插件包含在您的作曲家文件中: { " require " : { " tiutalk/haml " : " dev-master " } } 该软件包具有Composer依赖性,请...

Global site tag (gtag.js) - Google Analytics