เป็นไปได้ไหมที่จะสร้างโค้ด HTML ทั้งหมดของไซต์ในไม่กี่นาที หากไม่ใช่วินาที เป็นไปได้ถ้าคุณใช้ Emmet! วิธีการใหม่นี้ช่วยให้สามารถพัฒนาโค้ดได้อย่างรวดเร็วใน HTML, XML และรูปแบบโค้ดที่มีโครงสร้างอื่นๆ
Emmet เป็นปลั๊กอินสำหรับโปรแกรมแก้ไขข้อความยอดนิยมมากมาย ด้วย Emmet คุณจะสร้างโครงกระดูกของหน้าในรูปแบบที่มีเหตุผลแต่ถูกบีบอัดอย่างมาก จากนั้นขยายให้ขยายเป็นโค้ด HTML ที่สมบูรณ์และเหมาะสม ผลลัพธ์ให้ความรู้สึกราวกับมหัศจรรย์:ข้อความขยายเป็นร้อยบรรทัดของไวยากรณ์ และคุณมีหน้าคงที่ หรือแม้แต่โครงสร้างของเว็บไซต์ทั้งหมด พร้อมในไม่กี่นาที
คุณจะได้เรียนรู้วิธีใช้ Emmet เพื่อสร้างหน้าเว็บแบบสแตติกเต็มรูปแบบที่นี่ Visual Studio Code ใช้สำหรับบทช่วยสอนนี้เนื่องจากมาพร้อมกับการรองรับ Emmet ในตัว คุณสามารถใช้ Emmet ในตัวแก้ไขอื่นๆ เช่น Sublime Text และ Atom ได้ แต่คุณจะต้องเพิ่มการรองรับผ่านส่วนขยาย
สร้างไฟล์เว็บไซต์ของคุณ
ในการเริ่มต้น ให้เปิด Visual Studio Code
เลือก “ไฟล์ -> ไฟล์ใหม่” เพื่อสร้างเอกสารเปล่าใหม่
เลือก "ไฟล์ -> บันทึกเป็น" เพื่อบันทึกไฟล์โดยให้นามสกุลเป็น "html"
โครงสร้างพื้นฐาน
องค์ประกอบของหน้าเว็บแต่ละหน้าจัดเป็นกลุ่มและกลุ่มย่อย เมื่อเขียนโค้ดด้วย Emmet คุณจะต้องระลึกไว้เสมอว่าแต่ละกลุ่มมีรายการที่สามารถเป็นกลุ่มขององค์ประกอบต่างๆ ได้มากขึ้น
หมายเหตุ :แม้ว่าเราจะอธิบายพื้นฐาน แต่จะดีกว่าถ้าคุณคุ้นเคยกับพื้นฐานของไวยากรณ์ HTML ก่อนดำเนินการต่อ
ในระดับพื้นฐาน ไซต์ส่วนใหญ่ประกอบด้วยกลุ่ม/ส่วนดังกล่าวสามกลุ่ม:ส่วนหัว ส่วนหลักสำหรับเนื้อหาหลัก และส่วนท้าย หากต้องการสร้างด้วย Emmet ให้พิมพ์:
#header+#mainsite+#footer
“#” หน้าแต่ละคำหมายความว่าแต่ละกลุ่มเป็น div ที่มี ID กด Enter ที่ท้ายบรรทัดเพื่อดูการทำงานของ Emmet โดยเปลี่ยนวลีเล็กๆ นี้เป็น HTML แบบมีโครงสร้างสามบรรทัด
โครงสร้างส่วนหัว
ส่วนหัวของไซต์ทั่วไปประกอบด้วยโลโก้และเมนูหนึ่งหรือสองเมนู หากต้องการเพิ่มสิ่งเหล่านั้นลงในเพจของคุณ คุณสามารถเก็บ HTML ที่ขยายจากขั้นตอนก่อนหน้าและพิมพ์โดยตรงใน Header Div จากนั้นคุณสามารถพิมพ์บางอย่างเช่น:
#logo+#menu_top+#menu_main
กด Enter เพื่อขยายสิ่งนี้ด้วย และคุณจะมี Div อีกสาม Divs สำหรับโลโก้ของเว็บไซต์ของคุณและสองเมนูในส่วนหัวของคุณ
การจัดกลุ่มใน Emmet
ด้วย Emmet คุณจะจัดกลุ่มองค์ประกอบโดยวางไว้ในวงเล็บ วิธีนี้ช่วยให้คุณสร้างโครงสร้างที่ซับซ้อนสำหรับเพจของคุณได้ ดังนั้นเลิกทำทุกอย่างจนถึงตอนนี้และเก็บเฉพาะ #header+#mainsite+footer พื้นฐานของคุณ รหัสจากเมื่อก่อน
แทนที่ #header ในรหัสของคุณด้วยสิ่งต่อไปนี้:
(#header>.logo+.menu.top+.menu.main^)
ใน Emmet คุณสามารถลดระดับโดยใช้ > และสามารถขึ้นระดับได้โดยใช้ ^ อักขระ. วิธีนี้ช่วยให้คุณเข้าถึงองค์ประกอบ เพิ่มองค์ประกอบอื่นๆ แล้วย้อนกลับขึ้นไป
ผลลัพธ์ควรมีลักษณะดังนี้:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
ด้านบนจะแปลว่า:“เพิ่ม Div (กลุ่ม) ด้วย ID #header ภายในเพิ่มสาม Divs ด้วยคลาส ".logo" ".menu.top" และ ".menu.main" กลับขึ้นไปหนึ่งระดับนอกกลุ่ม และเพิ่ม Divs อีกสองตัวถัดจากนั้นด้วยรหัส “#mainsite” และ “#footer”
โครงสร้างการโพสต์
โพสต์พื้นฐานบนไซต์ทั่วไปมักประกอบด้วยองค์ประกอบต่อไปนี้:
- ชื่อเรื่อง
- รูปภาพ
- ข้อความที่ตัดตอนมา (เป็นข้อความย่อ)
นอกจากนี้ ควรมีลิงก์ที่ช่วยให้ผู้เยี่ยมชมสามารถอ่านโพสต์จริงและอาจเชื่อมโยงไปยังหมวดหมู่ แท็ก ฯลฯ เพื่อความเรียบง่าย เราจะใช้เพียงสามองค์ประกอบดังกล่าวในตอนนี้
นี่คือรหัสที่เราจะเพิ่ม:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5 สิ่งนี้บอก Emmet ให้ “สร้าง Div ด้วยคลาส .post ข้างในนั้น ให้ใส่ชื่อหัวเรื่อง H3 รูปภาพ และย่อหน้าสำหรับข้อความที่ตัดตอนมา
เมื่อแนบ “{TEXT}” หลังองค์ประกอบ คุณจะกำหนดเนื้อหาได้ ดังนั้น ด้วย “{Post Title}” ที่บอก Emmet ว่าเนื้อหาของแต่ละชื่อ H3 จะเป็นข้อความตัวยึดตำแหน่ง “Post Title” คุณสามารถเปลี่ยน "ชื่อโพสต์" เป็นชื่อของคุณหรือสตริงข้อความใดก็ได้ที่คุณต้องการ และจะใช้เป็นเนื้อหาของชื่อโพสต์ของคุณเมื่อมีการขยายโค้ด
$ ถัดจาก "ชื่อโพสต์" เป็นตัวแปรตัวเลขที่ทำงานร่วมกับ "5" ที่คุณเห็นนอกวงเล็บ ที่ *5 หลังจากที่วงเล็บบอกให้ Emmet ทำซ้ำเนื้อหาของวงเล็บห้าครั้ง $ จะถูกแทนที่ด้วยหมายเลขซ้ำของแต่ละโพสต์ แทนที่หมายเลขนี้ด้วยจำนวนโพสต์ที่คุณต้องการบนเพจของคุณ
เพิ่มสิ่งนี้ลงในรหัสจริง ควรมีลักษณะดังนี้:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5) 
โครงสร้างส่วนท้าย
สำหรับส่วนท้าย เรากำลังเพิ่มสองกลุ่ม – สอง Divs ที่มีคลาส “.design” และ “.copyright”
รหัสมีดังนี้:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})) 
สิ่งนี้จะสร้าง div ที่มีคลาส “.design” ข้างในเป็นลิงค์กับคลาส “.designerslink” เพิ่มถัดจากนั้นคือ div ที่สองที่มีคลาส “.copyright” ภายใน div นี้เป็นย่อหน้าของข้อความธรรมดาที่มีเนื้อหาว่า "ลิขสิทธิ์ 2020 ชื่อของฉัน"
ผลลัพธ์จะเป็นดังนี้:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))) ตอนนี้ เพียงกด Enter เว็บไซต์ของคุณก็พร้อมแล้ว!
ด้วยการกดเพียงปุ่มเดียว ทุกสิ่งที่เราเห็นจนถึงตอนนี้ และกลุ่มอักขระที่อัดแน่นเป็นพิเศษนี้ จะกลายเป็นไวยากรณ์ HTML ที่เหมาะสมหลายสิบบรรทัดสำหรับหน้าเต็ม!
บันทึกการเปลี่ยนแปลงลงในไฟล์โดยกด Ctrl + ส หรือไปที่ "ไฟล์ -> บันทึก" หากต้องการดูงานของคุณ ให้เปิดเบราว์เซอร์ของคุณ จากนั้น ใช้ “ไฟล์ -> เปิด” หรือตัวจัดการไฟล์ภายนอก ค้นหาไฟล์ HTML ของคุณและเปิดด้วยตนเองในเบราว์เซอร์
บทสรุป
คุณได้เรียนรู้พื้นฐานการใช้ Emmet เพื่อสร้างไฟล์ HTML แล้ว แน่นอน คุณสามารถกลับไปที่โค้ดของคุณได้ทุกเมื่อเพื่อปรับแต่งหรือขยายโค้ดเพิ่มเติม
คุณรู้เกี่ยวกับเอ็มเม็ทแล้วหรือยัง? คุณใช้ทางลัดอื่นๆ ที่ช่วยในการสร้างไซต์หรือไม่ บอกเราในส่วนความคิดเห็นด้านล่าง
