HTML sang Haml Converter

Chuyển HTML/ERB sang Haml nhanh chóng với công cụ online. Lý tưởng cho lập trình viên Rails muốn code gọn, không cần setup.

Thẻ: chuyển đổi mã erb haml html rails trình chuyển đổi mẫu

Code mẫu

🚀 359,316 tổng số lượt chuyển đổi (16 trong tháng này)

📚 Gợi ý khóa học được chọn riêng cho bạn

Đang tải…

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

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 Haml.
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