Đã đăng vào thg 6 30, 2015 2:24 SA 3 phút đọc

1.3K

Tìm hiểu về slim teamplate

Bài đăng này đã không được cập nhật trong 8 năm

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:

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

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