對於前端工作者，在製作網頁時一定會有 Layout，也就是每一頁都會共用的地方(例如: header、footer 等等)，如果要在製作每一頁的時候都複製貼上，修改一個地方要每一頁的各自修改，那該多煩壓! 因此 Template Engine 就出現了!
而對於後端工作者，有時候要在PHP或其他後端語言寫HTML，但這樣太麻煩，所以就有Template Engine 的擴充更能出現啦!
到底什麼是 Template Engine ?
Template Engine 可以透過JavaScript幫助我們產出HTML標籤語法。
簡單來說，就是可以動態產生HTML，讓重複出現率高的地方(Layout...)，可以只要更改樣板就全部更動。
可以使用變數、條件、迴圈來撰寫更簡潔的code，能夠更輕鬆的維護程式碼。
什麼時候使用 Template Engine ?
當我們在製作大型專案時，通常會有非常多的頁面，我們可以透過Template Engine把一些變數傳進去使用，將重複使用的程式碼，取代成我們想要的字串，這樣就可以即時動態的更動修改。
樣板引擎EJS
樣板引擎有很多種，這邊學習使用 EJS。
EJS 是Express 的模板，用來渲染html頁面
EJS 的全稱是 Embedded JavaScript templating。它的用法跟 HTML 語法很像，可以當作 HTML 的擴充版。
如何再Gulp自動化工具加入EJS?
步驟一: 安裝套件
npm install --save gulp-ejs
npm install --save gulp-rename --當ejs編譯時，dist會直接編譯ejs。所以要下載rename，讓他編譯成html。
步驟二: 加入gulpfile.js
var ejs = require("gulp-ejs")
gulp.src("./templates/*.ejs")
.pipe(ejs({
msg: "Hello Gulp!"
}))
.pipe(gulp.dest("./dist"))
//任務序列
gulp.task('default',gulp.series('ejs','scss','babel','image','watch'));
//gulp task
gulp.task('ejs', () => {
return gulp.src('./src/**/*.ejs')
.pipe($.ejs({
msg: "Hello Gulp!"
}))
.pipe($.rename({ extname: '.html' }))
.pipe(gulp.dest('./public/'))
});
步驟三: 新增layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> <%- title %> </title>
</head>
<body>
<header>
//..這是header
</header>
<%= content %>
<footer>
//..這是footer
</footer>
</body>
</html>
如何使用layout.ejs ?
//這一區塊是
---
title: 首頁
layout: ejs路徑位置
engine: ejs
current: index
---
//下面就直接是其他的content
![[Release Notes] 20201122_v1 - Support Google Oauths Login/Signup](https://blog.coderbridge.com/2020/11/22/release-notes-20201122v1/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=Hoyi's Daily Note_[Release Notes] 20201122_v1 - Support Google Oauths Login/Signup_@coderbridge_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
