ExpressJS - Templating

Pug là một công cụ tạo khuôn mẫu cho Express. 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 bao gồmfilters, 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 Express, chúng ta cần cài đặt nó,

npm install --save pug

Bây giờ Pug đã được cài đặt, hãy đặt nó làm công cụ tạo khuôn mẫu cho ứng dụng của bạn. Bạndon'tcần phải 'yêu cầu' nó. Thêm mã sau vào của bạnindex.js tập tin.

app.set('view engine', 'pug');
app.set('views','./views');

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

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

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

app.get('/first_template', function(req, res){
   res.render('first_view');
});

Bạn sẽ nhận được đầu ra là - Hello World!Pug 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 World!</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.

Các tính năng quan trọng của Pug

Bây giờ chúng ta hãy khám phá một vài tính năng quan trọng 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ó. Nhưng<body> thẻ nằm trên cùng một thụt đầu dòng, vì vậy nó là anh em của <head> nhãn.

Chúng ta không cần phải đóng các 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.

Để đưa văn bản vào bên trong thẻ, chúng tôi có 3 phương pháp:

Space seperated

h1 Welcome to Pug

Piped text

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

Block of text

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 bình luận. 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 như sau.

<!--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 như sau. -

<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 phần sau.

var express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

Và tạo một tệp dạng xem mới trong thư mục dạng xem, được gọi là dynamic.pug, với đoạn mã sau:

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

Mở localhost: 3000 / dynamic_view trong trình duyệt của bạn; Bạn sẽ nhận được kết quả sau:

Chúng tôi 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#{variableName}cú pháp. Ví dụ, trong ví dụ trên, nếu chúng ta muốn đặt Lời chào từ TutorialsPoint, thì chúng ta có thể thực hiện như 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à interpolation. Đoạn mã trên sẽ hiển thị kết quả sau. -

Đ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 những điều sau -

Nếu Người dùng đã đăng nhập, trang sẽ hiển thị "Hi, User" và nếu không, thì "Login/Sign Up"liên kết. Để đạ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 hiển thị điều này bằng cách sử dụng các tuyến đường của mình, chúng tôi có thể truyền một đối tượng như trong chương trình sau:

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

Bạn sẽ nhận được một tin nhắn - Hi, Ayush. Nhưng 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 tôi tạo, chúng tôi có thể sử dụngincludeđặc tính. Ví dụ sau cho thấy cách chúng tôi có thể sử dụng tính năng này -

Tạo 3 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 express = require('express');
var app = express();

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

Vào 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 plaintext, css và JavaScript.

Còn nhiều tính năng nữa của Pug. Nhưng 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 .