หัดเขียน Jade ตอนที่ 1

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

ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้

จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง

จะได้ผลลัพธ์ออกมาเป็น

สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้

ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ

ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้

และอีกรูปแบบคือ

เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้

เราเลยใส่ . ต่อท้าย script เพื่อให้มีการขึ้นบรรทัดใหม่ และนี่ก็เป็นรูปแบบในการเขียน jade แบบเบื้องต้น จะเห็นได้ว่าเราสามารถเขียน jade ได้ง่ายๆ ในบทความต่อไปเราจะทำความรู้จักกับ jade กันให้มากขึ้น

รู้จักการใช้งาน Emmet เบื้องต้น

ในปัจจุบันการเขียน Code HTML จำเป็นต้องรู้จักตัวช่วยอย่าง Emmet เพราะ Emmet จะช่วยทำให้เราสามารถเขียน HTML ได้อย่างรวดเร็วมากขึ้น โดยใช้ Systax ของ CSS ที่เรารู้จักกันเป็นอย่างดีอยู่แล้ว ดังนั้นการเรียนรู้การใช้งาน จึงไม่ใช่เรื่องยาก

ก่อนอื่นมาทำความรู้จักกับ Emmet กันก่อน Emmet จะเป็น Plug-in สำหรับ Text Editor สามารถใช้ได้กับ Text Editor เกือบทุกยี่ห้อบนโลกนี้ ไม่ว่าจะเป็น Dreamwaver, Sublime, Atom, Eclipse หรือแม้กระทั้ง Notepad++ เราสามารถเข้าไป Download plug-in มาติดตั้งได้ที่ emmet.io/downlaod แต่ถ้าเราใช้ Editor ที่สามารถติดตั้ง Package ได้อย่างเช่น Sublime หรือ Atom เราสวามารถเข้าไปติดตั้ง Package ได้จาก Package Manager สำหรับแต่ละตัวได้เลย ซึ่งถ้าเป็นบาง Editor เช่น Atom หรือ Visual Studio Code จะทำการติดตั้ง Emmet มาให้เลย ไม่ต้องไป Download ให้เสียเวลา(สงสัยจะเป็น package ที่ขาดไม่ได้จริงๆ)

หลังจากได้ Emmet มาแล้วคราวนี้เราก็มาดูการใช้งานกัน เราสามารถใช้ Systax ในการเขียน CSS มาใช้ได้ดังนี้

ถ้าเราอยากได้

เราสามารถพิมพิ์

div#container (แล้วกด Tab)

สังเกตว่าเราใช้ # แทน id เหมือนใน CSS

และเช่นเดียวกันถ้าเราอยากได้

เราจะพิมพิ์

div.highlight (แล้วกด Tab)

ในทำนองเดียวกันเราสามารถใช้ “[]” ในการระบุ attribute ได้ นอกจากนี้ยังมี Syntax พิเศษสำหรับเพิ่มข้อความเข้าไปใน Element ด้วย เครื่องหมาย “{}”

เช่นถ้าเราต้องการผลลัพธ์เป็น

;

เราจะพิมพิ์

a[href=some-url]{click here} (แล้วกด Tab)

ส่วนถ้าเราต้องการ element ซ้อน element เราจะใช้ เครื่องหมาย “>”

เช่น ถ้าเราอยากได้ผลลัพธ์

เราจะพิมพิ์

header>h1 (แล้วกด Tab)

เราสามารถซ้อนลงไปกี่ขั้นก็ได้

ส่วนถ้าเราต้องการ

เราจะพิมพิ์

div>label+input (แล้วกด Tab)

และจุดเด่นที่สุดของ Emmet คือเราสามารถระบุจำนวนได้ด้วย เครื่องหมาย “*”

เช่นถ้าเราอยากได้

เราจะพิมพิ์

ul#list>(li.list-item*4) (แล้วกด Tab)

เราใช้ “*” เพื่อบอกว่าต้องการ li ที่มี class เป็น list-item ทั้งหมด 4 items

ลองฝึกใช้งานกันดูนะครับ รับรองว่าจะทำให้การเขียน HTML นั้นง่ายขึ้นจริงๆ และเราจะไม่จำเป็นต้องพึ่ง Design View อีกต่อไป