Koa.js - 模板引擎

上一頁
下一頁

Pug 是一種模板引擎。模板引擎用於去除伺服器程式碼中 HTML 的雜亂，避免大量使用字串拼接來構建現有的 HTML 模板。Pug 是一款非常強大的模板引擎，它具有多種功能，例如**過濾器、包含、繼承、插值**等。這方面有很多內容需要學習。

要在 Koa 中使用 Pug，我們需要使用以下命令安裝它。

$ npm install --save pug koa-pug

安裝 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');
};

您將收到以下輸出：

Hello Views

Pug 所做的是將這個非常簡單的標記轉換為 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> 標籤在同一縮排級別，因此它是 <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 屬性有特殊的表示形式。以下程式碼行涵蓋了為給定 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 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://tutorialspoint.tw"
   });
};

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，您應該會看到以下輸出：

Templating Variables

我們也可以在文字中使用這些傳遞的變數。要在標籤文字之間插入傳遞的變數，我們使用 #{variableName} 語法。例如，在上面的示例中，如果我們想要插入 Greetings from TutorialsPoint，那麼我們必須使用以下程式碼。

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

這種使用值的方法稱為插值。

條件語句

我們也可以使用條件語句和迴圈結構。考慮這個實際示例，如果使用者已登入，我們希望顯示“Hi, User”，否則，我們希望向他顯示“登入/註冊”連結。為了實現這一點，我們可以定義一個簡單的模板，例如：

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

它將顯示一條訊息“Hi, Ayush”。但是，如果我們不傳遞任何物件或傳遞沒有 user 鍵的物件，那麼我們將獲得一個註冊連結。

包含和元件

Pug 提供了一種非常直觀的方式來建立網頁元件。例如，如果您看到一個新聞網站，帶有徽標和類別的頁首始終是固定的。與其將其複製到每個檢視中，我們可以使用 include。以下示例顯示瞭如何使用 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，您應該會看到以下輸出。

Templating Components

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

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

列印頁面
上一頁
下一頁
廣告