[試著把切版專案升級到 gulp4.0 吧] Day15 HTML、EJS 的處理：談 HTML 樣板語言

第 11 屆 iThome 鐵人賽

DAY 15

Modern Web

試著把切版專案升級到 gulp4.0 吧系列第 15 篇

11th鐵人賽 gulp

ayugioh2003

2019-10-01 19:21:05

4983 瀏覽

分享至

在網頁開發領域發展的初期，前端和後端是沒分這麼開的。有些開發者直接把 HTML、CSS、JS 檔案放到後端語言裡頭（如 php）；將這些檔案重新處理後，才傳給那些需要資料的瀏覽器。

後來，有些開發者覺得在 php 或其他後端語言寫 HTML 太麻煩了，於是就又另外開發了能在 HTML 擴充更多功能（如條件判斷、迴圈、字串模板）的樣板語言（template language/engine）。比較有名的如 handlebar、pug、ejs。以下簡單展示 pug 與 ejs 的用法。

pug

比起 HTML 的語法，pug 語法可以說簡潔很多。以下展示用 pug 處理 case 判斷，轉成 HTML 的結果

// example.pug
- var friends = 0  // pug 可在 .pug 檔中直接放變數，也能透過後端傳參數進來
case friends
  when 0
    p 您没有朋友
  when 1
    p 您有一个朋友
  default
    p 您有 #{friends} 個朋友

<!-- example.html -->
<p>您沒有朋友</p>

想體驗 pug，可直接用 codpen 來試刀看看

A Pen by Chiu

小八卦是，pug 本來名字叫做 jade（玉），因為名字跟其他的軟體名衝到了，可能有商標的爭議，所以後來就改成 pug（哈巴狗）惹。

ejs

EJS 的全稱是 Embedded JavaScript templating。它的用法跟 HTML 語法很像，可以當作 HTML 的擴充版。以下展示 EJS 處理 if 判斷，轉成 HTML 的結果。因為 EJS 沒辦法在 codepen 上使用，在這邊給兩個能較快速體驗的方式

一、在 ejs playground 上體驗

EJS Playground

<!-- exapmle.ejs -->
<%
  var user = {
    name: 'how bro',
    age: 30
  }
%>
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

<!-- example.html -->
<h2>how bro</h2>

二、用 nodejs 將 ejs 模板轉成 html

1.先安裝 ejs 套件

mkdir ejs_example
cd ejs_example
npm install ejs

2.寫 ejs.js 控制語法

// ejs.js
var ejs = require('ejs') // 引入 ejs 套件
// ejs 模板。如果有建立好完整後端環境的話，就能將此模板放進 example.ejs 中，再透過後端環境轉成 example.html
var template = `
  <% if (user) { %>
    <h2><%= user.name %></h2>
  <% } %>
`
// 判斷式中傳入的參數變數
var user = {
  name: 'how bro',
  age: '30'
}
// 透過 ejs 套件，使用它的渲染函數。第一個參數放模板，第二個參數放想傳入的變數。最後回傳 html  
var html = ejs.render(template, {user: user})

console.log(html)

3.印出結果