[haml/en] Add more information

This commit is contained in:
Vasiliy Petrov 2017-09-27 22:13:18 +03:00
parent e27533f7d1
commit 938988bd34

View File

@ -3,6 +3,7 @@ language: haml
filename: learnhaml.haml
contributors:
- ["Simon Neveu", "https://github.com/sneveu"]
- ["Vasiliy Petrov", "https://github.com/Saugardas"]
---
Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code. It is a popular alternative to using Rails templating language (.erb) and allows you to embed Ruby code into your markup.
@ -11,7 +12,9 @@ It aims to reduce repetition in your markup by closing tags for you based on the
You can also use Haml on a project independent of Ruby, by installing the Haml gem on your machine and using the command line to convert it to html.
```shell
$ haml input_file.haml output_file.html
```
```haml
@ -55,8 +58,18 @@ $ haml input_file.haml output_file.html
</header>
</body>
/ The div tag is the default element, so they can be written simply like this
.foo
/
The div tag is the default element, so it can be omitted.
You can define only class/id using . or #
For example:
%div.my_class
%div#my_id
/ Can be written:
.my_class
#my_id
/ To add content to a tag, add the text directly after the declaration
%h1 Headline copy
@ -97,6 +110,15 @@ $ haml input_file.haml output_file.html
/ To write data-attributes, use the :data key with its value as another hash
%div{:data => {:attribute => 'foo'}}
/ For Ruby version 1.9 or higher you can use Ruby's new hash syntax
%div{ data: { attribute: 'foo' } }
/ Also you can use HTML-style attribute syntax.
%a(href='#' title='bar')
/ And both syntaxes together
%a(href='#'){ title: @my_class.title }
/ -------------------------------------------
/ Inserting Ruby
@ -120,7 +142,7 @@ $ haml input_file.haml output_file.html
- books.shuffle.each_with_index do |book, index|
%h1= book
if book do
- if book do
%p This is a book
/ Adding ordered / unordered list
@ -166,12 +188,33 @@ $ haml input_file.haml output_file.html
/ -------------------------------------------
/
Use the colon to define Haml filters, one example of a filter you can
use is :javascript, which can be used for writing inline js
Filters pass the block to another filtering program and return the result in Haml
To use filter type colon and the name of the filter
/ Markdown filter
:markdown
# Header
Text **inside** *block*
/ The code above is compiled into
<h1>Header</h1>
<p>Text <strong>inside</strong> <em>block</em></p>
/ Javascript filter
:javascript
console.log('This is inline <script>');
/ is compiled into
<script>
console.log('This is inline <script>');
</script>
/
There are many types of filters (:markdown, :javascript, :coffee, :css, :ruby and so on)
Also you can define own filter using Haml::Filters
```
## Additional resources