🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
本节在布局模板中加一个导航,调出系统后台的自定义菜单 打开后台中的 网站菜单管理![](https://img.kancloud.cn/2d/16/2d1613702dad0e19ed8b4774cd553d92_692x493.png) 后台自己设置好菜单,我们在布局模板中加入相关调用代码,让在其前端显示出来,我们先打开系统默认的看下 在系统默认`pc_layout`模板中这块就是系统的导航菜单并且带下拉的 ![](https://img.kancloud.cn/5a/c7/5ac7e779abe8d899b949642b85bca733_690x416.png) 当然我们不需要去完全复制系统的,我们自己先做一个导航,然后套用相应的数据即可 我们用ul列表来做一个列表导航: ![](https://img.kancloud.cn/1e/c9/1ec9850f4fc9758c1e28560b6ecc0679_476x178.png) 显示如下: ![](https://img.kancloud.cn/c9/9d/c99dcdbf8f1746d7305312295ba1c861_511x253.png) 我们加点css让其横向排列(注意:这里不讲html和css知识,所以相关知识请参考html和css等相关资料) 其实做模板主要就是要学会html和css,然后再了解下数据的相关调用就可以了。 加了css后,预览如下: ![](https://img.kancloud.cn/a4/52/a4528000cf56ad35ee84c7ac2006ac43_514x143.png) 这里只做演示不做效果。我们来分析下菜单的调用 先看这行 ![](https://img.kancloud.cn/44/4c/444ce412772ad87a9b294a5d83911ad9_678x73.png) 利用php定义一个变量,`$menu_choose `并给一个值,这个值来自后面这句话: ![](https://img.kancloud.cn/f9/53/f95367c18e36b55b6219e51578ababf1_685x71.png) 这里虽然不讲php知识,但是大家还是要了解下这句话的含义,这句话是一个表达式,很多编程语言里都存在,比如js里. 即? :  问号冒号 也叫三目元算符 问号前面,代表判断,表示是不是为真,如果为真,那么就体现问号后面的内容,如果为假那么就体现冒号后面的内容 举个例子,1加1等于2 ? 显示对的 :显示错的 。前置条件是真,那么就体现问号后面的内容,其他忽略,所以体现的就是“显示对的”。 所以这里问的 `config(‘system_dirname’)`  是不是为真 这个`config(‘system_dirname’)`代表当前频道的关键字(比如cms),存在的话为真。 也就是说如果我们当前访问的是某个频道页(比如cms),那么就体现`config(‘system_dirname’)`即`(cms)`。 但是这里我们访问的是首页,所以`config('system_dirname')`代表为假,我们这里体现就是冒号后面的内容,即index 也就是说当前的表达式,我们把index赋值给变量 `$menu_choose`, 即`$menu_choose = 'index';` 这里小段知识点比较啰嗦,如果没看懂就多看几遍,毕竟这个表达式很多地方都会用到,也很方便,堪比if~else的用法 下面看这句:`{volist}和{/volist}`是配对的,代表循环中间的部分进行循环显示。 ![](https://img.kancloud.cn/bd/2a/bd2a4bbc34773a3bd640384eb4f48752_653x93.png) 这里记住固定格式即可,里面的php方法不用管,总之是得到菜单数组 一个是` pc|get _web_menu`;  一个是`wap|get_web_menu` 我们看下简单的代码实现 ![](https://img.kancloud.cn/40/1b/401b8c7bf08bacd0249b221302a2b878_676x165.png) 预览: ![](https://img.kancloud.cn/67/da/67da8a2298d85c3dc01a86aa2be6a9c3_544x141.png) 因为后台设置了5个pc头部菜单,所以这里循环了5个显示 ![](https://img.kancloud.cn/b6/51/b651cf75c41bf1d4da33f01aa7221c4a_653x514.png) 这时,我们把代码中静态信息换成动态的变量: ![](https://img.kancloud.cn/73/3d/733db1c7c0a59307dec627ffaeed36f1_670x170.png) 相关信息就出来了 ![](https://img.kancloud.cn/ce/d7/ced7d5b867851bd8c392bd46af59bc09_540x107.png) 我们这里说明下一级循环,中间内容rs.son子菜单的循环需要css展示,道理相同不在重复表述。 还有其他的变量,就是菜单中的图标和一些其他信息的调用,自己写入代码体会下即可。