vi
new
+7
Avatar
Vương Hưng @vuong.xuan.hung
3.1K 106 40
Đã đăng vào thg 5 28, 2015 10:24 SA 4 phút đọc
1.9K

Slim template for Rail

Đã có bao giờ bạn cảm thấy code HTML của mình thật là dài dòng, đôi khi là hoa mắt để tìm thấy nơi kết thúc của một thẻ tag chưa? Nếu có thì chắc hẳn những lúc đó bạn đã mong muốn có một công cụ nào đó giúp xóa bỏ những cú pháp thừa thãi, hay là những thẻ đóng nhàm chán phải không? Vậy thì bạn đã tìm được câu trả lời ở bài viết này rồi đó, đó chính là Slim.

Slim là gì?

Slim là một ngôn ngữ giao diện mẫu nhanh, gọn nhẹ, mục đích của nó là nhằm giảm cú pháp cho phần view mà không làm cho code trở nên khó hiểu.

Tính năng của Slim

  • Cú pháp thanh nhã:
  • Cú pháp ngắn gọn, không có các thẻ tag (Thay thế bằng lùi đầu dòng)
  • Có thể cấu hình các shortcut tags (ví dụ # thay cho <div id="..."> và . thay cho <div class="..."> trong cấu hình mặc địn.
  • An toàn:
  • Hỗ trợ html_safe cho Rails
  • Tự động escape HTML mặc định
  • Khả năng tùy biến cao, linh hoạt
  • Khả năng mở rộng thông qua các plugins:
  • Logic less mode tương tự như Mustache
  • Includes
  • Translator/I18n
  • Hiệu năng cao:
  • Tốc độ tương đương với ERB/Erubis
  • Hỗ trợ Streaming trong Rails
  • Hỗ trợ đầy đủ Unicode cho các thẻ tag và các thuộc tính
  • Hỗ trợ bởi hầu hết các framework lớn (như Rails, Sinatra, ...)

Cài đặt và sử dụng

Để sử dụng nó, đầu tiên bạn phải thêm dòng sau vào trong Gemfile:

# Gemfile
gem 'slim-rails'

Sau đó chạy lệnh bundle install để cài đặt gem này.

slim-rails cung cấp Slim generator cho Rails 3 và 4. Nó dựa trên haml-rails và về cơ bản là giống nhau:

  • Mỗi khi bạn tạo ra một controller hay scaffold, bạn sẽ có Slim template (thay vì ERB trong view)
  • Khi ứng dụng Rails của bạn load, Slim sẽ được load và khởi tạo tự động

Slim hỗ trợ chức năng chuyển đổi file từ đuôi *.html.erb thành đuôi *.html.slim, đồng thời chuyển đổi cả cú pháp HTML thông thường thành cú pháp của Slim.

Để sử dụng tính năng này, bạn cần thêm dòng sau vào Gemfile:

# Gemfile
gem 'html2slim'

Sau đó chạy bundle install để cài đặt gem này.

Sử dụng lệnh erb2slim app/views --delete.

Lệnh trên sẽ chuyển đổi toàn bộ file nằm trong đường dẫn app/views sang SLIM, --delete có tác dụng xóa đi file cũ, nếu không thiết lập --delete thì sau khi chuyển đổi sẽ tồn tại song song 2 file đuôi .erb và .slim.

Cấu trúc của Slim template

Dưới đây là một ví dụ thể hiện cấu trúc của một Slim template:

# app/views/users/index.html.slim
doctype html
html
  head
    title Slim Examples
    link type="text/css" rel="stylesheet" href="user.css"
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
  body
    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks.

    == yield

    - if @users.any?
      table#users
        - @users.each do |user|
          tr
            td.name = user.name
            td.email = user.email
            td.address = user.address
    - else
      p No users found. Please add some inventory.
        Thank you!

    #footer
      == render 'footer'
      | Copyright © #{@year} #{@author}

Line indicators

Verbatim text |

| sẽ sao chép tất cả những dòng có lề thụt vào nhiều hơn nó để hiển thị như một string.Ví dụ:

p
  | This line is the first line.
    This line is the second line.

Đoạn trên sẽ được dịch ra HTML như sau:

<p>
  This line is the first line.
  This line is the second line.
</p>

Bạn cũng có thể nhúng HTML vào dòng text như sau:

- users.each do |user|
   | <tr><td>#{user.name}</td><td>#{user.address}</td></tr>

Control code -

Sử dụng - thay thế cho <% %> trong view của Rails, ví dụ như đối với vòng lặp hay điều kiện. Nếu code ruby của bạn cần viết trên nhiều dòng, hãy thêm \ vào cuối của dòng đó. Nếu như dòng đó kết thúc với dấu , (ví dụ các tham số của một phương thức) khi đó sẽ không cần thêm dấu \ nữa.

body
  - if users.empty?
    | No inventory

Output =

Sử dụng = thay thế cho <%= %> trong view của Rails. Tương tự như với -, nếu code ruby của bạn cần viết trên nhiều dòng, hãy thêm \ vào cuối dòng. Và nếu như kết thúc dòng là , thì không cần thêm \ nữa.

= javascript_include_tag \
   "jquery",
   "application"

Output without HTML escaping ==

Cũng giống như (=), nhưng mà nó không qua phương thức escape_html.

Code comment / and HTML comment /!

Sử dụng / cho code comments và /! cho html comments. Ví dụ:

p
  / This line won't get displayed.
    Neither does this line.
  /! This will get displayed as html comments.

Đoạn Slim trên dịch sang HTML sẽ là:

<p><!--This will get displayed as html comments.--></p>

IE conditional comment /[...]

/[if IE]
     p Get a better browser

Đoạn Slim trên dịch sang HTML sẽ là:

<!--[if IE]><p>Get a better browser.</p><![endif]-->

HTML Tags

Closed tags

Bạn có thể đóng thẻ một cách rõ ràng bằng cách thêm dấu / đằng sau.

img src="image.png" /

Tuy nhiên, điều này là không cần thiết vì những thẻ tag như (img, br ...) đều được đóng tự động.

Inline tags

Để sử dụng các thẻ tag trên cùng một dòng, sử dụng : sau mỗi một thẻ, ví dụ:

ul
   li: a href="http://google.com.vn" Google

Tuy nhiên, để cho dễ đọc, các thuộc tính nên được bao lại bằng các kí tự {...}, (...), [...]. Ví dụ:

ul
   li: a[href="http://google.com.vn"] Google

Ruby attributes

Code Ruby được viết sau dấu =. Nếu code có chứa các khoảng trắng, bạn cần phải viết các thuộc tính ở trong (...) hoặc {...} và [...].

table
 - @users.each do |user|
    td id=”user_#{user.id}” class= user.role
       a href=user_path(user) = user.name

Attribute merging

Bạn có thể sử dụng một Array để nhóm nhiều giá trị của một thuộc tính lại với nhau, ví dụ:

a class=["green","blue"]
a class=[:green, :blue]

Splat attributes *

Splat shortcut cho phép bạn trả về một hash với các cặp thuộc tính/giá trị.

.card*{'data-url'=>place_path(place), 'data-id'=>place.id} = place.name

khi đó, mã HTML sinh ra là:

<div class="card" data-id="1234" data-url="/place/1234">Slim's house</div>

Bạn cũng có thể sử dụng các methods hoặc instance variables trả về một hash như sau:

.card *method_which_returns_hash = place.name
.card *@hash_instance_variable = place.name

Shortcut

ID shorcut # và class shortcut .

Nếu không có thẻ tag nào phía trước thì :

  • # sẽ tương đương với mã HTML: <div id="..."></div>
  • . sẽ tương đương với mã HTML: <div class="..."></div>

Đối với trường hợp có thẻ tag phía trước, khi đó:

h1#content <-> h1 id="content"

Tag shortcuts

Bạn có thể tự định nghĩa các tag shortcuts ở trong config/initializers/slim.rb bằng cách cài đặt option :shorcut. Ví dụ:

# config/initializers/slim.rb
Slim::Engine.set_options shortcut: {'c' => {tag: 'container'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }

Khi đó, đoạn code Slim:

c.content Some text

sẽ được dịch sang mã HTML như sau:

<container class="content">Some text</container>

Attribute shortcuts

Chúng ta cũng có thể tự định nghĩa các attribute shortcuts ở trong config/initializers/slim.rb, ví dụ như sau:

# config/initializers/slim.rb
Slim::Engine.set_options shortcut: {'&' => {tag: 'input', attr: 'type'}, '#' => {attr: 'id'}, '.' => {attr: 'class'}}

Khi đó, đoạn code Slim:

&text name="user"
&password name="password"

sẽ được dịch sang mã HTML như sau:

<input type="text" name="user" />
<input type="password" name="password" />

Nguồn tham khảo

  1. https://github.com/slim-template/slim
  2. https://github.com/slim-template/slim-rails
  3. http://www.rubydoc.info/gems/slim/frames
HTML Ruby on Rails

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí