2006-09-12 09:05:28 -04:00
|
|
|
= Haml (XHTML Abstraction Markup Language)
|
2006-06-30 11:14:44 -04:00
|
|
|
|
2006-11-04 01:36:16 -05:00
|
|
|
HAML is a markup language that's used to cleanly and simply describe the XHTML
|
|
|
|
|
of any web document without the use of inline code. Haml functions as a
|
|
|
|
|
replacement for inline page templating systems such PHP, RHTML, and ASP.
|
|
|
|
|
However, Haml avoids the need for explicitly coding XHTML into the template,
|
|
|
|
|
because it iself is a description of the XHTML, with some code to generate
|
2006-09-10 13:02:52 -04:00
|
|
|
dynamic content.
|
|
|
|
|
|
|
|
|
|
== Features
|
|
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
* Whitespace active
|
|
|
|
|
* Well-formatted markup
|
2006-09-10 13:02:52 -04:00
|
|
|
* DRY
|
2006-09-12 09:05:28 -04:00
|
|
|
* Follows CSS conventions
|
|
|
|
|
* Interpolates Ruby code
|
|
|
|
|
* Implements Rails templates with the .haml extension
|
|
|
|
|
|
2006-09-12 09:54:22 -04:00
|
|
|
== Authors
|
|
|
|
|
|
|
|
|
|
HAML was originally created by Hampton Catlin (hcatlin). Help with the
|
2006-11-04 01:36:16 -05:00
|
|
|
Ruby On Rails implementation and much of the documentation by
|
2006-09-12 09:58:09 -04:00
|
|
|
Jeff Hardy (packagethief).
|
2006-09-12 09:54:22 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
Nathan Weizenbaum (Nex3) contribued the buffered-engine code along with many
|
|
|
|
|
other enhancements including the silent-line syntax ("-").
|
|
|
|
|
|
2006-09-12 09:54:22 -04:00
|
|
|
If you use this software, you must pay Hampton a compliment. Say something
|
|
|
|
|
nice about it. Beyond that, the implementation is licensed under the MIT
|
|
|
|
|
License. Ok, fine, I guess that means compliments aren't *required*.
|
|
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
== Formatting
|
|
|
|
|
|
|
|
|
|
Haml is sensitive to spacing and indentation; it uses nesting to convey
|
|
|
|
|
structure. When you want an element to have children, indent the lines below it
|
|
|
|
|
using two spaces. Remember, spaces are not the same as tabs. Example:
|
|
|
|
|
|
|
|
|
|
#contact
|
|
|
|
|
%h1 Eugene Mumbai
|
|
|
|
|
%ul.info
|
|
|
|
|
%li.login eugene
|
|
|
|
|
%li.email eugene@example.com
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
2006-09-12 09:54:22 -04:00
|
|
|
<div id='contact'>
|
2006-09-12 09:05:28 -04:00
|
|
|
<h1>Eugene Mumbai</h1>
|
2006-09-12 09:54:22 -04:00
|
|
|
<ul class='info'>
|
|
|
|
|
<li class='login'>eugene</li>
|
|
|
|
|
<li class='email'>eugene@example.com</li>
|
2006-09-12 09:05:28 -04:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
== Characters with meaning to Haml
|
|
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
Various characters, when placed at a certain point in a line, instruct HAML
|
|
|
|
|
to render different types of things.
|
|
|
|
|
|
|
|
|
|
=== XHTML Tags
|
|
|
|
|
|
|
|
|
|
These characters render XHTML tags.
|
|
|
|
|
|
|
|
|
|
==== %
|
|
|
|
|
|
|
|
|
|
This element is placed at the beginning of a line. It's followed immediately
|
|
|
|
|
by the name of an element, then optionally by modifiers (see below), a space,
|
|
|
|
|
and text to be rendered inside the element. It creates an element in the form of
|
|
|
|
|
<tt><element></element></tt>. For example:
|
2006-09-12 09:05:28 -04:00
|
|
|
|
|
|
|
|
%one
|
|
|
|
|
%two
|
|
|
|
|
%three Hey there
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<one>
|
|
|
|
|
<two>
|
|
|
|
|
<three>Hey there</three>
|
|
|
|
|
</two>
|
|
|
|
|
</one>
|
|
|
|
|
|
|
|
|
|
Any string is a valid element name; Haml will automatically generate opening and
|
2006-10-14 18:24:53 -04:00
|
|
|
closing tags for any element.
|
|
|
|
|
|
|
|
|
|
==== {}
|
|
|
|
|
|
|
|
|
|
Brackets represent a Ruby hash that is used for specifying the attributes of an
|
2006-10-30 01:10:26 -05:00
|
|
|
element. It is literally evaluated as a Ruby hash, so logic will work in it, and
|
|
|
|
|
local variables may be used. Quote characters within the attribute will be replaced
|
|
|
|
|
by appropriate escape sequences. The hash is placed after the tag is defined. For
|
|
|
|
|
example:
|
2006-10-14 18:24:53 -04:00
|
|
|
|
|
|
|
|
%head{ :name => "doc_head" }
|
|
|
|
|
%script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" }
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<head name="doc_head">
|
|
|
|
|
<script src='javascripts/script_9' type='text/javascript'>
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== []
|
|
|
|
|
|
|
|
|
|
Square brackets follow a tag definiton and contain a Ruby object that is used to
|
|
|
|
|
set the class and id of that tag. The class is set to the object's class
|
|
|
|
|
(transformed to use underlines rather than camel case), and the id is set to the
|
|
|
|
|
object's class followed by its id. Because the id of an object is normally an
|
|
|
|
|
obscure implementation detail, this is most useful for elements that represent
|
|
|
|
|
instances of Models. For example:
|
|
|
|
|
|
|
|
|
|
# file: app/controllers/users_controller.rb
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
def show
|
|
|
|
|
@user = CrazyUser.find(15)
|
|
|
|
|
end
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
# file: app/views/users/show.haml
|
|
|
|
|
|
|
|
|
|
%div[@user]
|
|
|
|
|
%bar[290]/
|
|
|
|
|
Hello!
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<div class="crazy_user" id="crazy_user_15">
|
|
|
|
|
<bar class="fixnum" id="fixnum_581" />
|
|
|
|
|
Hello!
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
This is based off of DHH's SimplyHelpful syntax as presented at RailsConf Europe 2006.
|
|
|
|
|
|
|
|
|
|
==== /
|
2006-09-12 09:05:28 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
The forward slash character, when placed at the end of a tag definition, causes
|
|
|
|
|
the tag to be self-closed. For example:
|
|
|
|
|
|
|
|
|
|
%br/
|
2006-09-12 10:21:47 -04:00
|
|
|
%meta{:http-equiv => 'Content-Type', :content => 'text/html'}/
|
2006-09-12 09:05:28 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
<meta http-equiv='Content-Type' content='text/html' />
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== . and #
|
|
|
|
|
|
|
|
|
|
The period and pound sign are borrowed from CSS and used as shortcuts to specify the
|
|
|
|
|
<tt>class</tt> and <tt>id</tt> attributes of an element, respectively. They are
|
|
|
|
|
placed immediately after the tag, and before an attributes hash. For example:
|
|
|
|
|
|
|
|
|
|
div#things
|
|
|
|
|
%span#rice Chicken Fried
|
|
|
|
|
%p.beans{ :food => 'true' } The magical fruit
|
|
|
|
|
%h1.class#id La La La
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<div id='things'>
|
|
|
|
|
<span id='rice'>Chicken Fried</span>
|
|
|
|
|
<p class='beans' food='true'>The magical fruit</p>
|
|
|
|
|
<h1 class='class' id='id'>La La La</h1>
|
|
|
|
|
</div>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== Assumed Divs
|
|
|
|
|
|
|
|
|
|
Because the div element is used so often, it is the default element. If you only
|
|
|
|
|
define a class and/or id using the <tt>.</tt> or <tt>#</tt> syntax, a div element
|
|
|
|
|
is automatically used. For example:
|
2006-09-12 09:05:28 -04:00
|
|
|
|
|
|
|
|
#collection
|
|
|
|
|
.item
|
2006-10-14 18:24:53 -04:00
|
|
|
.description What a cool item!
|
|
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
is the same as:
|
|
|
|
|
|
|
|
|
|
%div{:id => collection}
|
|
|
|
|
%div{:class => 'item'}
|
2006-10-14 18:24:53 -04:00
|
|
|
%div{:class => 'description'} What a cool item!
|
2006-09-12 09:05:28 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
and is compiled to:
|
2006-09-12 09:05:28 -04:00
|
|
|
|
2006-09-12 09:54:22 -04:00
|
|
|
<div id='collection'>
|
|
|
|
|
<div class='item'>Broken record album</div>
|
2006-10-14 18:24:53 -04:00
|
|
|
<div class='description'>What a cool item!</div>
|
2006-09-12 09:05:28 -04:00
|
|
|
</div>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== = and ~
|
2006-10-03 20:34:43 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
<tt>=</tt> and <tt>~</tt> are placed at the end of a tag definition, after class,
|
|
|
|
|
id, and attribute declarations. They're just shortcuts for inserting Ruby code
|
|
|
|
|
into an element. They work the same as <tt>=</tt> and <tt>~</tt> without a tag;
|
2006-11-04 01:36:16 -05:00
|
|
|
see below for documentation of those. However, if the result is short enough, it
|
|
|
|
|
is displayed entirely on one line. For example:
|
2006-10-03 20:34:43 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
%p= "hello"
|
|
|
|
|
%h1~ 1 + 2
|
2006-11-04 01:36:16 -05:00
|
|
|
|
|
|
|
|
is not quite the same as:
|
2006-10-14 18:24:53 -04:00
|
|
|
|
|
|
|
|
%p
|
|
|
|
|
= "hello"
|
|
|
|
|
%h1
|
|
|
|
|
~ 1 + 2
|
|
|
|
|
|
2006-11-04 01:36:16 -05:00
|
|
|
It's compiled to:
|
|
|
|
|
|
|
|
|
|
<p>hello</p>
|
|
|
|
|
<h1>3</h1>
|
|
|
|
|
|
|
|
|
|
In addition, if the tilde character is followed by an indented section of text,
|
|
|
|
|
the text is rendered on one line using the XHTML newline escape character.
|
|
|
|
|
For example,
|
|
|
|
|
|
|
|
|
|
.house
|
|
|
|
|
%pre~
|
|
|
|
|
/^^^\
|
|
|
|
|
|[] []|
|
|
|
|
|
|_____|
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<div class="house">
|
|
|
|
|
<pre>
 /^^^\
