导航设置与图标素材

分类:模板与标签 · 更新于 2026-11-05 · 约 985 字

电脑主导航、快速导航与手机导航的后台配置,图标字与图标上传做法及标签调用。

一、导航分三类

系统导航包含电脑端主导航、电脑端快速导航和手机端主导航,分别在后台上「网站设置」下的导航设置、快速导航设置、手机版导航设置中维护,数据统一存在 kf_nav 表,前台由 ${WebNav}、${WebNav1} 以及手机导航循环标签输出。

二、添加与编辑导航项

  1. 进入后台「网站设置 → 导航设置」,输入链接名,也就是导航上显示的文字。
  2. 点击链接输入框,会弹出站内已有入口供选择;也可以手工输入其它地址,需以 http:// 或 https:// 开头。
  3. 设置排序,数字越大越靠前;保存后前台按此顺序排列。
  4. 每项可单独设置打开方式,建议外链用新窗口、站内入口用当前窗口。

三、手机导航的图标

手机导航每项除链接名、链接外,还能配图标或图标字:

字段说明
链接名建议不超过 4 个字,过长会换行或截断
图标字没有合适图标时用一个字生成文字图标,并可设置图标字颜色
图标有现成素材时直接上传图片,建议统一为 png
目标窗口手机端建议设为当前窗口,体验更顺
排序数字越大越靠前

手机导航一排 4 个,数量不限。图标显示异常时,先确认图片格式与尺寸统一,再排除浏览器缓存。

图标素材可从图标库平台获取,例如 iconfont 一类站点,登录后可搜索关键词、挑选后下载 png,存到本地再上传到导航设置中。

四、模板中的调用写法

<ul class="nav">${WebNav}</ul>
<!--${WebWapNav,24}-->
  <li><a href="${kLink}" target="${kTarget}"><i style="background-image:url(${kIco})"></i>${kTitle,4}</a></li>
<!--${EndWebWapNav}-->

${kLink} 是链接,${kTarget} 是打开方式,${kTitle,4} 是显示 4 个字的链接字,${kIco} 是图标地址;若要输出图标字,可改用带颜色与文字的内部标签。末尾数字 24 表示最多调用 24 项,按实际栏目数调整。

五、注意事项

  • 改过导航后必须清理缓存,否则前台仍是旧结构。
  • 导航指向已删除的栏目会变成死链,调整分类后要同步复核导航。
  • 主导航与快速导航的链接可以重复,但文字建议区分,便于用户理解。

相关教程

文档对不上实际界面?可在常见问题中查找排查步骤,或按「安装部署」中的环境要求核对版本。