Tìm hiểu về slim teamplate
Sau đây sẽ là một đoạn code HTML: doctype html html head title Slim Examples meta name="keywords" content="template language" meta name="author" content=author javascript: alert('Slim supports embedded javascript!') body h1 Markup ...
Sau đây sẽ là một đoạn code HTML:
doctype html
html
head
title Slim Examples
meta name="keywords" content="template language"
meta name="author" content=author
javascript:
alert('Slim supports embedded javascript!')
body
h1 Markup examples
#content
p This example shows you how a basic Slim file looks like.
== yield
- unless users.empty?
table
- users.each do |user|
tr
td.name = user.name
td.address = user.address
- else
p
| No users found. Please add some inventory.
Thank you!
div id="footer"
= render 'footer'
| Copyright © #{year} #{author}
Như các bạn thấy đoạn code HTML phía trên rất ngắn và lạ. Đó chính là slim. Vậy slim là gì? và tại sao lại nên sử dụng nó?.
Slim là một ngôn ngữ mẫu và mục đích của nó là giảm bớt cú pháp không cần thiết mà code của bạn không trở nên khó hiểu. Slim cho phép bạn viết code 1 cách dễ dàng và ngắn gọn hơn mà vẫn đảm bảo đúng định dạng, tiết kiệm thời gian viết code. Cấu trúc slim cũng rất linh hoạt đồng thời cho phép bạn viết thêm phần mở rộng và bổ sung cú pháp. Sau đây chúng ta sẽ cùng tìm hiểu qua về slim để hiểu rõ hơn về nó.
1. Bắt đầu với slim
Để cài đặt slim bạn chạy lệnh:
gem install slim
hoặc thêm vào file gem và sau đó chạy bundle install
gem 'slim'
2. Line indicators
-
#####Verbatim text |
sử dụng ký tự |, nó sẽ cho phép hiển thị những dòng lệnh sau nó trình bày căn lề thụt vào trong sâu hơn so với ký tự | sẽ là 1 string.
ví dụ:
body
p
| This line is on the left margin.
This line will have one space in front of it.
This line will have two spaces in front of it.
And so on...
nó sẽ tương ứng với cú pháp html như sau:
<body>
<p>
This line is on the left margin.
This line will have one space in front of it.
This line will have two spaces in front of it.
And so on...
</p>
</body>
Bạn cũng có thể nhúng html vào dòng văn bản:
- users.each do |u|
| <tr><td>#{u.name}</td><td>#{u.address}</td></tr>
-
#####**Inline html < **
Bạn cũng có thể viết thẻ HTML trực tiếp trong slim, có thể trộn lẫn tuỳ ý:
<html>
head
title Example
<body>
- if users.empty?
- else
table
- users.each do |u|
<tr><td>#{u.name}</td><td>#{u.address}</td></tr>
</body>
</html>
- #####**Control code - ** Các dấu - biểu thị mã điều khiển. Ví dụ như là các vòng lặp và biểu thức điều kiện. Không được viết dấu - đằng sau. Khối lệnh được xác định bằng thụt đầu dòng. 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 articles.empty?
| No inventory
- #####**Output = **
= javascript_include_tag
"jquery",
"application"
Sử dụng `=` tương đương với `<%= %>` đưa ra output. Tương tự như với `-`, nếu code ruby của bạn cần viết trên nhiều dòng, chỉ cần 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.
- #####Comment Sử dụng dấu /! để có thể comment HTML.
p
/ This line won't get displayed.
Neither does this line.
/! This will get displayed as html comments.
Comment với điều kiện là IE thì sử dụng `/[...]`, ví dụ:
/[if IE]
p Get a better browser.
tương đương với:
3. HTML tags
- #####Closed tags Bạn có thể đóng thẻ bằng cách thêm dấu / ở cuối. Nhưng thường thì việc naỳ không cần thiết lắm, vì các thẻ HTML chuẩn (img, br, ...) đã được thiết kế đóng tự động.
img src="image.jpg"/
- #####Trailing and leading whitespace (<, >) Bạn có thể thêm 1 khoảng trắng sau thẻ bằng cách sử dụng dấu > theo sau thẻ đó. ví dụ:
a> href='url1' Link1 a> href='url2' Link2
Hoặc thêm 1 khoảng trắng lên đầu bằng cách thêm `<`
a< href='url1' Link1 a< href='url2' Link2
Hoặc bạn cũng có thể kết hợp cả 2:
a<> href='url1' Link1
-
#####Inline tags
Khi bạn muốn viết nhiều thẻ trên 1 dòng thì hãy dùng dấu :. Ví dụ:
ul
li.first: a href="https://google.com.vn/" google
li: a href="https://viblo.asia" blog
Bạn cũng có thể đóng sử dụng các cặp dấu đóng mở ngoặc để dễ đọc hơn:
ul
li.first: a[href="https://google.com.vn/"] google
li: a[href="https://viblo.asia"] blog
- #####Text content Bạn có thể viết nó trên 1 dòng như các thẻ:
body h1 id="headline" Hello world!!!.
hoặc bạn có thể sử dụng dấu | để xử lý.
body
h1 id="headline"
| Hello world!!!.
hoặc kích hoạt và phụ thuộc vào văn bản thông minh thay thế
body
h1 id="headline"
Hello world!!!.
- #####Attributes Bạn viết các thuộc tính trực tiếp sau thẻ đó. Nội dung của các thuộc tính bạn phải cho vào dấu "" hoặc là '
a href="https://github.com/slim-template/slim" title='slim-template' What is Slim?
- #####Attributes wrapper Để cho dễ hiểu và dễ đọc, bạn có thể sử dụng các dấu {},[],() để nhóm các thuộc tính vào.
body
h1(id="logo") = page_logo
h2[id="tagline" class="small tagline"] = page_tagline
Sử dụng dấu `=` để gán nội dung text của thẻ đó. Nếu thẻ đó có nhiều thuộc tính và được cho vào trong ngoặc bạn cũng có thể viết trên nhiều dòng:
h2[id="tagline" class="small tagline"] = page_tagline
Bạn cũng có thể sử dụng thêm các dấu space:
h1 id = "logo" = page_logo h2 [ id = "tagline" ] = page_tagline
- #####Ruby attributes Viết code ruby sau dấu =. Nếu mã có chứa khoảng trắng, bạn cần viết code trong dấu ngoặc (...) hoặc {...} và [...].
body
table
- for user in users
td id="user_#{user.id}" class=user.role
a href=user_action(user, :edit) Edit #{user.name}
a href=(path_to_user user) = user.name
- #####Shortcuts
- #####Tag shortcuts Bạn có thể định nghĩa các tag shortcuts bằng cách cài đặt option :shorcut.
Slim::Engine.set_options shortcut: {'c' => {tag: 'container'}, '#' => {attr: 'id'}, '.' => {attr: 'class'} }
Trong code slim ra sẽ sử dụng:
c.content Text
-
#####Attribute shortcuts Bạn có thể định nghĩa các shortcuts tuỳ ý (giống như # cho id và . cho class)
Ví dụ:
Slim::Engine.set_options shortcut: {'&' => {tag: 'input', attr: 'type'}, '#' => {attr: 'id'}, '.' => {attr: 'class'}}
Trong ví dụ này ta thêm `&` để tạo 1 shortcut cho thẻ input với thuộc tính `type`. Để sử dụng nó trong code slim ta chỉ cần làm như sau:
&text name="user"
&password name="pw"
&submit
Tương đương với:
<input type="text" name="user" /> <input type="password" name="pw" /> <input type="submit" />
- #####ID shortcut # and class shortcut . Bạn có thể xác định các thuộc tính id và class trong các dạng shortcut sau:
body
h1#headline
= page_headline
h2#tagline.small.tagline
= page_tagline
.content
= show_content
Nó sẽ tương ứng với:
body
h1 id="headline"
= page_headline
h2 id="tagline" class="small tagline"
= page_tagline
div class="content"
= show_content
Kết luận
Trên đây là những kiến thức cơ bản về slim. Ta thấy Slim có rất nhiều tính năng:
- Cú pháp đơn giản dễ hiểu và ngắn gọn
- An toàn (hỗ trợ html_safe cho rails và tự động escape HTML mặc định)
- Cấu hình cao
- Khả năng mở rộng thông qua các plugins
- Hiệu năng cao (tốc độ tương đương với ERB/Erubis, ...)
- 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, ...)
Vì vậy hãy sử dụng nó để có thể tiết kiếm thời gian viết code và tận dụng nhưng ưu điểm mà nó có.
Cảm ơn bạn đã quan tâm đến bài viết này.
