# 14.1 靜態檔案支援
我們在前面已經講過如何處理靜態檔案，這小節我們詳細的介紹如何在 beego 裡面設定和使用靜態檔案。透過再介紹一個 twitter 開源的 html、css 框架 bootstrap，無需大量的設計工作就能夠讓你快速地建立一個漂亮的站點。

## beego 靜態檔案實現和設定
Go 的 net/http 套件中提供了靜態檔案的服務，`ServeFile`和 `FileServer` 等函式。beego 的靜態檔案處理就是基於這一層處理的，具體的實現如下所示：

```Go

//static file server
for prefix, staticDir := range StaticDir {
	if strings.HasPrefix(r.URL.Path, prefix) {
		file := staticDir + r.URL.Path[len(prefix):]
		http.ServeFile(w, r, file)
		w.started = true
		return
	}
}
```
StaticDir 裡面儲存的是相應的 url 對應到靜態檔案所在的目錄，因此在處理 URL 請求的時候只需要判斷對應的請求地址是否包含靜態處理開頭的 url，如果包含的話就採用 http.ServeFile 提供服務。

舉例如下：

```Go

beego.StaticDir["/asset"] = "/static"
```
那麼請求 url 如`http://www.beego.me/asset/bootstrap.css`就會請求`/static/bootstrap.css`來提供反饋給客戶端。

## bootstrap 整合
Bootstrap 是 Twitter 推出的一個開源的用於前端開發的工具套件。對於開發者來說，Bootstrap 是快速開發 Web 應用程式的最佳前端工具套件。它是一個 CSS 和 HTML 的集合，它使用了最新的 HTML5 標準，給你的 Web 開發提供了時尚的版式，表單，按鈕，表格，網格系統等等。

- 元件
　　Bootstrap 中包含了豐富的 Web 元件，根據這些元件，可以快速的建立一個漂亮、功能完備的網站。其中包括以下元件：
　　下拉選單、按鈕組、按鈕下拉選單、導航、導覽列、麵套件屑、分頁、排版、縮圖、警告對話方塊、進度條、媒體物件等
- Javascript 外掛
　　Bootstrap 自帶了 13 個 jQuery 外掛，這些外掛為 Bootstrap 中的元件賦予了“生命”。其中包括：
　　模式對話方塊、標籤頁、滾動條、彈出框等。
- 訂製自己的框架程式碼
　　可以對 Bootstrap 中所有的 CSS 變數進行修改，依據自己的需求裁剪程式碼。

![](images/14.1.bootstrap.png)

圖 14.1 bootstrap 站點

接下來我們利用 bootstrap 整合到 beego 框架裡面來，快速的建立一個漂亮的站點。

1. 首先把下載的 bootstrap 目錄放到我們的專案目錄，取名為 static，如下截圖所示

	![](images/14.1.bootstrap2.png)

	圖 14.2 專案中靜態檔案目錄結構

2. 因為 beego 預設設定了 StaticDir 的值，所以如果你的靜態檔案目錄是 static 的話就無須再增加了：

```Go

StaticDir["/static"] = "static"
```
3. 範本中使用如下的地址就可以了：

```html

	//css 檔案
	<link href="/static/css/bootstrap.css" rel="stylesheet">

	//js 檔案
	<script src="/static/js/bootstrap-transition.js"></script>

	//圖片檔案
	<img src="/static/img/logo.png">
```
上面可以實現把 bootstrap 整合到 beego 中來，如下展示的圖就是整合進來之後的展現效果圖：

![](images/14.1.bootstrap3.png)

圖 14.3 建構的基於 bootstrap 的站點介面

這些範本和格式 bootstrap 官方都有提供，這邊就不再重複貼程式碼，大家可以上 bootstrap 官方網站學習如何編寫範本。


## links
   * [目錄](<preface.md>)
   * 上一節：[擴充套件 Web 框架](<14.0.md>)
   * 下一節：[Session 支援](<14.2.md>)