Go html/template layout 布局模板定义

layout 布局模板概述

在上一节我们使用 “主页面内加载子模板“ 的方式实现了网站公共头部、底部引入的目的，我们还可以将一个站点公共的头部、底部、样式、js等封装为一个布局模板，然后在布局模板内部声明一个自定义区块，用于展示自定义内容。

定义布局模板语法

{{define "layout"}}
    <header>头部</header>
    此处嵌入一个 body 模板用于展示不同的页面内容
    {{template "body" .}}
    <footer>底部</footer>
{{end}}

网站模板规划示例

项目结构

|_ templates
    |_ layout.html 核心布局模板
    |_ index.html 网站首页模板
    |_ abuoutus.html 完整关于我们模板
|_ main.go

layout.html 源码

{{define "layout"}}
<html>
    <header style="background-color:#F5F5F5;">
        <a href="/">首页</a>
        <a href="/aboutus">关于我们</a>
    </header>
    <!-- 此处嵌入一个 body 模板用于展示不同的页面内容 -->
    {{template "body" .}}
    <footer style="background-color: gray;">底部</footer>
</html>
{{end}}

index.html 源码

{{define "body"}}
<h3>首页</h3>
{{end}}

aboutus.html 源码

{{define "body"}}
<h3>关于我们</h3>
{{end}}

在 main.go 中定义路由及调用不同的 body 模板

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		varTest := "lesscode.work"
		t := template.New("layout")
		t, err := t.ParseFiles(
			"./templates/layout.html",
			"./templates/index.html")
		if err != nil {
			fmt.Printf("err: %v\n", err)
		}
		t.Execute(w, map[string]any{"varTest": varTest})
	})
	http.HandleFunc("/aboutus", func(w http.ResponseWriter, r *http.Request) {
		varTest := "lesscode.work"
		t := template.New("layout")
		t, err := t.ParseFiles(
			"./templates/layout.html",
			"./templates/aboutus.html")
		if err != nil {
			fmt.Printf("err: %v\n", err)
		}
		t.Execute(w, map[string]any{"varTest": varTest})
	})
	http.ListenAndServe(":8080", nil)
}

以上演示可实现一个基础的网站模板构建，是网站开发时常用的模板嵌套方式。