当前位置:首页 > 文章列表 > Golang > Go教程 > Go HTML 模板怎么复用页头页脚和基础布局

Go HTML 模板怎么复用页头页脚和基础布局

来源:17golang原创 2026-09-06 11:24:04 0浏览 收藏

Go 项目里页头、页脚和导航一旦复制到多个 HTML 文件,改一次就要搜很多处。更稳的做法是把模板分成 layout、partials、pages 三层:layout 负责页面骨架,partials 负责页头页脚,page 只填正文。用 embed.FS 配合 template.ParseFS 统一解析,再让 block 提供页面内容,handler 最后只执行一个布局入口。

要点速览
  • HTML 输出使用 html/template,不要用 text/template 代替。
  • ParseFS 负责把布局、局部模板和页面模板放进同一组模板集合。
  • block 让每个页面只覆盖 content 区域,解析错误在启动阶段处理,执行错误在请求阶段返回。

先把模板职责拆成三层,后面才好复用

先建立一个清晰的目录边界,避免把“通用结构”和“页面内容”混到同一个文件里:

文件示例负责什么
layouttemplates/layout.htmlHTML 外壳、导航位置、主内容插槽
partialstemplates/partials/header.html页头、页脚、可复用的小区域
pagestemplates/pages/home.html某个页面自己的标题、列表或表单

layout 不应该知道首页的业务字段,page 也不应该重新写导航。这样换一套页头时只动 partial,新增页面时只增加 page。

Go html/template 的 layout、header、footer、page content 与 embed.FS、ParseFS 静态职责边界图
图1:通过模板层与解析层的边界,理解页头页脚为什么不应复制到每个页面。

用 embed.FS 和 ParseFS 把模板统一装载

embed.FS 把模板编进二进制,部署时不必再猜当前工作目录。下面的 layout 使用 block 预留正文区域,页头和页脚则通过命名模板复用。

{{ define "layout" }}




  {{ .Title }}
  {{ template "header" . }}
  
{{ block "content" . }}

暂无内容

{{ end }}
{{ template "footer" . }} {{ end }} {{ define "header" }}
项目首页
{{ end }} {{ define "footer" }}
© {{ .Year }} 示例站点
{{ end }}

页面文件只定义同名的 content 区域即可:

{{ define "content" }}

{{ .Heading }}

{{ .Message }}

{{ end }}

这里的变量仍然由 html/template 按上下文转义。不要因为页面中出现 HTML 就把普通字符串强行转换成 template.HTML;只有内容确实由可信模板作者控制时,才应该使用带类型的安全值。

用 block 让页面只填自己的内容

解析模板时把文件模式一次交给 ParseFS,然后 handler 执行 layout。解析失败属于程序装载问题,应该在启动时直接终止;执行失败则可能发生在请求数据不完整时,应返回服务器错误并记录原因。

package main

import (
  "embed"
  "html/template"
  "log"
  "net/http"
)

//go:embed templates/*.html templates/partials/*.html templates/pages/*.html
var templateFS embed.FS

type PageData struct {
  Title   string
  Heading string
  Message string
  Year    int
}

func main() {
  // 启动时解析,文件名或模板动作写错就立即暴露。
  pages, err := template.ParseFS(templateFS,
    "templates/layout.html",
    "templates/partials/*.html",
    "templates/pages/home.html",
  )
  if err != nil {
    log.Fatal(err)
  }

  http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    data := PageData{Title: "首页", Heading: "欢迎回来", Message: "页面正文由 block 注入", Year: 2026}
    // 执行布局入口,避免 handler 自己拼接页头和页脚。
    if err := pages.ExecuteTemplate(w, "layout", data); err != nil {
      log.Printf("render home: %v", err)
      http.Error(w, "页面渲染失败", http.StatusInternalServerError)
    }
  })

  log.Fatal(http.ListenAndServe(":8080", nil))
}

