在express裡app.js
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
是設定template的路徑和engine也就是說像是routes/index.js裡寫的
res.render('index', { title: 'Express' });
會自動到views尋找index.jade檔案交給jade模組
因為我不喜歡jade模組
所以我使用同樣是templat模組的ejs
jade會將原來的html簡化到我看不太懂的地步
而且不能直接使用DW等之類的網頁編輯軟體編輯之後的html的檔案
ejs可以直接使用比較方便
1-1.安裝template ejs模組
請在app目錄下輸入
npm install ejs
1-2.在view下建立404.html內容為
<html> <head><title>404 Not Found</title></head> <body bgcolor="white"> <center><h1>404 Not Found</h1></center> </body> </html>
1-3.修改app.js
輸入將html的檔案給ejs模組處理
app.engine('html', require('ejs').renderFile);
app.engine這是宣告html交給ejs模組處理然後
當然也可以修改
app.set('view engine', 'ejs');不過副檔名要改成ejs才會讀的到
而且交給ejs模組
res.send(404, 'Sorry cant find that!');取代為
res.render('404.html');
呼叫這function會執行ejs模組它會去view載入404.html並且輸出
1-4.結果
2.加入圖片路徑、CSS、jQuery等等靜態網頁檔案
在express裡app.js
app.use(express.static(path.join(__dirname, 'public')));也就是說public裡面的資料夾和檔案會直接對應到網址上
像是stylesheets/style.css
2-1.
在public/images裡面加圖片
在404.html上就可以直接讀取
3.利用ejs模組
加上數值讓網頁可以變動文字或是其他更動
3-1.
在404.html
上面加上<%= time%>
就是說會將time的value填到這裡
3-2.
在app.js
res.render('404.html',);
修改成res..render('404.html', {
locals:{time : Date()}
});
3-3.
結果就會顯示value的值
在html裡面有用到<%= %>一定要填值要不然ejs模組會出錯
0 意見:
張貼留言