สอนวิธีใช้ Jade Template Engine

บทความนี้เราจะมาลงรายละเอียดเกี่ยวกับการใช้งาน Jade ให้มากขึ้นนะครับ ไม่ว่าจะเป็นการ include และ extend ของ template การวน loop ตัวแปรเพื่อนำมาแสดงผล รวมไปถึงการใช้งาน mixins ที่จะทำให้โค้ด jade ของเรากลายเป็น snippet ที่สามารถนำไป reuse ได้ เรามาดูกันว่าฟีเจอร์ของ Jade เหล่านี้จะช่วยให้การทำงานกับ template นั้นสะดวกขึ้นมากขนาดไหน

โดยเนื้อหาของบทความนี้ก็ถือเป็นตอนที่ 3 แล้วนะครับ หากใครยังไม่ได้อ่าน 2 ตอนก่อนหน้านี้ สามารถอ่านได้ที่ด้านล่างนี้เลยครับ

Attributes

อย่างแรกเลย เรามาดูวิธีการใส่ attribute ให้กับ html tag ของเราก่อนครับ

  • class จะใช้ . เช่น .xxx
  • id จะใช้ # เช่น #xxx
  • attributes จะใช้ () เช่น (xxx="value")

สมมติ เราอยากได้ html หน้าตาแบบนี้

เราก็จะต้องเขียน Jade ในรูปแบบนี้ครับ

จะสังเกตว่าหากมีหลายๆ attribute เราก็สามารถใส่เรียงต่อๆ กันไป โดยใช้ , คั่นได้เลยครับ

Inheritance

inheritance ก็คือการที่เราสามารถสร้าง template ใหม่ที่มาจากการต่อยอด(extend) template เดิมครับ ข้อดีของการใช้ inheritance ก็คือ เมื่อใดที่เรามีการแก้ไข template แม่ พวก template ลูกๆ ที่ไป extend มาก็จะได้รับผลของการเปลี่ยนแปลงนั้นๆ ไปด้วย และที่สำคัญก็คือ template ลูกนั้น สามารถ override เนื้อหาที่มาจาก template แม่ได้ด้วย เพียงแต่เราจะต้องระบุด้วยว่าพื้นที่ส่วนไหนใน template แม่ ที่จะยอมให้ template ลูก มา override เนื้อหาได้ เพื่อจะได้เห็นภาพมากขึ้น เรามาลองทำกันเลยดีกว่าครับ

1. สร้าง template แม่ ขึ้นมา

ให้เราสร้างไฟล์ template แม่ ขึ้นมาโดยใช้ชื่อว่า base.jade แล้วใส่โค้ดด้านล่างนี้ลงไปครับ จากนั้นก็เอาไฟล์นี้ไปใส่ไว้ในโฟลเดอร์ layouts

2. กำหนดส่วนที่จะยอมให้ template ลูก override เนื้อหาได้

ต่อมาเราจะต้องมาดูว่าส่วนไหนที่เราจะยอมให้ template ลูก มา override เนื้อหาได้ ซึ่งเราจะเรียกพื้นที่ส่วนนี้ว่า block ครับ ให้เราสร้าง block ขึ้นมาตามที่เราต้องการเลย โดย block นี้จะเป็น block เปล่าๆ หรือจะมีเนื้อหาข้างในก็ได้ หาก block ไหนมีเนื้อหาอยู่ข้างในด้วยก็หมายความว่าเนื้อหานั้นคือเนื้อหา default ของ block นั้นนั่นเองครับ

จากโค้ดด้านบน จะเห็นว่าผมสร้าง block ขึ้นมาหลายจุดเลยครับ เพราะผมมองว่ามันมีโอกาสที่ template ลูกจะมีเนื้อหาแตกต่างจาก template แม่ในส่วนนั้นได้ครับ

3. สร้าง template ลูกขึ้นมา โดยกำหนดให้มันต่อยอดจาก template แม่

ทีนี้เราก็มาสร้าง template ลูก กันบ้างครับ ให้เราสร้างไฟล์ index.jade ขึ้นมา แล้วใส่โค้ดนี้ลงไปได้เลย

โค้ดด้านบนจะเป็นการบอกว่า template นี้ สร้างโดยการต่อยอดมาจาก base.jade นะ ซึ่งแน่นอนว่าหน้าตาของมันจะเหมือนกับ template ที่ต่อยอดมาทุกประการ

4. ใส่เนื้อหาลงใน template ลูก เพื่อ override เนื้อหาจาก template แม่

แต่บางครั้งเราก็จำเป็นต้องแก้ไขเนื้อหาบางส่วนที่เราต่อยอดมาครับ ที่เห็นชัดๆ เลยก็คือ ส่วนของ title ที่แต่ละหน้ามักจะไม่เหมือนกันนั่นเอง เวลาเราจะ override เนื้อหาของ block ส่วนไหน ก็ให้เขียนเหมือนกับตอนที่เราสร้าง block ยังไงยังงั้นเลยครับ

