导航设置与图标素材
电脑主导航、快速导航与手机导航的后台配置,图标字与图标上传做法及标签调用。
一、导航分三类
系统导航包含电脑端主导航、电脑端快速导航和手机端主导航,分别在后台上「网站设置」下的导航设置、快速导航设置、手机版导航设置中维护,数据统一存在 kf_nav 表,前台由 ${WebNav}、${WebNav1} 以及手机导航循环标签输出。
二、添加与编辑导航项
- 进入后台「网站设置 → 导航设置」,输入链接名,也就是导航上显示的文字。
- 点击链接输入框,会弹出站内已有入口供选择;也可以手工输入其它地址,需以
http://或https://开头。 - 设置排序,数字越大越靠前;保存后前台按此顺序排列。
- 每项可单独设置打开方式,建议外链用新窗口、站内入口用当前窗口。
三、手机导航的图标
手机导航每项除链接名、链接外,还能配图标或图标字:
| 字段 | 说明 |
|---|---|
| 链接名 | 建议不超过 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 项,按实际栏目数调整。
五、注意事项
- 改过导航后必须清理缓存,否则前台仍是旧结构。
- 导航指向已删除的栏目会变成死链,调整分类后要同步复核导航。
- 主导航与快速导航的链接可以重复,但文字建议区分,便于用户理解。