CodeUtility
ใช้ชีวิตนักพัฒนาให้ง่ายขึ้นไปอีก!

HTML to Pug Converter

แปลง HTML เป็นไวยากรณ์เทมเพลต Pug

แท็กต่างๆ: html pug ตัวแปลงเทมเพลต แปลงโค้ด

🚀 194,724 การแปลงทั้งหมด (4 ในเดือนนี้)

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

เครื่องมือออนไลน์ฟรีนี้ช่วยให้คุณสามารถแปลง HTML มาตรฐานให้เป็นเทมเพลต Pug ที่สะอาดและมีการเยื้องที่ดีได้อย่างรวดเร็ว เหมาะสำหรับนักพัฒนาที่ใช้ Node.js และเฟรมเวิร์คเว็บสมัยใหม่ที่ต้องการโค้ดที่อ่านง่ายและดูแลรักษาได้ง่าย

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

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

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

Pug คืออะไร?

Pug เป็นเอนจินเทมเพลตที่มีประสิทธิภาพสูงสำหรับ Node.js ได้รับแรงบันดาลใจจาก Haml มันแทนที่ HTML แบบดั้งเดิมด้วยไวยากรณ์ที่กระชับและไวต่อช่องว่าง ช่วยปรับปรุงความชัดเจนของโค้ดและลดการทำซ้ำ

Pug มักใช้ในแอปเว็บที่สร้างด้วย Express.js และมีฟีเจอร์ขั้นสูงเช่น การใช้โค้ดซ้ำ การฝังตรรกะ และการเยื้องที่สะอาดขึ้น

เรียนรู้เพิ่มเติมได้ที่ เอกสาร Pug อย่างเป็นทางการ.

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


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p คุณยอดเยี่ยมมาก
      else
        p ลองใช้ดูสิ!
      p.
        Pug เป็นภาษาสำหรับเทมเพลตที่กระชับและเรียบง่าย
        โดยเน้นที่ประสิทธิภาพและฟีเจอร์ที่แข็งแกร่ง

ตัวอย่าง HTML vs Pug

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>คุณยอดเยี่ยมมาก</p>
      <p>Pug เป็นภาษาสำหรับเทมเพลตที่กระชับและเรียบง่าย โดยเน้นที่ประสิทธิภาพและฟีเจอร์ที่แข็งแกร่ง</p>
    </div>
  </body>
</html>

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      p คุณยอดเยี่ยมมาก
      p Pug เป็นภาษาสำหรับเทมเพลตที่กระชับและเรียบง่าย โดยเน้นที่ประสิทธิภาพและฟีเจอร์ที่แข็งแกร่ง