ExpressJS - 模板引擎

Pug 是 Express 的一個模板引擎。模板引擎用於避免伺服器程式碼中充斥 HTML 程式碼，以及大量拼接字串到現有 HTML 模板的情況。Pug 是一個非常強大的模板引擎，具有多種功能，包括過濾器、包含、繼承、插值等。這方面有很多內容需要學習。

要在 Express 中使用 Pug，我們需要安裝它：

npm install --save pug

現在 Pug 已經安裝好了，將其設定為應用程式的模板引擎。您無需“require”它。將以下程式碼新增到您的index.js檔案中。

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

現在建立一個名為 views 的新目錄。在其中建立一個名為first_view.pug的檔案，並在其中輸入以下資料。

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

要執行此頁面，請將以下路由新增到您的應用程式：

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

您將得到以下輸出：Hello World! Pug 將這個非常簡單的標記轉換為 HTML。我們不需要跟蹤標籤的閉合，也不需要使用 class 和 id 關鍵字，而是使用“.”和“#”來定義它們。上述程式碼首先轉換為：

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

Pug 的功能遠不止簡化 HTML 標記。

Pug 的重要功能

現在讓我們探索 Pug 的一些重要功能。

簡單的標籤

標籤根據縮排巢狀。例如，在上面的示例中，<title> 縮排在<head>標籤內，因此它在<head>標籤內。但是<body>標籤與<head>標籤在同一縮排級別，因此它是<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 註釋()。例如：

//This is a Pug comment

此註釋轉換為以下內容。

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

屬性

要定義屬性，我們使用用括號括起來的逗號分隔的屬性列表。Class 和 ID 屬性具有特殊的表示形式。以下程式碼行涵蓋了為給定的 HTML 標籤定義屬性、類和 ID。

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

此程式碼行轉換為以下內容：

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

將值傳遞給模板

當我們渲染 Pug 模板時，我們實際上可以從路由處理程式傳遞一個值，然後我們可以在模板中使用它。建立一個具有以下內容的新路由處理程式。

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

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

app.listen(3000);

並在 views 目錄中建立一個新的檢視檔案，名為dynamic.pug，其中包含以下程式碼：

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

在瀏覽器中開啟 localhost:3000/dynamic_view；您應該得到以下輸出：

我們也可以在文字中使用這些傳遞的變數。要在標籤文字之間插入傳遞的變數，我們使用#{variableName}語法。例如，在上面的示例中，如果我們想放置來自 TutorialsPoint 的問候語，我們可以這樣做。

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

這種使用方法稱為插值。上面的程式碼將顯示以下輸出：

條件語句

我們也可以使用條件語句和迴圈結構。

考慮以下情況：

如果使用者已登入，頁面應顯示“Hi, User”，否則應顯示“Login/Sign Up”連結。為此，我們可以定義一個簡單的模板，例如：

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

當我們使用路由渲染它時，我們可以像以下程式一樣傳遞一個物件：

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

您將收到一條訊息：Hi, Ayush。但是，如果我們不傳遞任何物件或傳遞沒有 user 金鑰的物件，那麼我們將獲得一個註冊連結。

包含和元件

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

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

app.listen(3000);

轉到 localhost:3000/components，您將收到以下輸出：

include也可用於包含純文字、CSS 和 JavaScript。

Pug 還有許多其他功能。但這些超出了本教程的範圍。您可以在Pug中進一步探索 Pug。

列印頁面