Koa.js - Templating

ปั๊กเป็นเครื่องยนต์เทมเพลต Templating engine ใช้เพื่อลบความยุ่งเหยิงของโค้ดเซิร์ฟเวอร์ของเราด้วย HTML โดยเชื่อมสตริงเข้ากับเทมเพลต HTML ที่มีอยู่ Pug เป็นเครื่องมือสร้างเทมเพลตที่ทรงพลังมากซึ่งมีคุณสมบัติหลากหลายเช่นfilters, includes, inheritance, interpolationฯลฯ มีพื้นมากมายที่จะครอบคลุมนี้

ในการใช้ Pug กับ Koa เราจำเป็นต้องติดตั้งโดยใช้คำสั่งต่อไปนี้

$ npm install --save pug koa-pug

เมื่อติดตั้งปั๊กแล้วให้ตั้งเป็นเครื่องมือสร้างเทมเพลตสำหรับแอปของคุณ เพิ่มรหัสต่อไปนี้ในไฟล์ app.js ของคุณ

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

ตอนนี้สร้างไดเร็กทอรีใหม่ที่เรียกว่า views ภายในไดเร็กทอรีให้สร้างไฟล์ชื่อ first_view.pug และป้อนข้อมูลต่อไปนี้

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello Views!

หากต้องการเรียกใช้หน้านี้ให้เพิ่มเส้นทางต่อไปนี้ในแอปของคุณ

_.get('/hello', getMessage); // Define routes

function *getMessage(){
   this.render('first_view');
};

คุณจะได้รับผลลัพธ์เป็น -

สิ่งที่ปั๊กทำคือมันแปลงมาร์กอัปที่ดูเรียบง่ายนี้เป็น html เราไม่จำเป็นต้องติดตามการปิดแท็กของเราไม่จำเป็นต้องใช้คีย์เวิร์ด class และ id แทนที่จะใช้ "." และ '#' เพื่อกำหนด รหัสข้างต้นจะถูกแปลงเป็นไฟล์

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
    
   <body>
      <p class = "greetings" id = "people">Hello Views!</p>
   </body>
</html>

Pug สามารถทำอะไรได้มากกว่าการทำให้มาร์กอัป HTML ง่ายขึ้น มาสำรวจคุณสมบัติบางอย่างของ Pug

แท็กง่ายๆ

แท็กจะซ้อนกันตามการเยื้อง เช่นในตัวอย่างข้างต้น<title> อยู่เยื้องภายใน <head>แท็กก็เลยอยู่ข้างใน อย่างไรก็ตาม<body> แท็กอยู่ในการเยื้องเดียวกันดังนั้นจึงเป็นพี่น้องของ <head> แท็ก

เราไม่จำเป็นต้องปิดแท็ก ทันทีที่ Pug พบแท็กถัดไปในระดับการเยื้องเดียวกันหรือระดับนอกมันจะปิดแท็กให้เรา

มีสามวิธีในการใส่ข้อความภายในแท็ก -

แยกพื้นที่ -

h1 Welcome to Pug

ข้อความไปป์ -

div
   | To insert multiline text, 
   | You can use the pipe operator.

บล็อกข้อความ -

div.
   But that gets tedious if you have a lot of text. 
   You can use "." at the end of tag to denote block of text. 
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

ความคิดเห็น

Pug ใช้ไวยากรณ์เดียวกันกับ JavaScript (//) ในการสร้างข้อคิดเห็น ความคิดเห็นเหล่านี้ถูกแปลงเป็นความคิดเห็น html (<! - comment ->) ตัวอย่างเช่น,

//This is a Pug comment

ความคิดเห็นนี้ถูกแปลงเป็น -

<!--This is a Pug comment-->

คุณลักษณะ

ในการกำหนดแอตทริบิวต์เราใช้รายการแอตทริบิวต์ที่คั่นด้วยเครื่องหมายจุลภาคในวงเล็บ แอตทริบิวต์คลาสและ ID มีการแสดงพิเศษ บรรทัดโค้ดต่อไปนี้ครอบคลุมการกำหนดแอตทริบิวต์คลาสและ id สำหรับแท็ก html ที่กำหนด

div.container.column.main#division(width = "100",height = "100")

โค้ดบรรทัดนี้ถูกแปลงเป็น -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

ส่งผ่านค่าไปยังเทมเพลต

เมื่อเราสร้างเทมเพลต Pug เราสามารถส่งผ่านค่าจากตัวจัดการเส้นทางของเราซึ่งเราสามารถใช้ในเทมเพลตของเราได้ สร้างตัวจัดการเส้นทางใหม่โดยใช้รหัสต่อไปนี้

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app // equals to pug.use(app) and app.use(pug.middleware)
});

