目前為止的網頁,都是純 html,太陽春了!
這一課來學習,如何用 node 來提供 css 或圖片之類的「靜態檔案」!
替這課建立 lesson4 資料夾,內容跟 lesson3 同樣之外,再建立一個 public 資料夾,裡面新增 style.css 檔案
/repo
/lesson4
/index.js
/hello.ejs
/users.json
/public
/style.css
在 index.js 裡面多加一行程式碼
app.use(express.static('./lesson4/public'));
在 style.css 裡面加入一些樣式
p {
color: green;
}
接著在 hello.ejs 加入樣式連結
<link rel="stylesheet" href="/style.css">
然後去終端機輸入
node lesson4/index.js
接著打開瀏覽器,在網址輸入
http://localhost:3000/
你會看到原本的打招呼訊息,文字變成了綠色!
後端程式設計,不論何種程式語言,在提供圖片、css 這種靜態檔案的時候,通常會開一個獨立的 public 資料夾來放檔案
所以本課使用的 app.use(express.static('./lesson4/public'));
程式碼
就只是設定一下,請 express 從某個資料夾提供靜態檔案,就這樣而已!
這次要練習用 node 回應靜態檔案
請把 hw3 的內容複製到 hw4,然後增加 public 資料夾與 style.css 檔案
/repo
/hw4
/index.js
/homepage.ejs
/posts.json
/public
/style.css
請在 style.css 中,稍微替你的日記首頁加一些樣式,弄得漂亮一點!
完成以上任務,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
作業
套了bootstrap 5