開源技術教學文件網 使用 CSS 等靜態資源

最後修改日期為 NOV 11, 2019

前言

在先前的範例中,我們的網頁只有 HTML 代碼,可說是清湯掛麵;實際上網頁會用 CSS 來美化門面。對於 Golang 網頁程式來說,CSS 樣式表和 JavaScript 命令稿是靜態資源 (assets);因為 Golang 網頁程式不會處理這些資源,而會將其原封不動地傳到客戶端。本文的重點即是學習如何在網頁程式中掛入靜態資源。

我們將完整的範例放在這裡,有需要的讀者可自行追蹤程式碼。

主程式的部分

我們先前來主程式的部分:

package main

import (
	"html/template"
	"net/http"

	"github.com/julienschmidt/httprouter"
)

func main() {
	// Set a new HTTP request multiplexer
	mux := httprouter.New()

	// Listen to root path
	mux.GET("/", index)

	// Listen to CSS assets
	mux.ServeFiles("/css/*filepath", http.Dir("public/css"))

	// Listen to JavaScript assets
	mux.ServeFiles("/js/*filepath", http.Dir("public/js"))

	// Set the parameters for a HTTP server
	server := http.Server{
		Addr:    "0.0.0.0:8080",
		Handler: mux,
	}

	// Listen requests
	server.ListenAndServe()
}

func index(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
	t, err := template.ParseFiles("views/index.html")
	if err != nil {
		http.Error(w, err.Error(), 500)
	}

	t.Execute(w, "My Application with CSS")
}

這個程式的關鍵在於掛載靜態資源的手法:

mux.ServeFiles("/css/*filepath", http.Dir("public/css"))

這行程式碼的意思是在 public/css 資料夾內所有的檔案皆視為靜態資源,掛載時的路徑為 /css/*filepath ,而 *filepath 的部分會由實際的資料夾和檔案名稱來取代。

本程式的模板

接著來看模板的部分:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>{{ . }}</title>

    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>{{ . }}</h1>      
        </div>

        <p>More content here.</p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
</body>
</html>

這個模板乍看很長,但大部分內容和 Bootstrap 的起手式 相差無幾;在這些代碼中,有些代碼用來引入外部資源,還有一些處理 IE 相容性的代碼,如果已經熟悉 HTML 的話,這段代碼其實不會太難。

程式執行的結果如下:

在 Golang 網頁程式中加入 CSS

結語

因為我們要練習載入靜態資源,故我們將大部分的靜態資源下載到本地端後引入。在實務上,我們有時會用遠端的 CDN 來取代本地資源。使用 CDN 除了可以從地理位置較近的站台取得靜態資源外,對於 Bootstrap 或其他常見的靜態資源,還有做快取 (cache) 的作用。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter