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

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

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

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

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

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

ทำไมต้อง Slim?

Slim เป็นเครื่องมือสร้างเทมเพลต Ruby ที่รวดเร็วและน้ำหนักเบา ใช้การย่อหน้าแทนแท็ก HTML มันถูกใช้กันอย่างแพร่หลายในแอปพลิเคชัน Rails เนื่องจากไวยากรณ์ที่สะอาดและการอ่านที่ดีขึ้น

ประโยชน์ของ Slim ได้แก่:

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

Slim ขับเคลื่อนโดย Temple และ Tilt เป็นตัวเลือกยอดนิยมในหมู่นักพัฒนา Rails ที่ต้องการมุมมองที่สวยงามและสะอาด

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

ตัวอย่างไวยากรณ์ 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 ตัวอย่างการมาร์กอัป

    #content
      p ตัวอย่างนี้แสดงให้เห็นว่าไฟล์ Slim พื้นฐานมีลักษณะอย่างไร

      == yield

      - unless items.empty?
        table
          - items.each do |item|
            tr
              td.name = item.name
              td.price = item.price
      - else
        p
          | ไม่พบรายการ โปรดเพิ่มสินค้าคงคลัง
    div id="footer"
      = render 'footer'
      | © #{year} #{author}

    

ตัวอย่าง 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.now
    - Post.all.each do |post|
      article
        h2 = post.title
        div = post.body