var _ = router(); //Instantiate the router

_.get('//dynamic_view', dynamicMessage); // Define routes

function *dynamicMessage(){
   this.render('dynamic', {
      name: "TutorialsPoint", 
      url:"https://www.tutorialspoint.com"
   });
};

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

จากนั้นสร้างไฟล์มุมมองใหม่ในไดเร็กทอรี views ชื่อ dynamic.pug โดยใช้โค้ดต่อไปนี้

html
   head
      title = name
   body
      h1 = name
      a(href = url) URL

เปิด localhost:3000/dynamicในเบราว์เซอร์ของคุณและสิ่งต่อไปนี้ควรเป็นผลลัพธ์ -

เรายังสามารถใช้ตัวแปรที่ส่งผ่านเหล่านี้ภายในข้อความ ในการแทรกตัวแปรที่ส่งผ่านระหว่างข้อความของแท็กเราใช้ไวยากรณ์ # {variableName} ตัวอย่างเช่นในตัวอย่างข้างต้นหากเราต้องการแทรกคำทักทายจาก TutorialsPoint เราจะต้องใช้รหัสต่อไปนี้

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

วิธีการใช้ค่านี้เรียกว่าการแก้ไข

เงื่อนไข

เราสามารถใช้ประโยคเงื่อนไขและโครงสร้างแบบวนซ้ำได้เช่นกัน ลองพิจารณาตัวอย่างที่ใช้ได้จริงนี้หากผู้ใช้เข้าสู่ระบบเราต้องการแสดง "สวัสดีผู้ใช้" และหากไม่เป็นเช่นนั้นเราจะแสดงลิงก์ "เข้าสู่ระบบ / สมัครใช้งาน" ให้เขาดู เพื่อให้บรรลุเป้าหมายนี้เราสามารถกำหนดเทมเพลตง่ายๆเช่น -

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

เมื่อเราสร้างสิ่งนี้โดยใช้เส้นทางของเราและถ้าเราส่งวัตถุเช่น -

this.render('/dynamic',{user: 
   {name: "Ayush", age: "20"}
});

มันจะแสดงข้อความว่าสวัสดี Ayush อย่างไรก็ตามหากเราไม่ส่งผ่านวัตถุใด ๆ หรือส่งต่อโดยไม่มีรหัสผู้ใช้เราจะได้รับลิงค์ลงทะเบียน

รวมและส่วนประกอบ

Pug เป็นวิธีที่ใช้งานง่ายมากในการสร้างส่วนประกอบสำหรับหน้าเว็บ ตัวอย่างเช่นหากคุณเห็นเว็บไซต์ข่าวส่วนหัวที่มีโลโก้และหมวดหมู่จะได้รับการแก้ไขเสมอ แทนที่จะคัดลอกไปยังทุกมุมมองเราสามารถใช้การรวม ตัวอย่างต่อไปนี้แสดงให้เห็นว่าเราสามารถใช้ include -

สร้างสามมุมมองด้วยรหัสต่อไปนี้ -

header.pug

div.header.
   I'm the header for this website.

content.pug

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

footer.pug

div.footer.
   I'm the footer for this website.

สร้างเส้นทางสำหรับสิ่งนี้ดังนี้

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //Equivalent to app.use(pug)
});

var _ = router(); //Instantiate the router

_.get('/components', getComponents);

function *getComponents(){
   this.render('content.pug');
}

app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

ไปที่ localhost:3000/componentsคุณควรได้รับผลลัพธ์ต่อไปนี้

include ยังสามารถใช้เพื่อรวมข้อความธรรมดา CSS และ JavaScript

คุณสมบัติอื่น ๆ ของปั๊กยังมีอีกมากมาย อย่างไรก็ตามสิ่งเหล่านี้ไม่อยู่ในขอบเขตของบทช่วยสอนนี้ นอกจากนี้คุณยังสามารถสำรวจปั๊กที่ปั๊ก