Haml 参考大全

Python017

Haml 参考大全,第1张

它有什么特点呢?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}" }编译后为: []方括号跟在一个标签定义之后,包含一个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转换为:

1. Mercury : HTML5 Powered WYSIWYG Editor

Mercury 是个全功能的编辑器,包含TinyMCE和CKEditor同样的功能,但又有不同的特性。与iFrames有所不同,它使用了HTML5内容可编辑功能等。Mercury 是由CoffeeScript代码编写,其支持所有的主流浏览器。

Website/Downoad

2 Aloha Editor – HTML5 WYSIWYG Editor

Aloha Editor 是个基于浏览器的富文本编辑器框架。不像其他大多数的HTML编辑器,Aloha可以被嵌入到CMS、Blog,及其他标准的web开发框架中。

Website

3. Rendra- Online HTML 5 Editor

Rendra 是个在线HTML5 编辑器,支持用户实时预览,用户可以使用哪个浏览器支持的HTML 5和CSS 3,以及HAML 和SASS。它是由CoffeeScript 和 Sinatra代码编写的。用户可以用Rendra测试JS代码,允许用户利用 jQuery UI,jQuery 工具和插件。

Website

4. BlueGriffon: Next Generation HTML5 WebEditor

BlueGriffon是一个新的WYSIWYG编辑器,跨平台, 支持Windows, Linux and Mac OSX。 该编辑器内置HTML5/CSS3编辑功能,可以轻松地用它来实现传输、文本和边框的阴影、斜体等效果。它使用Google Font Directory 和FontSquirrel addons,可以设置个性化网页字体。

Website

5. Maqetta : Open Source Project &HTML5 Editor

Maqetta,一个创建桌面和移动用户界面的HTML5设计编辑工具,并同时宣布将项目捐助给开源机构Dojo基金会。

Maqetta已经是开源项目,提供WYSIWYG可视化HTML5用户界面设计功能,仅需简单的拖曳操作,支持桌面和移动用户界面。

6. Apatana Studio 3

Aptana Studio 3 是开源web开发工具,它允许开发者测试web应用,支持最新的web开发技术如HTML5, CSS3, JavaScript, Ruby, Rails, PHP 和 Python。Apatanna包含很多的功能,比如GIF integration, HTML,CSS和JavaScript Code assists, integrated debugger, 部署向导,以及IDE定制化。