本文為 Lidemy [BE201] > [把留言板變得更完整] 之 [美化頁面],練習使用 bootstrap 美化畫面。
1. EJS 新語法 include 導入 bootstrap
a. 把重複的元素放在 template 資料夾裡面
b. head.ejs 放引入 Starter template 的那三行
c. 用 include 引入重複的部分
// index.ejs 裡面用 include 引入重複的部分
<!doctype html>
<head>
<%- include('template/head') %>
</head>
<html>
</html>
2. 找尋合適的 css 修改成想要的樣子
取決於對 bootstrap 熟不熟悉,用久了會知道哪些適合,有哪些元素可以用。
3. 邊做邊確定功能沒有壞
每做一小段就跑一下,試試看功能有沒有壞掉
4. createdAt 時間格式
轉換 createdAt 成 2022-01-01 12:20:31 的格式
a. 把資料庫的 createdAt 輸出,會長這樣:
Thu Jan 13 2022 16:55:16 GMT-0500 (東部標準時間)
b. 用 new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '')
就可以變成這樣了:2022-01-13 22:07:58
<div>Posted by:
<%= new Date(comment.createdAt).toISOString()
.replace(/T/, ' ').replace(/\..+/, '') %>
</div>
心得:看老師 demo,值得學習的地方是
頭腦很清楚,知道自己在做什麼
debug 很有條理