ตัวอย่างง่ายๆ ที่ใช้กันในอดีต ก็คือ เว็บเพจจะแบ่งเป็น ส่วนหัว (Header), ส่วนเนื้อหา (Content) และส่วนท้ายหน้า (Footer) ซึ่งเนื้อหาจะเปลี่ยนหรือแสดงผลในส่วน Content แต่ Header และ Footer จะไม่ค่อยเปลี่ยนแปลง (อาจจะมีเปลี่ยนแปลงบ้าง) โดยแต่ละหน้าจะต้องเหมือนกันถึงจะเกิดความสวยงาม
ใน jade ก็เช่นกัน สามารถสืบทอดจากหน้าอื่นมาไว้ในหน้าของงานใดๆ ก็ได้ และมีวิธีการที่ไม่ซับซ้อน สามารถทำความเข้าใจได้ง่ายๆ
ก่อนอื่นที่จะเริ่มไปเขียนงานที่ซับซ้อนเราต้องเข้าใจโครงสร้างของ template เสียก่อน จะทำให้งานง่ายขึ้นและแก้ไข เพิ่มเติมได้ง่ายขึ้นตามไปด้วย
ตัวอย่างที่จะพูดถึงวันนี้ประกอบด้วย ไฟล์ layout.jade, index.jade และ main.jade
- layout.jade จะเป็นไฟล์โครงสร้างเริ่มต้นของระบบ
- index.jade เป็นหน้าหลักของ / จะเรียกใช้งาน layout.jade ผ่านคำสั่ง extends layout
- maint.jade เป็นอีกหน้าหนึ่ง /main จะเรียกใช้งาน layout.jade ผ่าน index.jade อีกครั้งหนึ่ง โดยจะเรียกด้วยคำสั่ง extends layout และ extends index ตามลำดับ
ภายใน layout จะกำหนดโครงสร้างไว้เป็น block เช่น block header, block script, block content และ block footer การใช้งาน block ในไฟล์ jade อื่นๆ จะมี 3 แบบ คือ Replace, Append และ Prepend
Replace
การเรียกใช้ Block แบบ Replace จะแทนที่ข้อมูลใน Block เดิมด้วย ข้อมูลในที่เรียกใช้งานล่าสุด เช่น
layout.jade
...
block content
p Content from layout.jade
...
index.jade
extends layout
block content
p Content from index.jade
เมื่อสั่งรันเว็บเพจแล้วหน้าจอจะแสดงข้อความ Content from index.jade เพราะเป็นการเรียกแบบ Replace
Append
การเรียกแบบ Append จะไปต่อท้าย Block ที่เรียก เช่น
index.jade
extends layout
block append content
p Content from index.jade
เมื่อสั่งรันหน้าเว็บแล้วจะมีข้อความสองบรรทัด คือ
Content from layout.jade
Content from index.jade
Prepend
การเรียกแบบเพิ่มในบรรทัดแรกของ Block
index.jade
extends layout
block prepend content
p Content from index.jade
เมื่อสั่งรันเว็บเพจจะได้ข้อความสองบรรทัดกลับกันกับ append คือ
Content from index.jade
Content from replace.jade
หน้าจอการเรียกใช้ block แบบต่างๆ
![]() |
หน้าจอที่ได้จาก index.jade (2) โดยเรียก layout.jade (1) ตอนเริ่มต้น |
![]() |
หน้าจอ main.jade (3, 4) เรียกใช้ layout.jade (1) และ index.jade (2) ในตอนแรกของไฟล์ |
![]() |
อธิบายเพิ่มเติมการเรียกจากส่วนต่างๆ ตามลำดับตัวเลขในวงเล็บ |
![]() |
รายละเอียดใน View source page ทำให้มองเห็นลำดับได้ง่ายขึ้น |
จากข้อมูลและรูปภาพข้างบนจะเห็นได้ว่า jade template นั้นง่ายต่อการใช้งาน และเรียกใช้จากเว็บอื่นๆ ได้ง่ายตามไปด้วย
ตัวอย่าง Source code:
app.js
var express = require('express');
var app = express();
// Set template path and render engine, not necessary.
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.locals.pretty = true;
app.get('/', function(req, res) {
res.render('index.jade');});
app.get('/main', function(req, res){
res.render('main.jade');
});
// Start server
app.listen(3030);
layout.jade
!!!html
head
block stylesheet
block script
script <!-- script from layout.jade (1) -->
body
block content
h1 Hello from layout.jade (1)
index.jade
extends layout
block stylesheet
<!-- Overwrite to block stylesheet (2) -->
link(href='bootstrap.min.css' rel='stylesheet')
block prepend script
script <!-- prepend to [block script](2) -->
block append content
h2 Hello from index.jade (2, append)
main.jade
extends layout
extends index
block append content
p Append from main.jade (3, append)
block prepend content
p Prepend from main (4, prepend)
--------------------
อ้างอิง:
สามารถเข้าไปดูตัวอย่างได้ที่:
http://runnable.com/Umoh1jpWr_o6ABKm/extends-and-blocks-in-jade-for-node-js
No comments:
Post a Comment