Gitl.cn云建站 SaaS🍞 面包屑（Breadcrumb）专题演示
最后更新：2026-10-02
一、它是什么
面包屑就是页面顶部那行 「首页 › 新闻 › 公司动态」 的导航路径，告诉访客「你目前在站点第几层」。
在模板里，栏目页（分类列表页）会自动注入两类数据：当前栏目的名字、以及它的父级栏目（如果是顶层栏目则没有父级）。你只要判断有没有父级，然后拼出来即可。
二、三种真实渲染效果
场景 B · 顶层栏目（无父级）
新闻 （本身就是顶层，没有父级）
新闻
.ParentCategory 为 nil → 只输出当前名
三、可用的变量
| 变量 | 类型 / 含义 |
|---|---|
{{.CategoryName}} | 当前栏目名（纯文字），如 公司动态。任何栏目页都有。 |
{{.ParentCategory}} | 父级栏目对象。顶层栏目时为 nil（空），必须先判断再使用。 |
{{.ParentCategory.Name}} | 父级名字，如 新闻。 |
{{.ParentCategory.Link}} | 父级链接，如 /news。 |
{{.ParentCategory.ParentCategory}} | 祖父级对象（再嵌套一层）。多级栏目才有，同样需判断。 |
四、模板代码（复制即用）
① 一级（父级 + 当前）—— 大多数栏目页
{{if .ParentCategory}}<a href="{{.ParentCategory.Link}}">{{.ParentCategory.Name}}</a> / {{end}}{{.CategoryName}}{{if .ParentCategory}} … {{end}} 先判断有没有父级：有才输出「父级链接 / 」，没有就跳过；{{.CategoryName}} 始终输出当前栏目名。
② 两级（祖父 + 父 + 当前）—— 多级嵌套栏目
{{if .ParentCategory}}{{if .ParentCategory.ParentCategory}}<a href="{{.ParentCategory.ParentCategory.Link}}">{{.ParentCategory.ParentCategory.Name}}</a> / {{end}}<a href="{{.ParentCategory.Link}}">{{.ParentCategory.Name}}</a> / {{end}}{{.CategoryName}}从外到内逐层判断：先判祖父（可有可无），再判父级（可有可无），最后永远输出当前名。层级更深时同理继续往里套。
五、实时拼接试算器
填下面的框，下面会实时显示出渲染后的面包屑长什么样（留空的层级自动跳过）。
六、两个易踩的坑
- 必须写
{{if .ParentCategory}}判断：若直接写{{.ParentCategory.Link}}而当页是顶层栏目（nil），模板会直接报错。 - 别和
{{.BreadcrumbJSONLD}}搞混：那个是给搜索引擎看的面包屑结构化数据（BreadcrumbList，SEO 用），和你这里肉眼可见的 HTML 面包屑是两回事，二者可同时存在、互不冲突。