81 lines
3.5 KiB
Markdown
81 lines
3.5 KiB
Markdown
# 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變數進行修改，依據自己的需求裁剪程式碼。
|
||
|
||
|
||
|
||
圖14.1 bootstrap站點
|
||
|
||
接下來我們利用bootstrap整合到beego框架裡面來，快速的建立一個漂亮的站點。
|
||
|
||
1. 首先把下載的bootstrap目錄放到我們的專案目錄，取名為static，如下截圖所示
|
||
|
||
|
||
|
||
圖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中來，如下展示的圖就是整合進來之後的展現效果圖：
|
||
|
||
|
||
|
||
圖14.3 建構的基於bootstrap的站點介面
|
||
|
||
這些範本和格式bootstrap官方都有提供，這邊就不再重複貼程式碼，大家可以上bootstrap官方網站學習如何編寫範本。
|
||
|
||
|
||
## links
|
||
* [目錄](<preface.md>)
|
||
* 上一節: [擴充套件Web框架](<14.0.md>)
|
||
* 下一節: [Session支援](<14.2.md>) |