使用Hierarchical Viewer构建Kentico导航菜单的技术咨询

一、前期内容树配置 #

首先规范站点内容树结构，所有需要在导航中展示的页面，打开页面属性的导航选项卡，勾选在导航中显示选项。导航默认遵循内容树的页面排序，直接拖拽调整内容树页面顺序即可修改导航排序。

二、Hierarchical Viewer 基础配置 #

进入需要放置导航的页面模板「设计」视图，按以下步骤配置：

• 添加Hierarchical Viewer web 部件到对应占位符
• 打开web部件属性面板，找到「数据源」配置组：
  • 路径填写站点根页面路径，格式为/%，如果仅需展示两级导航，可将最大相对级别设置为2
  • 筛选条件填写DocumentMenuItemHideInNavigation = 0，自动过滤掉不需要在导航展示的页面
  • 内容类型可选所有页面类型，也可根据站点实际使用的页面类型指定

三、层级转换绑定（核心配置） #

Hierarchical Viewer通过不同层级绑定不同的转换实现多级导航的结构输出，配置步骤如下：

1. 先在对应页面类型的转换管理，或者全局转换中创建3种转换：

• 一级导航项转换：用于渲染顶层导航的结构，示例代码：

<li>
  <a href="<%# GetDocumentUrl() %>"><%# Eval("DocumentName") %></a>
  <%# IfEmpty(Eval("NodeChildNodesCount"), "", "<ul class='submenu'>") %>

• 二级导航项转换：用于渲染子菜单的导航项，示例代码：

<li><a href="<%# GetDocumentUrl() %>"><%# Eval("DocumentName") %></a></li>

• 层级闭合转换：用于自动闭合存在子菜单的标签，示例代码：

<%# IfEmpty(Eval("NodeChildNodesCount"), "", "</ul></li>") %>

2. 回到Hierarchical Viewer属性面板，找到Hierarchical transformations配置项，按层级绑定转换：

• 层级0（顶层页面）绑定一级导航项转换，同时指定子层级转换为二级导航项转换
• 层级1（二级页面）绑定二级导航项转换，如果需要三级及以上导航，按相同规则新增层级绑定即可
• 所有层级的Footer转换统一绑定上述的层级闭合转换

四、样式适配 #

在Hierarchical Viewer属性的Web part container或者CSS class配置项中自定义导航外层类名，比如main-navigation，后续直接写自定义CSS即可实现横向导航、悬浮展开子菜单等交互效果，和常规前端导航的样式开发逻辑完全一致。

五、常见问题排查 #

• 子菜单不显示：检查数据源的最大相对级别配置是否小于你需要的导航层级，或者对应子页面是否勾选了在导航中显示
• 跳转路径错误：确认转换中调用的是GetDocumentUrl()方法，不要直接读取NodeAliasPath字段，前者会自动适配站点的友好URL、多站点域名等配置

内容的提问来源于stack exchange，提问作者Asad Iftikhar