ejs-mate 模板引擎快速上手：Layout、Partial、Block 三大核心功能

ejs-mate 模板引擎快速上手：Layout、Partial、Block 三大核心功能

ejs-mate 是 Express 專用的 EJS 模板增強中間件，提供 Layout（佈局繼承）、Partial（局部複用）、Block（塊覆寫） 三大功能，讓模板開發更模組化。

安裝與集成

npm install ejs-mate --save

// app.js
var express = require('express');
var engine = require('ejs-mate');
var app = express();

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

1. Layout（佈局繼承）

views/layout.ejs - 基礎佈局：

<!DOCTYPE html>
<html>
<head>
    <title><%- title || '默認標題' %></title>
</head>
<body>
    <header><%- partial('header') %></header>
    <main><%- body %></main>  <!-- 子模板內容注入點 -->
    <footer><%- partial('footer') %></footer>
</body>
</html>

views/index.ejs - 繼承佈局：

<% layout('layout') -%>  <!-- 指定佈局 -->
<h1>首頁內容</h1>
<p>歡迎使用 ejs-mate</p>

2. Partial（局部複用）

views/header.ejs：

<nav>
    <a href="/">首頁</a>
    <a href="/about">關於</a>
</nav>

在任意模板中引入：<%- partial('header') %> 或傳參 <%- partial('user/info', {user: user}) %>

3. Block（塊覆寫）

佈局中定義塊：

<head>
    <% block('head', function() { %>
        <meta charset="utf-8">
    <% }) %>
</head>

子模板覆寫/追加：

<% layout('layout') -%>
<% block('head', function() { %>
    <script src="/custom.js"></script>
<% }) %>
<% block.append('head', function() { %>  <!-- 追加而非覆寫 -->
    <link rel="stylesheet" href="/extra.css">
<% }) %>

進階技巧

• 動態佈局：layout(user.isAdmin ? 'admin/layout' : 'layout')
• Partial 緩存：生產環境自動緩存編譯後模板
• 錯誤處理：模板語法錯誤會拋出詳細行號信息

總結

ejs-mate 以極低學習成本帶來強大的模板組織能力。Layout 解決頁面結構復用，Partial 解決組件級復用，Block 解決定制化擴展，三者配合構建清晰可維護的視圖層。