什麼是 樣板引擎(Template Engine) ?


Posted by hoyi-23 on 2021-07-20

對於前端工作者,在製作網頁時一定會有 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

#EJS







Related Posts

瀏覽器運作原理 速記

瀏覽器運作原理 速記

學 JavaScript 的那些筆記 2 -- npm & jest

學 JavaScript 的那些筆記 2 -- npm & jest

Sequelize validations&constraints

Sequelize validations&constraints


Comments