菜鳥MIS的Coding日記

行程前的準備

在根目錄下建立views資料夾

接著在views下建立layouts資料夾

Express預設會在views下尋找view，在layouts下尋找layout

安裝Handlebars

npm i express-handlebars

引入NodeJS

const expressHandlebars=require('express-handlebars');

設定模板引擎

app.engine('handlebars', expressHandlebars.engine({defaultLayout: 'main',})) //defaultLayout: 'main'代表要使用專案目錄下的views/layouts目錄下的main當成layout
app.set('view engine','handlebars');

在views資料夾建立欲使用的模板(EX:index.handlebars)

建立完之後設定路由規則所要渲染的模板

app.get('/', (req,res)=>{res.render('index')});//只要路由到首頁就使用index.handlebars模板

完整程式碼

app.js

const express=require('express');
const expressHandlebars=require('express-handlebars');
const app=express();
app.engine('handlebars', expressHandlebars.engine({defaultLayout: 'main',}))
app.set('view engine','handlebars');
app.get('/',(req,res)=>res.render('index'));
app.listen(3001,()=>console.log('Server Start!'));

index.handlebars

<h1>Index!</h1>
<h3>
   This is index page
</h3>