导航高亮和面包屑要怎么做?系统有现成字段吗?

最后更新时间:2026-09-22 19:06:14

1. 结论:目前没有现成的高亮字段,要自己判断

这一点值得先说清楚,能省掉很多翻代码的时间:VVCMS 目前没有提供统一的「当前栏目」字段或结构化的面包屑列表。导航数据是一份平铺的栏目列表,模板需要自己判断哪一项是激活态。

同时,栏目树并没有结构化地暴露给模板——早期曾有 ColumnsTree 可以一次拿到整棵树,但它已经因为安全收敛被移除(避免把未启用、隐藏或内部栏目泄漏到前台)。

2. 能用的替代方案

虽然不给整棵树,但提供了按关系取栏目的一组函数,按需组合即可:

需求用什么
顶部导航(一级栏目)导航数据里的栏目列表,直接 range 输出
子栏目 / 侧边栏ChildrenColumns 传父栏目 slug
当前栏目的父级ParentColumn 传栏目 ID
同级栏目SiblingColumns 传栏目 ID
按标识取单个栏目Column 传 slug,或 ColumnByID 传 ID

3. 导航高亮怎么写

既然没有 active 字段,就在模板里比较当前页面的栏目标识循环项的栏目标识。思路是:

  1. 取到当前页面的栏目对象(详情页可以从内容的栏目信息拿,栏目页直接有当前栏目)。
  2. 循环导航项时,把每一项的 ID 或 slug 与当前栏目做比较。
  3. 相等时输出高亮用的 class。

要点:

  • 统一用同一个比较基准,别一处比 ID、一处比 slug,容易出现该亮不亮。
  • 考虑父级高亮。在详情页时,当前栏目可能是二级栏目,而导航项是它的一级父栏目——这时需要用 ParentColumn 往上找一层再比较,否则详情页打开时导航没有任何一项高亮。
  • 首页单独处理。首页不属于任何栏目,要单独判断页面类型。

4. 面包屑怎么写

同样没有现成的 Trail,需要自底向上拼:

  1. 从当前栏目出发。
  2. ParentColumn 逐级往上取父栏目,直到取不到为止(到达一级)。
  3. 把这一串反转成从顶到下的顺序输出——系统提供了 Reverse 函数,直接对切片调用即可。
  4. 末级是当前页面,通常不再加链接。

5. 需要注意的坑

  • 层级不宜太深。每次 ParentColumn 都是一次查询,模板里写死五级往上找,在列表页会被放大成大量查询。控制在两三级比较稳妥。
  • 取不到父级要判空。一级栏目没有父级,不判空会出错。
  • 别指望 ColumnsTree。它已被移除且有测试专门断言不得出现在模板函数表中,不要再找它了。
  • 栏目改名或移动后要复测。面包屑依赖父子关系,栏目结构调整后最容易在这里出问题。