位元詩人 [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 }}

結語

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

關於作者

身為資訊領域碩士,位元詩人 (ByteBard) 認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

位元詩人喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,位元詩人將所學寫成文章,放在這個網站上和大家分享。