ข้ามไปยังเนื้อหา
เครื่องมือแปลงไฟล์

แปลง HTML เป็น Pug ออนไลน์

แปลง HTML เป็นไวยากรณ์เทมเพลต Pug (เดิมชื่อ Jade) ซึ่งใช้การเยื้องแทนแท็กปิด สลับระหว่างเอกสารเต็มกับส่วน HTML และเลือกแท็บ จุลภาค และรูปแบบเครื่องหมายคำพูด แปลง HTML บนอุปกรณ์ในเบราว์เซอร์โดยไม่อัปโหลด

เริ่มสร้างเทมเพลต Pug จากมาร์กอัป HTML ที่มีอยู่

HTML is sent to the server for conversion. Use a snippet without confidential data.

Pug output options
Load an example (replaces your input)

HTML

Pug

เหมาะกับงานแบบไหน

  • เริ่มสร้างเทมเพลต Pug จากมาร์กอัป HTML ที่มีอยู่
  • ตรวจว่าแอตทริบิวต์และการซ้อนแปลงเป็น Pug อย่างไรด้วยโค้ดสั้นๆ ก่อนแปลงทั้งหน้า

วิธีใช้

  1. วาง HTML หรือโหลดตัวอย่าง (ส่วน HTML แอตทริบิวต์ฟอร์ม หรือเอกสาร HTML) การโหลดตัวอย่างจะแทนที่ข้อมูลเข้า
  2. เปิดโหมดเฉพาะส่วนเพื่อแปลงเฉพาะโค้ดโดยไม่มีตัวห่อ html, head และ body ตัวอย่างด้านล่างใช้โหมดเฉพาะส่วน เปิดแท็บและจุลภาค และปิดเครื่องหมายคำพูดคู่
  3. คัดลอก Pug แล้วคอมไพล์ด้วยระบบ Pug ของคุณเพื่อตรวจ HTML ที่เรนเดอร์

ข้อมูลเข้า HTML

<section class="card"><h2>News</h2><p>Registration is open</p></section>

ผลลัพธ์ Pug (โหมดเฉพาะส่วน เปิดแท็บและจุลภาค)

section.card
	h2 News
	p Registration is open

รายละเอียดและข้อจำกัด

เมื่อปิดโหมดเฉพาะส่วน ระบบจะมอง HTML เป็นเอกสารและอาจเพิ่ม html, head และ body เปิดโหมดนี้เมื่อต้องการเฉพาะองค์ประกอบ

การใช้แท็บปนช่องว่างอาจเปลี่ยนความสัมพันธ์แม่–ลูกใน Pug ให้ใช้รูปแบบการเยื้องตามโปรเจกต์

HTML ที่ซ้ำจะไม่ถูกแปลงเป็นลูป each, mixins หรือตัวแปรของ Pug และไม่รวม CSS รูปภาพ หรือสคริปต์ภายนอก

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

FAQ

ทำไมจึงเพิ่มแท็ก html และ body?

ในโหมดเอกสาร ตัวแยกวิเคราะห์จะเติมองค์ประกอบชั้นนอกให้ครบ เปิดโหมดเฉพาะส่วนเพื่อแปลง HTML ของคอมโพเนนต์โดยไม่มีตัวห่อ

แปลง HTML เป็น Pug ใน VS Code หรือผ่านบรรทัดคำสั่งได้หรือไม่?

หน้านี้ใช้แพ็กเกจโอเพนซอร์ส html2pug ติดตั้งจาก npm เพื่อแปลงไฟล์ในสคริปต์หรือผ่านบรรทัดคำสั่ง หรือใช้หน้านี้ต่อสำหรับโค้ดสั้นๆ

แปลง Pug กลับเป็น HTML อย่างไร?

หน้านี้แปลงเฉพาะ HTML เป็น Pug ให้คอมไพล์เทมเพลตด้วย Pug เอง เช่น ใช้แพ็กเกจ pug-cli เพื่อรับ HTML กลับมา

HTML ของฉันถูกอัปโหลดหรือไม่?

ไม่ แปลงบนอุปกรณ์ในเบราว์เซอร์โดยไม่อัปโหลด HTML ล้างข้อมูลเข้าหลังใช้อุปกรณ์ร่วมกับผู้อื่น

ข้อกำหนดและแหล่งอ้างอิง