安裝方式

ejs

npm install ejs --save

pug，一種簡寫html的編碼

npm install pug --save

express-handlebars

npm install express-handlebars --save

使用pug編譯html結構

使用app.set()設置全域變數，設置完成後就可以在指定路徑/views下編譯pug檔案

// app.js
app.set('view engine', 'pug')
app.set('views', 'views')

渲染的檔案須將原本sendFile改為render

// 
const router = express.Router()
router.get('/add-product', (req, res, next) => {
  // res.sendFile(path.join(rootDir, 'views', 'add-product.html'))
  res.render('add-product')
})

• 用include封裝重複代碼

在.pug檔案中使用 include 語法

// 將重複的結構放置 includes/header.pug資料夾中
// 使用 include 引入即可
body
  include includes/header.pug

但這樣可能會有局部style不一致的問題

• extrnds繼承block模板方式 封裝重複代碼

新增一個layouts/main-layout.pug檔

可以將要帶入HTML結構區塊的地方用一個 block (變數) 取代

// main.pug
body	
	main 
		div 區塊內容

⇒

// layouts/main-layout.pug
body
	block contant