HTML sang Haml Converter

Công Cụ Này Là Gì?

Công cụ chuyển đổi trực tuyến miễn phí này giúp bạn ngay lập tức chuyển đổi các mẫu HTML và ERB (Embedded Ruby) thành mã Haml sạch sẽ, dễ đọc. Nó lý tưởng cho các nhà phát triển Ruby on Rails muốn đơn giản hóa và hiện đại hóa các giao diện của họ.

Cách Sử Dụng

1. Dán hoặc nhập mã HTML+ERB của bạn vào trình soạn thảo.
2. Nhấn Chuyển Đổi để tạo Haml.
3. Tải xuống, sao chép hoặc chia sẻ kết quả Haml 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 Lại Là Haml?

Haml (HTML Abstraction Markup Language) là một công cụ tạo mẫu nhạy cảm với khoảng trắng cho Ruby, thường được sử dụng trong Rails. Nó thay thế HTML nội tuyến bằng cú pháp sạch sẽ, thụt lề dễ đọc và duy trì hơn.

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

• Cú pháp sạch hơn và ngắn hơn so với ERB
• Cải thiện khả năng đọc và duy trì
• Tạo mẫu front-end nhanh hơn cho các nhà phát triển Rails

Haml được sử dụng bởi nhiều công ty và nhà phát triển Ruby để phát triển nhanh chóng trên Rails, bao gồm Unspace Interactive.

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

Ví Dụ Cú Pháp Haml

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

    

Ví Dụ HTML+ERB vs Haml

HTML+ERB

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

Haml

!!!
%html
  %head
    %meta{ content: "text/html; charset=UTF-8", "http-equiv": "Content-Type" }/
    %meta{ charset: "utf-8" }/
  %body
    %h1 Blogg
    %p
      Thời gian:
      \#{Time.now}
    - Post.all.each do |post|
      %article
        %h2= post.title
        %div= post.body