[Golang] 網頁程式設計:在模板中使用佈局 (Layout)

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    前言

    除了前文提到的模板語法外,模板可以使用佈局 (layout);所謂的佈局是模板中共用的部分,我們將共同的部分抽出來,以後如果要修改時只要修改一個地方即可,維護程式碼比較方便。由於這個範例會有多個檔案,我們將本文的範例放在這裡,需要的讀者可自行追蹤程式碼。

    主程式的部分

    先來看程式碼的部分:

    func index(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
    	var tmpl = template.Must(
    		template.ParseFiles("views/layout.html", "views/index.html", "views/head.html"),
    	)
    
    	data := struct {
    		Title string
    		Items []string
    	}{
    		Title: "Major Languages for Web",
    		Items: []string{
    			"Python",
    			"Ruby",
    			"PHP",
    			"Java",
    			"Go",
    		},
    	}
    
    	err := tmpl.ExecuteTemplate(w, "layout", data)
    	if err != nil {
    		http.Error(w, err.Error(), 500)
    	}
    }
    

    關鍵的地方在這一行:

    template.ParseFiles("views/layout.html", "views/index.html", "views/head.html")
    

    在先前的範例中,我們僅引入一個檔案,但在本例中,我們一次引入三個模板。

    另外,執行模板引擎的地方也不太一樣:

    tmpl.ExecuteTemplate(w, "layout", data)
    

    因為我們有使用佈局,故使用了不同的函式。

    加入佈局的模板

    我們的模板拆成多個檔案,請讀者稍微注意一下。我們先來看佈局 views/layout.html 的部分:

    {{ define "layout" }}
    
    <!DOCTYPE html>
    <html>
        <head>
            {{ template "head" . }}
        </head>
        <body>
            {{ template "content" . }}
        </body>
    </html>
    
    {{ end }}
    

    在佈局中,我們定義了 "layout" 區塊,該區塊內的代碼即是佈局。在該佈局中,我們用 template 語法引入兩個區塊。透過這個方式,我們可把整個頁面拆分成許多子區塊,利於重覆利用或維護。

    我們來看 "head" 區塊,該區塊位於 views/head.html 中:

    {{ block "head" . }}
    <title>{{ .Title }}</title>
    {{ end }}
    

    這個區塊的內容相當簡單,我們只是要展示如何拆開子區塊。

    接著來看 "content" 區塊,該區塊位於 views/index.html 中:

    {{ block "content" . }}
    
    <p>{{ .Title }}</p>
    <ul>
        {{range .Items}}
             <li>{{.}}</li>
        {{end}}
    </ul>
    
    {{ end }}
    

    這裡同樣是用 range 敘述,我們先前已經看過這個語法。另外注意在不同區塊中可共用變數 {{ .Title }}

    結語

    藉由加入佈局,我們可以將模板進一步拆分,重複使用相同的部分。適當地拆分模板,可讓專案更易於維護。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk