HAML: HTML 抽象マークアップ言語

最近、私が知るようになったのは、 ハムル 私をサポートしてくれて レールアプリケーション そして、非常に興味深い事実をいくつか見つけたので、皆さんと共有したいと思います。学習体験は素晴らしかったので、共有体験も素晴らしいものにしていきたいと考えています。簡単に捕まえられるといいですね！ さて、それでは、HAML についての非常に基本的なことをいくつか説明します。 ハムル HTML 抽象化マークアップ言語の略です。新しいテンプレートエンジンです ルビー・オン・レール。これは、Rails アプリケーションで使い慣れた RHTML テンプレートの代替品です。

HAML の原則では、マークアップは次のようにする必要があります。 美しい、マークアップは次のようにする必要があります ドライ (Don'trepeat Yourself) とマークアップは次のようにする必要があります。 インデントされた。これがロケット科学でないことを祈ります。

レール デフォルトでは「埋め込み Ruby」、つまり .アーブ ファイルには、ページの動的部分を生成するために必要な Ruby コードを含む HTML 出力が記述されています。 HAML も同様のことを行いますが、構文に関しては最小限のアプローチをとります。 HAML の空白規則は非常に厳格です。ネストはインデントによって処理されます。 HAML では、タグは % で始まるため、タグを閉じる必要はありません。それらはインデントによって自動的に閉じられます。 id=”abc” は #abc になり、class=”abc” は .abc になります。 div はデフォルトのタグで、その他すべての場合は、%tag を使用する必要があります。 <%= Some Ruby code%> は、HAML の =some Ruby コードになります。 。 For ループ <% some code%> は、HAML では -some code になります。 構文: !!! – doctype 指定子: 例 !!! Strict HTML DOCTYPE または XML 宣言を挿入します。デフォルトはXHTML 1.0です % – 要素指定子、例: %h1: 開始/終了「要素」タグを使用して、同じ行に続くすべてを *または* 後続のインデントされた行にネストしてラップします。 # – ID 指定子: 例: #main または %div#main 要素に「id」属性を設定します。 %element が指定されていない場合は、暗黙の「div」要素が作成されます。 。 – クラス指定子: 例: .error または %li.error 要素に「class」属性を設定します。 %element が指定されていない場合は、暗黙の「div」要素が作成されます。クラスは複数の期間で連鎖させることができます。 {} – 属性: 例: %input{:name => “title”, :length => “30”} Ruby ハッシュのキーと値のペア、またはハッシュを返す 1 つ以上の Ruby メソッドを使用して、要素に属性を設定します。 / (タグ定義の最後) – 自己終了タグ: 例: %br/

自己終了タグを指定します。 (一部のタグはデフォルトで自動的に閉じられます。) / (行の先頭) – コメント: 例 / ここにトラがいます。同じ行またはその下にネストされているコンテンツから HTML コメントを作成します。 – エスケープ文字: 例: . (行の先頭にピリオドを表示するため) このリストの「特殊」文字をプレーン テキストとして表示できるようにします。 = – Ruby 式: 例: %h1= @content.title または = @content.title Erb = マーカーと同じように機能します。これに続く Ruby 式が評価され、その結果がドキュメントに挿入されます。タグに従うこともあれば、単独で列に並ぶこともあります。 – – Ruby 非印刷コード: 例 – @contents のコンテンツの場合、Erb – マーカーと同じように動作します。Ruby 式は評価されますが、出力はドキュメントに入力されません。主にフロー制御と風変わりな Rails の form_for 構文に使用されます。 == – Ruby 補間文字列: 例 %h1== #{@content.title} を編集中 = の後に二重引用符で囲まれた文字列が続くのと同じように機能します。コンテンツは、Ruby 変数置換を使用してリテラルとして扱われます。 -# – 無言コメント、例: -# ユーザーは全員バカです。コンテンツは決して出力されません。 で ハムルDOCTYPE を記述する必要はありません。!!! を使用して DOCTYPE を含めることができます。および !!!XML タグ。

そのシンプルさは、 RHTML HAML バージョンには約 261 個のトークンが含まれていますが、HAML バージョンには約 117 個のトークンしか含まれていません。 たとえば、次の HTML コードと同等です。 <h1>HAML はテンプレート エンジンです、Mona</h1> ERBでは次のようになります <h1>HAML はテンプレート エンジンです。<%= @name%></h1>

HAMLでは次のように書けます %h1 = 「HAML はテンプレート エンジンです、#{@name}」 インストールは非常に簡単で、プラグインをダウンロードするか、Gem をインストールすることでインストールできます。 $ sudo gem install haml #haml -レール 既存のプロジェクトからファイルを取得しました。アーブ ファイルを作成し、名前を . に変更しました。ハムル 拡大。 これは私の古い .erb ファイルです : <center> <table cellspacing="”5″" cellpadding="”5″"> <tbody> <tr> <td> <ul> <li> <%= link_to @story.name, @story.link %></li> </ul> </td> </tr> </tbody> </table> <%= link_to “Add New story”, :action =>「新しい」%&gt; </center> そしてこれが私の新しい.hamlファイルです: %center %table{:cellpadding=>5,:cellspacing=>5} %tr %td %ul %li= link_to @story.name, @story.link = link_to “Add New story”, :action =>’new’

何か気づきましたか？

14行が7行に減って見た目も綺麗です

それでは、非常に美しくコーディングされた Rails アプリケーションをいくつか作成してみましょう。

お問い合わせください.