Koa.js - Templating

Pug là một động cơ tạo khuôn mẫu. Công cụ tạo mẫu được sử dụng để loại bỏ sự lộn xộn của mã máy chủ của chúng tôi với HTML, nối các chuỗi một cách lung tung với các mẫu HTML hiện có. Pug là một động cơ tạo khuôn mẫu rất mạnh mẽ, có nhiều tính năng nhưfilters, includes, inheritance, interpolation, vv Có rất nhiều cơ sở để giải quyết vấn đề này.

Để sử dụng Pug với Koa, chúng ta cần cài đặt nó bằng lệnh sau.

$ npm install --save pug koa-pug

Sau khi cài đặt pug, hãy đặt nó làm công cụ tạo khuôn mẫu cho ứng dụng của bạn. Thêm mã sau vào tệp app.js của bạn.

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);

Bây giờ, hãy tạo một thư mục mới có tên là các khung nhìn. Trong thư mục, tạo một tệp có tên first_view.pug và nhập dữ liệu sau vào đó.

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

Để chạy trang này, hãy thêm tuyến đường sau vào ứng dụng của bạn.

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

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

Bạn sẽ nhận được đầu ra là -

Những gì Pug làm là, nó chuyển đổi đánh dấu trông rất đơn giản này thành html. Chúng tôi không cần theo dõi việc đóng các thẻ của mình, không cần sử dụng các từ khóa class và id, thay vào đó là sử dụng '.' và '#' để xác định chúng. Đoạn mã trên trước tiên được chuyển đổi thành

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

Pug có khả năng làm được nhiều việc hơn là đơn giản hóa việc đánh dấu HTML. Hãy cùng khám phá một số đặc điểm này của Pug.

Thẻ đơn giản

Các thẻ được lồng vào nhau theo thụt lề của chúng. Giống như trong ví dụ trên,<title> được thụt vào trong <head>thẻ, vì vậy nó đã ở bên trong nó. Tuy nhiên,<body> thẻ nằm trên cùng một thụt lề, do đó nó là anh em của <head> nhãn.

Chúng tôi không cần phải đóng thẻ. Ngay khi Pug gặp thẻ tiếp theo ở cùng cấp độ thụt đầu dòng hoặc bên ngoài, nó sẽ đóng thẻ cho chúng ta.

Có ba phương pháp để đưa văn bản vào bên trong thẻ:

Không gian riêng biệt -

h1 Welcome to Pug

Văn bản dạng ống -

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

Khối văn bản -

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.

Bình luận

Pug sử dụng cú pháp tương tự như JavaScript (//) để tạo nhận xét. Những bình luận này được chuyển đổi thành bình luận html (<! - comment ->). Ví dụ,

//This is a Pug comment

Nhận xét này được chuyển đổi thành -

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

Thuộc tính

Để xác định thuộc tính, chúng tôi sử dụng danh sách các thuộc tính được phân tách bằng dấu phẩy, trong ngoặc đơn. Thuộc tính lớp và ID có các đại diện đặc biệt. Dòng mã sau bao gồm việc xác định các thuộc tính, lớp và id cho một thẻ html nhất định.

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

Dòng mã này, được chuyển đổi thành -

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

Chuyển giá trị cho mẫu

Khi chúng tôi hiển thị một mẫu Pug, chúng tôi thực sự có thể chuyển cho nó một giá trị từ trình xử lý tuyến đường của chúng tôi, sau đó chúng tôi có thể sử dụng trong mẫu của mình. Tạo một trình xử lý tuyến đường mới với mã sau.

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);

Sau đó, tạo một tệp dạng xem mới trong thư mục dạng xem, có tên là dynamic.pug, bằng cách sử dụng mã sau.

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

Mở localhost:3000/dynamictrong trình duyệt của bạn và sau đây sẽ là đầu ra. -

Chúng ta cũng có thể sử dụng các biến được truyền này trong văn bản. Để chèn các biến đã chuyển vào giữa văn bản của thẻ, chúng tôi sử dụng cú pháp # {variableName}. Ví dụ, trong ví dụ trên, nếu chúng ta muốn chèn Lời chào từ TutorialsPoint, thì chúng ta phải sử dụng đoạn mã sau.

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

Phương pháp sử dụng giá trị này được gọi là nội suy.

Điều kiện

Chúng ta cũng có thể sử dụng các câu lệnh điều kiện và các cấu trúc lặp. Hãy xem xét ví dụ thực tế này, nếu một người dùng đã đăng nhập, chúng tôi muốn hiển thị "Xin chào, Người dùng" và nếu không, thì chúng tôi muốn hiển thị cho họ liên kết "Đăng nhập / Đăng ký". Để đạt được điều này, chúng ta có thể xác định một mẫu đơn giản như:

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

Khi chúng tôi kết xuất điều này bằng cách sử dụng các tuyến đường của chúng tôi và nếu chúng tôi chuyển một đối tượng như -

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

Nó sẽ đưa ra một thông báo hiển thị Xin chào, Ayush. Tuy nhiên, nếu chúng tôi không chuyển bất kỳ đối tượng nào hoặc chuyển một đối tượng không có khóa người dùng, thì chúng tôi sẽ nhận được liên kết Đăng ký.

Bao gồm và các thành phần

Pug cung cấp một cách rất trực quan để tạo các thành phần cho một trang web. Ví dụ: nếu bạn thấy một trang web tin tức, tiêu đề có biểu trưng và danh mục luôn cố định. Thay vì sao chép nó vào mọi chế độ xem, chúng ta có thể sử dụng bao gồm. Ví dụ sau cho thấy cách chúng ta có thể sử dụng bao gồm:

Tạo ba chế độ xem với mã sau:

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.

Tạo một tuyến đường cho việc này như sau.

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);

Đi đến localhost:3000/components, bạn sẽ nhận được kết quả sau.

include cũng có thể được sử dụng để bao gồm văn bản rõ ràng, CSS và JavaScript.

Còn rất nhiều tính năng khác của Pug. Tuy nhiên, những điều đó nằm ngoài phạm vi của hướng dẫn này. Bạn có thể khám phá thêm về Pug tại Pug .