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

W. C. Chen

更新於 2024/08/29發佈於 2023/08/29閱讀時間約 18 分鐘

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

Pug

指令：npm install pug

比起 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我是把它區分成三種，照理來說是混搭使用，那為了清楚展示，我故意差開寫：

<% 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>

<%= title %> 後台有東西要傳入，加等號

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

<%- %> 類似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 });
});

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

4會員

10內容數

留言0

查看全部

發表第一個留言支持創作者！

W. C. Chen的沙龍的其他內容

【Unity】使用新版Input System在Unity中創建流暢的角色控制

新版Input System 要先來調整設定：（如果日後發現移動不了，可能是這邊有出問題，可以把這邊視為一個檢查點）下載Input System 在script中的寫法： (這邊的功能是讀取移動的值而已，主要目的是讓unity讀到movement，絕對不是托篇幅的拉🥺) using

#遊戲開發 #Unity #InputSystem

【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode

今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？ 😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標

#DarkMode #Tailwind #Flowbite

【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」

當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN，這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai

#Tailwind #CSS #網頁開發

【網站部屬】比較 Netlify 與 Vercel 的網站部屬方式：一步步上手教學

這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~，那我登入的方式為github。以下就是你會看的頁面。上傳完後，就回到Netlify，選擇github，並選取剛剛建立好的專案。接著進行部屬網站前的先置(但我自己基本是除了網站名稱，

#部屬網站 #網頁 #網頁管理

【React】使用Jest寫單元測試

本文將引導您使用簡單的 Header 組件，學習如何使用 render 和 screen 來渲染和查詢元素。我們將探索如何測試文字和字元計數功能，並使用 userEvent 模擬使用者操作。了解如何使用斷言來確保測試結果正確。同時，我們將處理包含 fetch 的異步測試，並介紹 waitFor 函數

#React #Jest #網頁學習

【Unity】使用新版Input System在Unity中創建流暢的角色控制

#遊戲開發 #Unity #InputSystem

【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode

#DarkMode #Tailwind #Flowbite

【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」

#Tailwind #CSS #網頁開發

【網站部屬】比較 Netlify 與 Vercel 的網站部屬方式：一步步上手教學

你可能也想看

【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學

嘿，大家新年快樂~ 新年大家都在做什麼呢？跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~

#互動設計 #文化體驗 #慈母籤

前端轉職經驗談

2024/08/06

[前端自學轉職攻略] 6. 要學 JavaScript、jQuery、還是前端框架？

先學 JavaScript 上手後再選一個前端框架學習

#自學 #前端 #前端開發

努力成長的前端小宅宅沙龍

2024/06/26

你知道 npm yarn pnpm bun 之間的差別?

有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究使用方式：與其他工具類似，通過命令行使用，但具有自己的一些特定命令和功能。適合情境：目前在市場上使用較少，主要在一些追求性能和速度優化的專案中或者對於新技

※ 補充說明： ※ npm 常用指令： ◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱：用來安裝

Michael楊

2024/06/07

Typescript入門-Day3：環境建置

本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。

#Typescript

Michael楊

2024/06/04

Javascript入門-Day10：套件

套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。

#Javascript

Michael楊

2024/05/26

Javascript入門-Day1：語言介紹、觸及的領域、誰在使用

JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。

NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。

#NPM #JokerCat #六角學院