【Nodejs】淺談網頁開發中的模板語言:Pug 和 EJS

更新於 發佈於 閱讀時間約 18 分鐘

這一篇文章,我想來談談模板語言(template language/engine)。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著,因此拿這兩個出來寫一篇文章。

Pug

指令:npm install pug
raw-image

比起 HTML 的語法,pug 語法可以說簡潔很多。

那下面直接放一個html跟一個pug

// shop.html 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商城</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />

</head>

<body>
<header class="main-header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">NodeJs商城</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">商城</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin/add-product">添加产品</a>
</li>

</ul>
</div>
</nav>

</header>

<main class="container p-5">
<h1>我的产品</h1>
<div class="row">
<div class="col-md-4 p-2">
<div class="card" style="width: 18rem;">
<img src="https://miro.medium.com/max/1200/1*m5RYM_Wkj4LsZewpigV5tg.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">产品名称</h5>
<p class="card-text">产品详情介绍信息,该课程讲解十分细致,各个知识点都有所涉及。</p>
<p>29.99</p>
<a href="#" class="btn btn-primary">加入购物车</a>
</div>
</div>

</div>
</div>
</main>
</body>

</html>
// shop.pug
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title #{docTitle}
link(rel="stylesheet", href="/css/bootstrap.min.css")
body

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
a.navbar-brand(href="/") NodeJs商城
button.navbar-toggler(type="button", data-toggle="collapse",data-target="#navbarNav" ,aria-controls="navbarNav" ,aria-expanded="false",
aria-label="Toggle navigation")
span.navbar-toggler-icon
div#navbarNav.collapse.navbar-collapse
ul.navbar-nav
li.nav-item
a.nav-link(href="/") 商城
li.nav-item.active
a.nav-link(href="/admin/add-product") 添加产品

main.container.p-5
h1 我的产品
if prods.length > 0
div.row
each product in prods
div.col-md-4.p-2
div.card(style="width: 18rem;")
img.card-img-top(src="https://miro.medium.com/max/1200/1*m5RYM_Wkj4LsZewpigV5tg.jpeg",alt="产品图片")
div.card-body
h5.card-title #{product.title}
p.card-text 产品详情介绍信息,该课程讲解十分细致,各个知识点都有所涉及。
p ¥29.99
a.btn.btn-primary(href="#") 加入购物车
else
div.alert.alert-danger(role="alert") 暂无产品

恩...他好像有一種python的感覺(笑)。

附上html轉pug得線上工具:https://pughtml.com

pug使用動態網頁

那大概知道pug的代碼風格後,要來提到動態網頁的部分了。恩...可能我是小菜雞的緣故,目前碰到的還是以字串、變數或陣列為主。

先來看一下這一段js代碼:

// adminData 為一個array
const adminData = require("./admin");

router.get("/", (req, res, next) => {
const products = adminData.products;
// 要傳出去的東西
res.render("shop", { prods: products, docTitle: "商城" });
});

module.exports = router;

我在這一段代碼中主要傳兩個東西,一個是陣列prods,一個是字串docTitle,那傳到的位置為shop.pug(笑死我剛剛打成png,圖然感覺這個單字好可愛,一定是我打錯的部分)

接著來看png的地方吧

// 傳遞字串這樣寫
title #{docTitle}

// 陣列的話主要是要一個一個輸出,這邊要使用each...in...
each product in prods
div.col-md-4.p-2
div.card(style="width: 18rem;")
img.card-img-top(src="https://miro.medium.com/max/1200/1*m5RYM_Wkj4LsZewpigV5tg.jpeg",alt="产品图片")
div.card-body
h5.card-title #{product.title}
p.card-text 产品详情介绍信息,该课程讲解十分细致,各个知识点都有所涉及。
p ¥29.99
a.btn.btn-primary(href="#") 加入购物车

Include的方式去封裝pug

在每一次轉html轉pug的時候,是不是有一些東西會重複寫(沒錯~),而工成師的經隨就是:懶!!!(不是我說的,是我們老師說的!!!),因此我們可以使用include的方式去封裝pug

要封裝的部分用一個開一個位置給他

// includes/header.pug 
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title #{docTitle}
link(rel="stylesheet", href="/css/bootstrap.min.css")

接著在每一個需要用到它的地方:

include includes header.pug 
... 其他代碼



EJS(Embedded JavaScript templates)

用於在Node.js應用程式中生成動態HTML內容。它允許你將JavaScript嵌入到HTML中,從而可以根據資料動態生成HTML內容。

指令: npm install ejs
設定:要在你的伺服器上加上這兩行
app.set('view engine', 'ejs');
app.set('views', 'views');

那ejs我是把它區分成三種,照理來說是混搭使用,那為了清楚展示,我故意差開寫:

  1. <% js條件 %> 在裡面寫js的條件判斷式
<!DOCTYPE html>
<html>
<head>
<title>Conditional Example</title>
</head>
<body>
<% if (showMessage) { %>
<h1>Message is shown!</h1>
<% } else { %>
<h1>Message is not shown!</h1>
<% } %>
</body>
</html>
  1. <%= title %> 後台有東西要傳入,加等號
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
  1. <%- %> 類似pug的封裝
<!DOCTYPE html>
<html>
<head>
<title>Unescaped Content Example</title>
</head>
<body>
<div>
<h1>Unescaped Content Example</h1>
<div class="content">
<%- htmlContent %>
</div>
</div>
</body>
</html>

<%- htmlContent %> 裡面就是裝載著封裝的html

這樣的方式也可以用在express框架的router

app.get('/', (req, res) => {
const htmlContent = '<p>This is <strong>unescaped</strong> content.</p>';
res.render('unescaped', { htmlContent });
});

🥰那~~以上是本文所分享的內容。如果您發現任何錯誤或遺漏,請不吝賜教。

留言
avatar-img
留言分享你的想法!
avatar-img
W. C. Chen的沙龍
4會員
10內容數
W. C. Chen的沙龍的其他內容
2024/03/27
先來名詞解釋jython跟JES: jython是一種實現了Python語言的Java平台版本的解釋器。它允許開發人員在Java虛擬機(JVM)上運行Python代碼,從而實現了Python語言與Java平台的無縫集成。 JES(Jython Environment for Students)是
Thumbnail
2024/03/27
先來名詞解釋jython跟JES: jython是一種實現了Python語言的Java平台版本的解釋器。它允許開發人員在Java虛擬機(JVM)上運行Python代碼,從而實現了Python語言與Java平台的無縫集成。 JES(Jython Environment for Students)是
Thumbnail
2024/03/25
ETL是資料倉儲領域中一個重要的概念,全稱為Extract-Transform-Load,中文可譯為"抽取-轉換-載入"。ETL的作用是將來自不同來源的資料抽取出來,經過清理、轉換、整合等處理後,最終將處理好的資料載入到資料倉儲或其他單一的資料存放區
Thumbnail
2024/03/25
ETL是資料倉儲領域中一個重要的概念,全稱為Extract-Transform-Load,中文可譯為"抽取-轉換-載入"。ETL的作用是將來自不同來源的資料抽取出來,經過清理、轉換、整合等處理後,最終將處理好的資料載入到資料倉儲或其他單一的資料存放區
Thumbnail
2023/08/29
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
2023/08/29
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
這一篇文章,我想來談談模板語言(template language/engine)。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著,因此拿這兩個出來寫一篇文章。 Pug 指令:npm install pug 比起 HTML 的語法,pug 語法可以說簡潔很多。 那下面
Thumbnail
這一篇文章,我想來談談模板語言(template language/engine)。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著,因此拿這兩個出來寫一篇文章。 Pug 指令:npm install pug 比起 HTML 的語法,pug 語法可以說簡潔很多。 那下面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News