หลังจากที่เรารู้จักวิธีการใช้งาน jade จากบทความตอนที่แล้ว ในบทความนี้เราจะมาทำความรู้จักการเขียน jade กันต่อ โดยอันดับแรกต้องเริ่มจากโครงสร้างของเอกสาร HTML โดยปกติจะใช้งาน tag เปิดและ tag ปิด แต่ใน jade จะใช้การย่อหน้าแทนดังนั้นโครงสร้างเริ่มต้นของเอกสารจะเป็นรูปแบบดังนี้
1 2 3 4 5 6 7 8 |
doctype html html(lang="en") head title= pageTitle link(rel='stylesheet', href='/stylesheets/style.css') script(type='text/javascript', src="http://code.jquery.com/jquery-1.9.1.min.js") body // วาง content ไว้ตรงนี้ |
ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้
1 |
ชื่อTag(attribute, attribute, ...) |
จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง
1 |
link(rel='stylesheet', href='/stylesheets/style.css') |
จะได้ผลลัพธ์ออกมาเป็น
1 |
<link rel="stylesheet" href="/stylesheets/style.css"/> |
สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้
1 2 3 4 |
script(type='text/javascript'). if (foo) { bar(1 + 5) } |
ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ
1 |
p You are amazing |
ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้
1 |
<p>You are amazing</p> |
และอีกรูปแบบคือ
1 2 |
p. You are amazing |
เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้
1 2 3 |
<p> You are amazing </p> |
เราเลยใส่ . ต่อท้าย script เพื่อให้มีการขึ้นบรรทัดใหม่ และนี่ก็เป็นรูปแบบในการเขียน jade แบบเบื้องต้น จะเห็นได้ว่าเราสามารถเขียน jade ได้ง่ายๆ ในบทความต่อไปเราจะทำความรู้จักกับ jade กันให้มากขึ้น