Railsでslimを使う
プログラミングの勉強日記
2020年7月30日 Progate Lv.226
概要
こちらの記事で扱ったgemのslimを説明する。slimはHTMLよりもコードを早くきれいにシンプルに書ける。erbと同じで、Rubyを埋め込むこともできる。Hamlと似ていて、slimには閉じタグが存在しないので、コードを簡単かつすっきり書くことができる。
使い方
slimを使うためにGemfileを編集する。
gem 'slim-rails'
Gemfileを編集したら、hamlをインストールする。
bundle install
これで、index.html.slimといったビューファイルの拡張子にslimを使えるようになる。
すでにあるerbファイルをslimファイルに変えたい場合
gem 'html2slim'
# erbファイルを残して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名
# erbを削除して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名 -d
基本的な書き方
slimタグには閉じタグが必要ない。代わりにインデントを使ってマークアップする箇所を指定する。インデントはそろえる必要がある。（3つのスペースを使ったらその後も3つスペースに、4つスペースを使ったらそのあとも4つスペースに）
doctype html
div
h1 Hello World!
ul
li Ruby
li Rails
li HTML
HTMLで以下のように変換されている
<!DOCTYPE html>
<div>
<h1>Hello World!</h1>
<ul>
<li>Ruby</li>
<li>Rails</li>
<li>HTML</li>
</ul>
</div>
slimの書き方
各タグの書き方
| slimでの書き方 | コンパイル後のコード(HTML) |
|---|---|
div |
<div></div> |
html |
<html></html> |
meta |
<meta></meta> |
header |
<header></header> |
footer |
<footer></footer> |
table |
<table></table> |
h1 |
<h1></h1> |
p |
<p></p> |
a |
<a></a> |
ul |
<ul></ul> |
li |
<li></li> |
テキストの書き方
テキストは|で定義する。
p
| Hello World
/複数行の場合（改行なし）
p
|
こんにちは。
私の名前は田中太郎です。
/複数行の場合（改行あり）
p
|
こんにちは。<br>
私の名前は田中太郎です。
HTMLでは以下のように変換されている
<p>Hello World</p>
<p>こんにちは。
私の名前は田中太郎です。</p>
<p>こんにちは。<br>
私の名前は田中太郎です。</p>
属性の書き方
slim:slim
a href='http://www~' リンク先の名前
HTMLでは以下のように変換されている
<a href="http://www~">リンク先の名前</a>
IDとclassの書き方
divを省略することができる。
#id_name
idを指定する
div.class_name
classを指定する
.class_name
classを指定する
HTMLでは以下のように変換されている
<div id="id_name">idを指定する</div>
<div class="class_name">classを指定する</div>
<div class="class_name">classを指定する</div>
Author And Source
この問題について(Railsでslimを使う), 我々は、より多くの情報をここで見つけました https://qiita.com/mzmz__02/items/445894348fb5fdbbe33f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .