หัดเขียน 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 กันให้มากขึ้น

รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHP
ติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th

Leave a Reply

Your email address will not be published. Required fields are marked *