Speed up your HTML and CSS workflow with Emmet and Pug

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

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

สร้าง HTML ทันที

เมื่อเขียน HTML จำนวนมากพร้อมกันการเขียนแต่ละแท็กด้วยมืออาจเป็นเรื่องที่น่าเบื่อและรวดเร็ว ตัวอย่างเช่นเมื่อเขียนรายการลิงก์เราต้องแน่ใจว่าแท็ก <ul> <li> และ <a> ทั้งหมดเปิดและปิดในตำแหน่งที่ถูกต้อง มิฉะนั้นลิงก์อาจใช้งานไม่ได้และเค้าโครงของทั้งหน้าจะยุ่งเหยิง

วิธีใช้ Emmett

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

Emmet ช่วยให้คุณสร้างองค์ประกอบได้โดยพิมพ์ตัวเลือกคล้าย CSS จากนั้นแยกวิเคราะห์และขยายองค์ประกอบนั้นเป็น HTML ทั่วไป Bello เป็นองค์ประกอบพื้นฐานที่สร้างขึ้นใน Emmet

Emmet จะตรวจจับองค์ประกอบนี้แยกวิเคราะห์และแปลงองค์ประกอบเป็น HTML มาตรฐานดังที่แสดงด้านล่าง

การดูองค์ประกอบ Emmett อย่างรวดเร็วแสดงให้เห็นว่าการคูณถูกนำมาจาก li (3) และแต่ละ liq เรียกว่าบทหลังจากจำนวนที่เหมาะสม (โดย 3)

สังเกตจำนวนอักขระที่มีองค์ประกอบ Emmet และจำนวน HTML มาตรฐาน แม้แต่ตัวอย่างสั้น ๆ นี้ยังแสดงให้เห็นว่าสามารถประหยัดเวลาได้มากเพียงใดโดยใช้ชวเลขของ Emmett

เอ็มเม็ตยังตระหนักถึงบริบท ตัวอย่างเช่นหากเรากำลังแก้ไข <ตาราง> อาจเป็นไปได้ว่าเราต้องเติมองค์ประกอบ <tr> (ซึ่งเป็นแถว) เราก็ต้องบอกว่าต้องการเท่าไร

นี่เป็นเพียงตัวอย่างเล็กน้อยของสิ่งที่ Emmett ทำได้ แต่มีตัวเลือกการกำหนดค่าเพิ่มเติมมากมาย นอกจากนี้ยังรวมถึงการแก้ไข CSS การสร้างคลาส BEM (ตัวแก้ไของค์ประกอบบล็อก) และตัวสร้าง Lorem Epsom

นอกจากนี้ยังเป็นที่น่าสังเกตว่าโปรแกรมแก้ไขโค้ดส่วนใหญ่มีปลั๊กอินที่สร้างขึ้นหรือสนับสนุนโดยพวกเขา คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในหน้าเอกสารของ Emmet

ใช้ปั๊กสำหรับเนื้อหาไดนามิก

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

ทั้งหมดนี้เป็นไปได้ใน JavaScript แต่การเรนเดอร์เนื้อหานี้ล่วงหน้าช่วยเพิ่มความเร็วให้เราโดยไม่ต้องอาศัยเบราว์เซอร์ของผู้ใช้

ก้าวไปข้างหน้านี่คือตัวสร้างเทมเพลตสำหรับ HTML คุณสามารถเขียนเพจในรูปแบบ “.pug” และปั๊กจะอ่านส่งข้อมูลไดนามิกบางส่วนและส่งคืน HTML มาตรฐาน

ตัวอย่างด้านล่างคือวิธีที่คุณจะเขียนโค้ดในปั๊กเพื่อสร้าง HTML เดียวกันกับอินสแตนซ์ Emmet (ด้านบน)

ไฟล์ Pug ใช้เฉพาะการเยื้องเพื่อระบุการซ้อนกัน ค่านี้สามารถทำซ้ำเพื่อสร้าง HTML หลายรายการพร้อมกันได้ ไฟล์ “.pug” เหล่านี้ออกแบบมาให้ใช้ซ้ำได้หลายครั้งในโปรเจ็กต์

สามารถติดตั้งปั๊กได้จาก NPM Package Manager แต่ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งานปั๊กให้ไปที่เว็บไซต์

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

Leave a Comment