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

#EJS

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

hoyi-23




Related Posts

[Note] React - Hooks: useRef

[Note] React - Hooks: useRef

 urlun0404
我的電腦配單

我的電腦配單

 孫胖
第二周筆記 (JS) -2

第二周筆記 (JS) -2

 RafealChen

Comments