【代码组件应用实例】如何利用导航变量打造个性化导航栏？

如果你想用代码组件做一个可复用的导航菜单，并且希望导航内容可以从后台配置中获取，不用每次手动改代码，可以使用代码组件里的「导航列表」变量。这个变量会把导航数据替换成 JSON 数组字符串，里面包含导航名称、跳转链接、是否隐藏、图标以及子级导航等信息，适合用来渲染多级导航菜单。

接入文档（如看不明白，可以借助AI工具）：

// 多级导航菜单配置，替换后为 JSON 数组字符串。包含子节点递归结构和多态图标配置。
// 值结构
/*
[
  {
    "id": "node_...",
    "title": "首页",
    "remark": "描述文字",
    "hidden": false, // 是否在前端隐藏
    "jump": {
      "type": "web",
      "href": "/index",
      "target": "_self"
    },
    "icon": {
      "type": "image",
      "value": "https://...",
      "name": ""
    },
    "hoverIcon": {
      "type": "image",
      "value": "https://...",
      "name": ""
    },
    "children": [ ... ] // 相同结构的子节点数组
  }
]
*/


// JS 中递归渲染
var list = $[顶部导航];


/**
 * 递归渲染导航菜单
 * @param {Array} items 导航数据数组
 * @returns {string} 拼接后的导航HTML
 */
function renderNav(items) {
  var html = '';
  items.forEach(function(item) {
    // 隐藏项不渲染
    if (item.hidden) return;
    
    // 渲染菜单项容器
    html += '<div class="nav-item" title="' + item.remark + '">';
    // 渲染跳转链接
    html += '<a href="' + item.jump.href + '" target="' + item.jump.target + '">' + item.title + '</a>';
    
    // 存在子节点则递归渲染子菜单
    if (item.children && item.children.length) {
      html += '<div class="sub-nav">' + renderNav(item.children) + '</div>';
    }
    
    html += '</div>';
  });
  return html;
}

操作路径：网站编辑器—组件—code

进入网站编辑器后，先切换到「组件」页签，把「code」组件拖入页面中。放置完成后，选中这个代码组件，进入左侧的「编辑」区域，点击「编辑代码」，按照代码组件的变量规则编写导航渲染代码。

在代码中需要使用 $[变量名] 的方式引用导航变量，例如 $[顶部导航]。变量替换后会得到一个导航数组，你可以在 JS 中按层级递归渲染导航名称、跳转地址和子级导航，用来生成一级导航、二级导航或更多层级的菜单结构。

代码写好后，回到代码组件的左侧编辑面板，打开「允许配置变量」开关。开启后，组件会显示「变量设置」入口，用来把代码里使用到的变量配置成可视化字段。

操作路径：代码组件—编辑—变量设置

进入「变量设置」后，点击「添加变量」，变量类型选择「导航列表」。变量名称需要和代码中引用的名称保持一致，例如代码里写的是 $[顶部导航]，这里的变量名也要填写「顶部导航」，否则变量无法正确替换。

添加导航变量后，在默认值区域点击进入「导航设置」。可以选择手动新增一级导航，也可以点击「获取后台数据」，把后台已经配置好的导航栏数据直接导入进来。

如果导入的是后台导航数据，页面会自动带出对应的一级导航、二级导航以及子级结构。你可以在导航设置里继续调整导航名称、描述、是否显示、跳转链接，也可以通过「上移」「下移」「提级」「降级」调整导航顺序和层级关系。

配置完成后点击「确定」，返回代码组件页面后再点击「保存」。保存后，页面预览区域就可以看到代码组件已经读取到导航变量数据，并按照代码规则显示出导航菜单内容。

如果页面中没有正确显示导航数据，需要重点检查三个位置：代码里引用的变量名是否和变量配置中的变量名一致，代码组件是否已经开启「允许配置变量」，以及导航变量里是否已经正确获取或配置了导航数据。确认无误后，再保存并发布页面即可。