hamlをインストールから応用まで遊んだのでメモ

なぜこんなことやるかというと、導入しようと思ってinstallコマンドを入力したらうまくインストールできなかったの僕みたいな超入門者用にまとめます。

hamlインストール方法

コマンドラインから行いますコマンドで以下のことを実行してください。

まずはrubyをインストール

ここは本題ではないので各自調べ環境を整えてください。

ruby -v

でバージョンが出ればおkです。

gemの最新版にアップデート

今回これを忘れていて焦りました。
必ず、行ってください。
古いままだとインストールができません。

sudo gem update --system

hamlをインストール

本題のhamlインストールは下記を実行

sudo gem install haml

haml -v

でバージョンが出力されればインストール完了です。

基本学習はdotinstallで！

学習はdotinstallが良いと思います。
数も少ないのですぐ終わると思います。
Haml入門 (全8回) | ドットインストール

応用メモ

ブログサイトを作る想定でパーっとこんな感じかなと作ってみた。

ナビゲーションを作ってみる

haml

%nav.nav
%ul
- menuStr = Array["サイトについて","カテゴリ","お問い合わせ"]
- menuStr.each do |str|
%li
%a{"href"=>"#"}<>
#{str}

HTML

<nav class='nav'>
<ul>
<li><a href='#'>サイトについて</a></li>
<li><a href='#'>カテゴリ</a></li>
<li><a href='#'>お問い合わせ</a></li>
</ul>
</nav>

記事部分の繰り返し部分を作ってみる

haml

- for num in 1..5 do
%article{"id" => "article#{num}"}
%h3<
記事タイトル#{num}
%p
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
%p.time<
xxxx.xx.xx

HTML

<article id='article1'>
<h3>記事タイトル1</h3>
<p>
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
</p>
<p class='time'>xxxx.xx.xx</p>
</article>
<article id='article2'>
<h3>記事タイトル2</h3>
<p>
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
</p>
<p class='time'>xxxx.xx.xx</p>
</article>
<article id='article3'>
<h3>記事タイトル3</h3>
<p>
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
</p>
<p class='time'>xxxx.xx.xx</p>
</article>
<article id='article4'>
<h3>記事タイトル4</h3>
<p>
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
</p>
<p class='time'>xxxx.xx.xx</p>
</article>
<article id='article5'>
<h3>記事タイトル5</h3>
<p>
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
</p>
<p class='time'>xxxx.xx.xx</p>
</article>

全部ソース

haml

!!!
%html{"lang"=>"ja"}
%head
%body
%header.header
%h1<
siteTitle
%nav.nav
%ul
- menuStr = Array["サイトについて","カテゴリ","お問い合わせ"]
- menuStr.each do |str|
%li
%a{"href"=>"#"}<>
#{str}
.content
.mainContent
%h2.title<
新着
- for num in 1..5 do
%article{"id" => "article#{num}"}
%h3<
記事タイトル#{num}
%p
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）
%p.time<
xxxx.xx.xx
.subContent
%h2.title<
カテゴリ
%ul
- categoryList = Array["ニュース","おもしろ","豆知識","下ネタ","その他"]
- categoryList.each do |str|
%li
%a{"href"=>"#"}<>
#{str}
%footer.footer
%p.copy
2015 (c) push.tokyo