|[] []|
|_____|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
=== XHTML Helpers
|
|
|
|
|
|
|
|
|
|
==== No Special Character
|
|
|
|
|
|
|
|
|
|
If no special character appears at the beginning of a line, it is rendered as plain
|
|
|
|
|
text. For example:
|
|
|
|
|
|
|
|
|
|
%gee
|
|
|
|
|
%whiz
|
|
|
|
|
Wow this is cool!
|
2006-09-12 09:05:28 -04:00
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
<gee>
|
|
|
|
|
<whiz>
|
|
|
|
|
Wow this is cool!
|
|
|
|
|
</whiz>
|
|
|
|
|
</gee>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== !!!
|
2006-09-12 09:05:28 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
When describing XHTML documents with Haml, you can have a document type
|
2006-09-12 09:05:28 -04:00
|
|
|
generated automatically by including the characters <tt>!!!</tt> as the first
|
|
|
|
|
line in your document. Example:
|
|
|
|
|
|
|
|
|
|
!!!
|
|
|
|
|
%html
|
|
|
|
|
%head
|
|
|
|
|
%title Myspace
|
|
|
|
|
%body
|
|
|
|
|
%h1 I am the international space station
|
|
|
|
|
%p Sign my guestbook
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Myspace</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>I am the international space station</h1>
|
|
|
|
|
<p>Sign my guestbook</p>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-27 16:36:34 -04:00
|
|
|
You can also specify the version and type of XHTML after the <tt>!!!</tt>.
|
|
|
|
|
XHTML 1.0 Strict, Transitional, and Frameset and XHTML 1.1 are supported.
|
|
|
|
|
The default version is 1.0 and the default type is Transitional. For example,
|
|
|
|
|
|
|
|
|
|
!!! 1.1
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-27 16:36:34 -04:00
|
|
|
is compiled to:
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-27 16:36:34 -04:00
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-27 16:36:34 -04:00
|
|
|
and
|
|
|
|
|
|
|
|
|
|
!!! Strict
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-27 16:36:34 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== /
|
|
|
|
|
|
|
|
|
|
The forward slash character, when placed at the beginning of a line, wraps all
|
|
|
|
|
text after it in an HTML comment. For example:
|
|
|
|
|
|
|
|
|
|
%billabong
|
|
|
|
|
/ This is the billabong element
|
|
|
|
|
I like billabongs!
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<billabong>
|
|
|
|
|
<!-- This is the billabong element -->
|
|
|
|
|
I like billabongs!
|
|
|
|
|
</billabong>
|
2006-10-22 17:42:45 -04:00
|
|
|
|
|
|
|
|
The forward slash can also wrap indented sections of code. For example:
|
|
|
|
|
|
|
|
|
|
/
|
|
|
|
|
%p This doesn't render...
|
|
|
|
|
%div
|
|
|
|
|
%h1 Because it's commented out!
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
2006-11-04 01:36:16 -05:00
|
|
|
<!--
|
2006-10-22 17:42:45 -04:00
|
|
|
<p>This doesn't render...</p>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Because it's commented out!</h1>
|
|
|
|
|
</div>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
You can also use Interet Explorer conditional comments (about)[http://www.quirksmode.org/css/condcom.html]
|
|
|
|
|
by enclosing the condition in square brackets after the <tt>/</tt>. For example:
|
|
|
|
|
|
|
|
|
|
/[if IE]
|
|
|
|
|
%a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
|
|
|
|
|
%h1 Get Firefox
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
2006-11-04 01:36:16 -05:00
|
|
|
<!--[if IE]>
|
2006-10-22 17:42:45 -04:00
|
|
|
<a href='http://www.mozilla.com/en-US/firefox/'>
|
|
|
|
|
<h1>Get Firefox</h1>
|
|
|
|
|
</a>
|
|
|
|
|
<![endif]-->
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== |
|
|
|
|
|
|
|
|
|
|
The pipe character designates a multiline string. It's placed at the end of a line,
|
|
|
|
|
and means that all following lines that end with <tt>|</tt> will be evaluated as
|
|
|
|
|
though they were on the same line. For example:
|
|
|
|
|
|
|
|
|
|
%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:
|
|
|
|
|
|
|
|
|
|
%hoo I think this might get |
|
|
|
|
|
pretty long so I should |
|
|
|
|
|
probably make it |
|
|
|
|
|
multiline so it doesn't |
|
|
|
|
|
look awful. |
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
=== Ruby evaluators
|
|
|
|
|
|
|
|
|
|
==== =
|
|
|
|
|
|
|
|
|
|
The equals character is followed by Ruby code, which is evaluated and the output
|
|
|
|
|
inserted into the document as plain text. For example:
|
|
|
|
|
|
|
|
|
|
%p
|
|
|
|
|
= ['hi', 'there', 'reader!'].join " "
|
|
|
|
|
= "yo"
|
|
|
|
|
|
|
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
hi there reader!
|
|
|
|
|
yo
|
|
|
|
|
</p>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== ~
|
|
|
|
|
|
|
|
|
|
The tilde character works the same as the equals character, but the output is
|
|
|
|
|
modified in such a way that newlines in whitespace-sensitive elements work
|
|
|
|
|
properly. For example:
|
|
|
|
|
|
|
|
|
|
%foo
|
|
|
|
|
= "Woah <pre> this is \n</pre> crazy"
|
|
|
|
|
%foo2
|
|
|
|
|
~ "Woah <pre> this is \n</pre> crazy"
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<foo>
|
2006-11-04 01:36:16 -05:00
|
|
|
Woah <pre> this is
|
2006-10-14 18:24:53 -04:00
|
|
|
</pre> crazy
|
|
|
|
|
</foo>
|
|
|
|
|
<foo2>
|
|
|
|
|
Woah <pre> this is 
</pre> crazy
|
|
|
|
|
</foo2>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
==== -
|
|
|
|
|
|
|
|
|
|
The hyphen character makes the text following it into "silent script", or
|
|
|
|
|
Ruby script that is evaluated, but not output.
|
|
|
|
|
|
|
|
|
|
<b>It is not reccomended that you use this widely; almost all processing
|
|
|
|
|
code and logic should be kept to the Controller, the Helper, or partials.</b>
|
|
|
|
|
|
|
|
|
|
For example:
|
|
|
|
|
|
|
|
|
|
- foo = "hello"
|
|
|
|
|
- foo << " there"
|
|
|
|
|
- foo << " you!"
|
|
|
|
|
%p= foo
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
hello there you!
|
|
|
|
|
</p>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
===== Blocks
|
|
|
|
|
|
|
|
|
|
Like XHTML tags, you don't need to explicity close your Ruby blocks in
|
|
|
|
|
HAML. Rather, they're automatically closed based on tabs. A block begins
|
|
|
|
|
whenever the indentation is increased after a silent script command, and
|
|
|
|
|
ends when the indentation decreases (as long as it's not an +else+ clause
|
|
|
|
|
or something similar). For example:
|
|
|
|
|
|
|
|
|
|
- (42...47).each do |i|
|
|
|
|
|
%p= i
|
|
|
|
|
%p See, I can count!
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
42
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
43
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
44
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
45
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
46
|
|
|
|
|
</p>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
Another example:
|
|
|
|
|
|
|
|
|
|
%p
|
|
|
|
|
- case 2
|
|
|
|
|
- when 1
|
|
|
|
|
= "1!"
|
|
|
|
|
- when 2
|
|
|
|
|
= "2?"
|
|
|
|
|
- when 3
|
|
|
|
|
= "3."
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
is compiled to:
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
2?
|
|
|
|
|
</p>
|
2006-09-12 09:05:28 -04:00
|
|
|
|
|
|
|
|
== Using Haml as a Rails plugin
|
2006-09-10 13:02:52 -04:00
|
|
|
|
|
|
|
|
Write Rails templates with the .haml extension. Example:
|
|
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
# file: app/views/movies/teen_wolf.haml
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-09-10 13:02:52 -04:00
|
|
|
%html
|
|
|
|
|
%head
|
|
|
|
|
%title= "Teen Wolf (1985)"
|
|
|
|
|
%body
|
|
|
|
|
#contents
|
|
|
|
|
%h1 "A highschooler discovers that he is a werewolf"
|
|
|
|
|
%ul.cast
|
|
|
|
|
%li "Scott Howard"
|
|
|
|
|
%li "Rupert 'Stiles' Stilinski"
|
|
|
|
|
%li "Lisa 'Boof' Marconi"
|
|
|
|
|
%li "Lewis"
|
|
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
is compiled to:
|
2006-09-10 13:02:52 -04:00
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Teen Wolf (1985)</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2006-09-12 09:54:22 -04:00
|
|
|
<div id='contents'>
|
2006-09-10 13:02:52 -04:00
|
|
|
<h1>A highschooler discovers that he is a werewolf</h1>
|
2006-09-12 09:54:22 -04:00
|
|
|
<ul class='cast'>
|
2006-09-10 13:02:52 -04:00
|
|
|
<li>Scott Howard</li>
|
|
|
|
|
<li>Rupert 'Stiles' Stilinski</li>
|
|
|
|
|
<li>Lisa 'Boof' Marconi</li>
|
|
|
|
|
<li>Lewis</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
2006-09-12 09:05:28 -04:00
|
|
|
You can access instance variables in Haml templates the same way you do in ERb
|
2006-10-14 18:24:53 -04:00
|
|
|
templates. Helper methods are also available in Haml templates. Example:
|
2006-09-10 13:02:52 -04:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
# file: app/controllers/movies_controller.rb
|
2006-09-10 13:02:52 -04:00
|
|
|
|
|
|
|
|
class MoviesController < ApplicationController
|
|
|
|
|
def index
|
|
|
|
|
@title = "Teen Wolf"
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
# file: app/views/movies/index.haml
|
2006-09-10 13:02:52 -04:00
|
|
|
|
|
|
|
|
#content
|
|
|
|
|
.title
|
|
|
|
|
%h1= @title
|
2006-09-12 09:05:28 -04:00
|
|
|
= link_to 'Home', home_url
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-14 18:24:53 -04:00
|
|
|
may be compiled to:
|
2006-09-10 13:02:52 -04:00
|
|
|
|
2006-09-12 09:54:22 -04:00
|
|
|
<div id='content'>
|
|
|
|
|
<div class='title'>
|
2006-09-10 13:02:52 -04:00
|
|
|
<h1>Teen Wolf</h1>
|
2006-09-12 09:54:22 -04:00
|
|
|
<a href='/'>Home</a>
|
2006-09-10 13:02:52 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2006-11-04 01:36:16 -05:00
|
|
|
|
2006-10-30 01:59:57 -05:00
|
|
|
=== Setting Options
|
|
|
|
|
|
|
|
|
|
Options can be set by setting the hash <tt>Haml::Template.options</tt>
|
|
|
|
|
from <tt>environment.rb</tt>. Available options are:
|
|
|
|
|
|
|
|
|
|
[<tt>:suppress_eval</tt>] Whether or not attribute hashes and Ruby scripts
|
|
|
|
|
designated by <tt>=</tt> or <tt>~</tt> should be
|
|
|
|
|
evaluated. If this is true, said scripts are
|
|
|
|
|
rendered as empty strings. Defaults to false.
|
|
|
|
|
|
|
|
|
|
[<tt>:precompiled</tt>] A string containing a precompiled Haml template.
|
|
|
|
|
If this is passed, <tt>template</tt> is ignored
|
|
|
|
|
and no precompilation is done.
|
2006-09-10 13:02:52 -04:00
|
|
|
|
2006-10-30 01:59:57 -05:00
|
|
|
[<tt>:attr_wrapper</tt>] The character that should wrap element attributes.
|
|
|
|
|
This defaults to <tt>'</tt> (an apostrophe). Characters
|
|
|
|
|
of this type within the attributes will be escaped
|
|
|
|
|
(e.g. by replacing them with <tt>'</tt>) if
|
|
|
|
|
the character is an apostrophe or a quotation mark.
|
2006-09-10 13:02:52 -04:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
Copyright (c) 2006 Hampton Catlin
|
2006-09-12 09:54:22 -04:00
|
|
|
Licensed under the MIT License
|
