เครื่องมือแปลง HTML เป็น Haml

เครื่องมือนี้คืออะไร?

ตัวแปลงออนไลน์ฟรีนี้ช่วยให้คุณแปลง HTML และ ERB (Embedded Ruby) เป็นโค้ด Haml ที่สะอาดและอ่านง่ายได้ทันที เหมาะสำหรับนักพัฒนา Ruby on Rails ที่ต้องการทำให้มุมมองของพวกเขาง่ายขึ้นและทันสมัยขึ้น

วิธีการใช้งาน

1. วางหรือพิมพ์โค้ด HTML+ERB ของคุณลงในตัวแก้ไข
2. คลิก Convert เพื่อสร้าง Haml
3. ดาวน์โหลด คัดลอก หรือแชร์ผลลัพธ์ Haml ได้ทันที

คุณยังสามารถ ลงชื่อเข้าใช้ด้วย Google หรือ GitHub เพื่อบันทึกประวัติการแปลงและดาวน์โหลดไฟล์ในภายหลัง

ทำไมต้อง Haml?

Haml (HTML Abstraction Markup Language) เป็นเครื่องมือสร้างเทมเพลตที่ไวต่อช่องว่างสำหรับ Ruby ซึ่งใช้กันทั่วไปใน Rails มันแทนที่ HTML แบบอินไลน์ด้วยไวยากรณ์ที่สะอาดและมีการเยื้องที่อ่านและดูแลรักษาได้ง่ายขึ้น

ข้อดีของ Haml ได้แก่:

• ไวยากรณ์ที่สะอาดและสั้นกว่าเมื่อเทียบกับ ERB
• การอ่านและการดูแลรักษาที่ดีขึ้น
• การสร้างเทมเพลตส่วนหน้าที่เร็วขึ้นสำหรับนักพัฒนา Rails

Haml ถูกใช้โดยร้านค้าและนักพัฒนา Ruby หลายแห่งสำหรับการพัฒนา Rails อย่างรวดเร็ว รวมถึง Unspace Interactive.

เรียนรู้เพิ่มเติมได้ที่ เว็บไซต์ Haml อย่างเป็นทางการ.

ตัวอย่างไวยากรณ์ Haml

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

    

ตัวอย่าง HTML+ERB vs Haml

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>

Haml

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