ส่วน block ไหนที่ไม่โดน override ก็จะแสดงเนื้อหาตาม template แม่ ครับ

Includes

ส่วน include จะเป็นการดึงเอาเนื้อหาจาก template หนึ่งมาใส่ไว้ในอีก template หนึ่งครับ เหมาะสำหรับการแบ่ง template ออกเป็นส่วนย่อยๆ เช่น header, sidebar, footer เป็นต้น เรามาดูวิธีการใช้งานกันเลยครับ

1. แบ่ง template ออกเป็นส่วนย่อยๆ

แยก template ส่วนบนของเว็บออกมาเป็น header.jade

แยก template ส่วนล่างของเว็บออกมาเป็น footer.jade

2. ดึง template ย่อยมาใช้ ผ่าน Include

ทีนี้เวลาจะเรียกใช้ header หรือ footer เราก็ไม่จำเป็นต้องมาเขียนโค้ดยาวๆ ซ้ำๆ กันทุกหน้าแล้ว ให้เราไปที่ไฟล์ base.jade แล้วลองเอา include เข้ามาใช้ในส่วนของ body ดู โค้ดก็จะมีหน้าตาแบบนี้ครับ

จะสังเกตว่า header และ footer ของผมจะอยู่นอก block content นะครับ เพราะผมไม่อยากให้ template ลูก มายุ่งกับ design นั่นเอง

Mixins

mixin นั้นจะเป็นการเอาโค้ด Jade ที่เคยเขียนไว้แล้ว มา reuse ครับ สมมติเรามีการใช้โค้ด html ชุดนี้บ่อยๆ

แบบนี้เราทำมันให้เป็น mixin ไปเลยดีกว่าครับ ลองดูโค้ดด้านล่างนี้

โค้ดด้านบนจะเป็นการสร้าง mixin ที่มีชื่อว่า panel ขึ้นมาครับ โดย mixin ตัวนี้จะรับ parameter 2 ตัว ก็คือ head และ content ตามลำดับ เวลาจะเรียกใช้งาน ก็ให้ใส่เครื่องหมาย + แล้วตามด้วยชื่อ mixin แบบนี้ครับ

แต่เพื่อความเป็นระเบียบเรียบร้อย ผมแนะนำให้แยกไฟล์สำหรับเก็บ mixin ออกมาต่างหากเลยจะดีกว่าครับ เวลาจะใช้กับ template ไหน ก็ให้ include เอาแบบนี้

Iteration

มาถึงเรื่องสำคัญครับ นั่นก็คือ iteration นั่นเอง สมมติเรามีข้อมูลของบทความหลายๆ บทความ แล้วเราต้องการจะนำมันมาแสดงในหน้าเว็บ โค้ดของเราที่เขียนด้วย Express จะมีหน้าตาประมาณนี้ครับ

เราสามารถวน loop ค่า articles ที่ Express ส่งมาได้ง่ายๆ แบบนี้เลยครับ

Conditionals

สุดท้ายมาดู conditionals ครับ สมมติเราอยากจะเช็คก่อนว่า articles นั้นมีค่ามั้ย ถ้ามีก็ค่อยให้วน loop เอาข้อมูลมาแสดง แต่ถ้าไม่ ก็ให้แสดงข้อความว่าไม่พบข้อมูล

บทสรุป

ก็น่าจะพอเห็นภาพกันคร่าวๆ แล้วนะครับ สำหรับความสามารถของ Jade จริงๆ ที่ผมเล่ามาก็เป็นแค่ภาพกว้างๆ เท่านั้นเองนะครับ ยังมีอะไรอีกมากมายที่ผมยังไม่ได้พูดถึง เพื่อนๆ พี่ๆ น้องๆ สามารถไปศึกษาเพิ่มเติมดูได้ครับที่เว็บหลัก

มาถึงตรงนี้ คาดว่าหลายๆ คน คงจะพอคุ้นเคยกับ Express และ Jade กันมาพอสมควรแล้วใช่มั้ยครับ บทความต่อไปผมเลยตั้งใจจะให้เป็น workshop เกี่ยวกับการใช้ Express ร่วมกับ Jade ในการทำเว็บไซต์ รออ่านกันได้เลยนะครับ

(Visited 8,350 times, 6 visits today)

2 Responses to “สอนวิธีใช้ Jade Template Engine”

  1. ถ้าอยากเขียนาี html เหมือนเดิมก็ใช้ ejs ได้ครับ
    ตอนนี้ก็มีตัวใหม่อย่าง mustache ที่รวมข้อดีของทั้ง 2 อย่าง

  2. เขียนได้สั้นดี ชอบ

Leave a Reply