Slimの書き方をまとめてみました
目次
こんにちは、KOです。
開発でslimを書く機会があったので、
slimの書き方についてのおさらいをしていきます。
slimとは、
rubyで作られたテンプレートエンジンのことです。
HTMLのような入れ子による書き方を、slimはインテンドで表現することができます。
HTMLタグの書き方
slimでは<>などのようにカッコで囲うことなく、また
</p>などのように閉じたぐも必要としません。
(slim)
|
1 |
p |
(html)
|
1 |
<p></p> |
シンプルですね。
(aタグ)
|
1 |
a href="//example.com" hoge |
(htmlでは)
|
1 |
<a href="//example.com">hoge</a> |
上記のように空白を開けて属性値を追記します。
テキストを追加する
テキストを追加する場合は
|
1 |
p こんにちは 月曜日 |
こうすると
|
1 2 3 |
<p> こんにちは 月曜日 </p> |
このようにpタグの入れ子になって返ってきます。
<% %>
<% logged_in? %>
などのような表記に関しまして
- logged_in?
のように表記が可能です。
|
1 2 3 4 5 6 |
Slimでif文 - if logged_in? li = link_to 'プライバシーポリシー', privacy_path li = link_to 'ログアウト', logout_path - else li = link_to 'Instagramでログイン', '/auth/instagram' |
<%= %>
<%= %>
などのような表記に関しましては
=
を使うと表記可能です。
pなどのタグに= 変数を追記することで出力が可能です。
|
1 2 3 4 5 6 |
p = @user[:id] - @user[:review][:percent_list].each do |review_percent_list| p = review_percent_list . . . |
イメージタグも同様で
|
1 2 3 4 5 |
(slimで書くと) =image_tag "site/image.png", alt:"イメージ" , class: "logo" , height: "100" ↓↓↓ (出力) <img alt="イメージ" class="logo" height="100" layout="responsive" src="site/image.png> |
のような形で表記されます。altやclassなどの属性に関してはコンマで区切ります。
コメントアウト
コメントアウトは /で出力可能です。
|
1 2 3 4 |
//スポーツ能力テストの成績です！！ p = @user[:review][:soccer_score] p = @hall[:review][:volley_score] p = @hall[:review][:basketball_score] |