真实项目中可以为每个页面建立独立模板集合,或者使用唯一的正文模板名,避免多个页面同时定义 content 时互相覆盖。关键不是把所有文件都塞进一个目录,而是保证一次执行对应一套明确的 layout 与 page 组合。

Go html/template 中 handler、ExecuteTemplate、layout、block content、页面数据和 ResponseWriter 的静态关系图
图2:查看渲染边界内的 layout、block 和页面数据,理解 handler 为什么只需要执行一个入口模板。

多页面扩展时检查这张清单

  • 输出类型:生成 HTML 时使用 html/template,不要把 text/template 当成等价替代。
  • 解析顺序:让布局和局部模板的命名稳定,多个页面不要无意间重复定义同一个正文名。
  • 错误位置:ParseFS 错误在启动阶段处理,ExecuteTemplate 错误在 handler 中处理。
  • 数据边界:模板接收业务数据,不接收拼接好的 HTML 字符串;需要安全 HTML 时要明确审查来源。

如果页面数量继续增加,可以把“页面数据结构”和“模板集合”一起按功能拆分,再让路由只选择渲染入口。这样模板复用解决的是维护成本,而不是把所有页面强行变成同一种结构。

相关问题

为什么 HTML 页面不建议直接使用 text/template?

html/template 会根据 HTML、属性、URL、JavaScript 等上下文做自动转义,目标是防止数据破坏页面结构;text/template 不承担这层 HTML 安全语义。

ParseFS 找不到模板通常先查什么?

先查 //go:embed 的路径是否覆盖了实际文件,再查 ParseFS 使用的模式是否相对于嵌入根目录,最后确认文件没有被放在错误的目录层级。

多个页面都需要复用页脚怎么办?

把页脚写成独立的 define "footer",由 layout 统一调用;页面只提供自己的正文定义,不重复复制页脚 HTML。

版本声明
本文转载于:17golang原创 如有侵犯,请联系study_golang@163.com删除
age动漫怎么找新番?目录、一周更新与排行榜查看说明age动漫怎么找新番?目录、一周更新与排行榜查看说明
上一篇
age动漫怎么找新番?目录、一周更新与排行榜查看说明
Kubernetes 1.37 升级前需要关注哪些默认行为变化
下一篇
Kubernetes 1.37 升级前需要关注哪些默认行为变化
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • SuperCLUE中文大模型评测基准:功能、能力维度与应用指南
    SuperCLUE
    SuperCLUE是权威的中文大语言模型综合评测基准,涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试,定期发布榜单与技术报告,为模型研发、优化及行业选型提供科学依据。
    163次使用
  • C-Eval中文评测基准:大语言模型多学科能力评估指南
    C-Eval
    深入了解C-Eval中文评估套件,涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例,助您全面评测LLM中文理解与泛化能力。
    88次使用
  • LangGPT提示词框架:结构化Prompt设计方法与开源工具指南
    LangGPT
    LangGPT是一种受编程语言启发的结构化提示词设计工具,提供双层框架、模块化模板及变量功能,帮助用户高效编写高质量Prompt。该项目已在GitHub免费开源,适用于内容创作、编程辅助等多场景。
    13次使用
  • ClickPrompt:AI提示词生成与优化工具,支持Stable Diffusion、ChatGPT及代码辅助
    ClickPrompt
    ClickPrompt是一款专为AI提示词编写者设计的开源在线工具,支持Stable Diffusion绘图、ChatGPT对话及GitHub Copilot代码辅助。提供Prompt自动生成、一键运行、社区分享及可视化优化功能,帮助用户高效获取精准AI输出。
    50次使用
  • PromptHero官网:AI提示词搜索、优化与学习平台,支持Midjourney/Stable Diffusion
    PromptHero
    PromptHero是专业的AI提示词搜索引擎与优化平台,支持Stable Diffusion、Midjourney等主流模型。提供海量提示词库、分类搜索、在线课程及社区互动,助力用户高效生成高质量AI图像与文本。
    32次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码