開源技術教學文件網 在模板中使用佈局 (Layout)

最後修改日期為 SEP 26, 2019

前言

除了前文提到的模板語法外,模板可以使用佈局 (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 Yahoo
追蹤本站
Facebook Facebook Twitter