HTML sang Slim Converter

Công cụ chuyển đổi trực tuyến miễn phí này cho phép bạn ngay lập tức chuyển đổi các mẫu HTML và ERB (Embedded Ruby) thành mã Slim sạch và tối giản. Đây là lựa chọn tuyệt vời cho các nhà phát triển Ruby on Rails muốn hiện đại hóa và đơn giản hóa các view của họ.

Cách Sử Dụng

Dán hoặc nhập mã HTML+ERB của bạn vào trình soạn thảo.
Nhấn Chuyển Đổi để tạo mã Slim.
Tải xuống, sao chép hoặc chia sẻ kết quả Slim ngay lập tức.

Bạn cũng có thể đăng nhập bằng Google hoặc GitHub để lưu lịch sử chuyển đổi và tải xuống tệp sau này.

Tại Sao Chọn Slim?

Slim là một công cụ tạo mẫu Ruby nhanh và nhẹ sử dụng thụt lề thay vì thẻ HTML. Nó được sử dụng rộng rãi trong các ứng dụng Rails nhờ cú pháp sạch và khả năng đọc cải thiện.

Lợi ích của Slim bao gồm:

Cú pháp tối giản và dựa trên khoảng trắng
Phát triển nhanh hơn với ít ký tự hơn để gõ
Cải thiện khả năng bảo trì cho các view phức tạp

Slim được hỗ trợ bởi Temple và Tilt. Đây là lựa chọn phổ biến trong số các nhà phát triển Rails muốn có các view đẹp và sạch.

Tìm hiểu thêm tại trang web chính thức của Slim.

Ví Dụ Cú Pháp Slim


doctype html
html
  head
    title Slim Example
    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 what a basic Slim file looks like.

      == yield

      - unless items.empty?
        table
          - items.each do |item|
            tr
              td.name = item.name
              td.price = item.price
      - else
        p
          | No items found. Please add inventory.
    div id="footer"
      = render 'footer'
      | © #{year} #{author}

Ví Dụ HTML+ERB vs Slim

HTML+ERB


<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Blogg</h1>
    <p>Time: <%%= Time.now %%></p>
    <%% Post.all.each do |post| %%>
      <article>
        <h2><%%= post.title %%></h2>
        <div><%%= post.body %%></div>
      </article>
    <%% end %%>
  </body>
</html>

Slim


| 
html
  head
    meta[charset="utf-8"]
  body
    h1 Blogg
    p
      | Time:
      = Time.now
    - Post.all.each do |post|
      article
        h2 = post.title
        div = post.body