วิธีแก้ปัญหา Webflow ไม่ยอมให้วาง SVG และ HTML ภายนอก
เจาะลึกเบื้องหลังเครื่องมือ devpack ที่ช่วยแปลงโค้ดและไอคอนจาก Figma ให้วางลงใน Webflow Designer ได้อย่างไร้รอยต่อ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Webflow Designer รองรับเฉพาะคลิปบอร์ดในรูปแบบ JSON ที่กำหนดเองเท่านั้น
- ผู้พัฒนาสร้างเครื่องมือแปลง SVG และ HTML พร้อมระบบเรียนรู้เทมเพลตอัตโนมัติ
- รองรับการแปลง CSS เป็นคลาสของ Webflow เพื่อแก้ไขต่อใน Style panel ได้ทันที
- พัฒนาเป็นส่วนเสริมเบราว์เซอร์ให้กด Ctrl+V วางโค้ดลง Designer ได้โดยตรง
การคัดลอกไอคอนจาก Figma หรือบล็อกโค้ด HTML จาก ChatGPT แล้วนำมาวางใน Webflow Designer มักจะพบปัญหาว่าไม่มีอะไรเกิดขึ้น เนื่องจากระบบคลิปบอร์ดของ Webflow จะรับเฉพาะองค์ประกอบที่เป็นกรรมสิทธิ์ของตนเองเท่านั้น วิธีแก้ปัญหาแบบเดิมคือการใช้ Code Embed ซึ่งมีข้อจำกัดในการปรับแต่งสไตล์และจัดการโค้ดจำนวนมาก
เพื่อแก้ปัญหานี้ จึงมีการพัฒนาเครื่องมือแปลงไฟล์อย่าง SVG to Webflow และ HTML & CSS to Webflow รวมถึงส่วนเสริมเบราว์เซอร์ที่ทำงานร่วมกับ Designer ได้ทันที โดยเบื้องหลังการทำงานนี้เริ่มต้นจากการศึกษาโครงสร้างข้อมูลประเภท application/json ที่ Webflow ใช้บนคลิปบอร์ดเมื่อมีการคัดลอกองค์ประกอบภายในระบบ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในส่วนของการแปลง SVG เครื่องมือจะทำหน้าที่ทำความสะอาดโค้ด ลบข้อมูลส่วนเกิน และแปลงโครงสร้างให้เป็น Custom Element ที่ Webflow รองรับ ส่วนการแปลง HTML พร้อม CSS มีความซับซ้อนมากกว่า เนื่องจากเป้าหมายคือการสร้างองค์ประกอบพร้อมคลาสจริง เพื่อให้สามารถปรับแต่งต่อผ่าน Style panel ได้ โดยแท็กพื้นฐานจะถูกแปลงเป็นองค์ประกอบของ Webflow โดยตรง ขณะที่กฎ CSS ที่ซับซ้อนจะถูกรวบรวมไว้ในกล่อง Code Embed พร้อมรายงานผลการแปลงอย่างละเอียด
ข้อจำกัดของ Clipboard API สมัยใหม่ทำให้ไม่สามารถเขียนข้อมูลประเภท JSON ลงคลิปบอร์ดได้โดยตรง นักพัฒนาจึงต้องใช้เทคนิคจัดการอีเวนต์ copy ผ่านการคลิกปุ่มเพื่อกำหนดข้อมูลบนคลิปบอร์ด รวมถึงการพัฒนาส่วนเสริมเบราว์เซอร์เพื่อดักจับอีเวนต์ paste ในหน้า Designer ก่อนที่ระบบเดิมจะทำงาน ซึ่งช่วยเพิ่มความสะดวกรวดเร็วในการทำงานฝั่งนักออกแบบเว็บอย่างมาก
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น