iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 10

引入外部檔案以快速搭建美觀網頁——全端實作體驗 III

Serving Static Files in Express Framework

from Serving Static Files in Express Framework - Codeforgeek

本篇筆記將解決以下問題:

  • 如何引入外部靜態檔案,如 stylesheet 或 javascript?
  • 如何導入前端工具,如 Bootstrap、FontAwesome 等?
  • 如何使用 JSON 並引用相關資料?

誰適合閱讀:

  • 想美化網頁前端者
  • 想迅速搭建簡約好看前端介面者
  • 想有效管理外部資料者

使用靜態檔案

HTML, CSS, JS

from Level Up!

前篇 提到的 .handlebars 檔案須先經過伺服器處理過,才能被正確使用;相對於此,「靜態檔案(static files)」就是可以直接提供瀏覽器使用的文件。

資料夾路徑慣例

static files

靜態檔案存放位置 from Alpha Camp's material

慣例是將靜態檔案存放在名為 public 的檔案夾中,並且用 javascripts 和 stylesheets 來整理。

引入方式

靜態檔案引用位置

如果對 HTML 熟悉,一定知道我們會將 CSS 檔案放在 </head> 前、把 JavaScript 檔案放在 </body> 前。

值得注意的是,路徑只會使用 /public/ 後的部分,並且要在 app.js 檔案中設定。

// app.js
...

// setting static files
app.use(express.static('public'))

// routes setting
...

 

使用 CDN

Bootstrap

from Bootstrap

我在 《JavaScript 全端網頁工程師的系統化養成》#2–1 前端開發入門學習的有效策略 中,完整提過 Bootstrap 這類的工具如何使用。

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。最初是通用於 Twitter 內部的框架,後釋出為 OpenSource 專案。核心設計目的是達成響應式與行動優先,讓網站自動適應螢幕大小。之所以熱門是因為:不用寫 CSS,只需適當架構 HTML 並加上幾個 Bootstrap class 就能搭建網頁。

導入方式

Bootstrap Getting Started

from Bootstrap Getting Started

導入的方式跟在瀏覽器環境寫程式時一樣,按 Getting Started 的指示,放在 <head><body> 內即可。

 

使用 JSON

JSON logo

from Udemy - Master in JSON

為了不讓類似格式的大量資料佔據 app.js 文件,我們通常將資料打包在 .json 的檔案中,以提高程式碼的管理效能。

引用方式

movie.json

JSON 存放位置 from Alpha Camp's material

只有一個檔案時,我們會將 JSON 放在根目錄,並且在 app.jsrequire() 引用:

// app.js
// Require packages related to server
// ...

const movieList = require('./movies.json')

// setting template engine
// ...

 


閱讀更多

Infinite Gamer
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南


上一篇
用 Handlebars 做出保留原始資料的好用表單——全端實作體驗 II
下一篇
活用 URL 及表單資料打造多種功能——全端實作體驗 IV
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言