系统后台的左侧菜单的使用解释 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了10074字，被18人关注，获得了12个喜欢
系统后台的左侧菜单的使用解释
超级管理员后台的界面结构说明
左侧菜单普通
先来看左侧这个导航条是怎么来的？
让我们点击后台菜单看看
（这里原先是菜单管理，为了更好的区分我设置成了后台菜单）点击右侧列表中的系统 我们就可以看到下面的界面
为了更好的说明问题 我对属性管理的分组做了去除操作大家可以通过查看这里的设置来配置新的菜单
左侧菜单对比说明
超级管理员的后台操作就是如此形成的，当大家在新建后台时就可以不用做太大的修改即可轻松的搞定模板下面是一个模板展示 OT的Public/base模板的结构
将会对部分内容给大家作一些说明
&!doctype html&
&meta charset="UTF-8"&
&title&{$meta_title}|{:C('TIPINFO')}管理平台&/title&
&link href="__ROOT__/Public/favicon.ico" type="image/x-icon" rel="shortcut icon"&
&link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all"&
&link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all"&
&link rel="stylesheet" type="text/css" href="__CSS__/module.css"&
&link rel="stylesheet" type="text/css" href="__CSS__/style.css" media="all"&
&link rel="stylesheet" type="text/css" href="__CSS__/{$Think.config.COLOR_STYLE}.css" media="all"&
&!--[if lt IE 9]&
&script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"&&/script&
&![endif]--&&!--[if gte IE 9]&&!--&
&script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"&&/script&
&script type="text/javascript" src="__JS__/jquery.mousewheel.js"&&/script&
&!--&![endif]--&
&block name="style"&&/block&
&!-- 头部 --&
&div class="header"&
&!-- Logo --&
&span class="logo"&&/span&
&!-- /Logo --&
&!-- 主导航 --&
&ul class="main-nav"&
&volist name="__MENU__.main" id="menu"&
&li class="{$menu.class|default=''}"&&a href="{$menu.url|U}"&{$menu.title}&/a&&/li&
&!-- /主导航 --&
&!-- 用户栏 --&
&div class="user-bar"&
&a href="javascript:;" class="user-entrance"&&i class="icon-user"&&/i&&/a&
&ul class="nav-list user-menu hidden"&
&li class="manager"&你好，&em title="{:session('user_auth.username')}"&{:session('user_auth.username')}&/em&&/li&
&li&&a href="{:U('User/updatePassword')}"&修改密码&/a&&/li&
&li&&a href="{:U('User/updateNickname')}"&修改昵称&/a&&/li&
&li&&a href="{:U('Public/logout')}"&退出&/a&&/li&
&!-- /头部 --&
&!-- 边栏 --&
&div class="sidebar"&
&!-- 子导航 --&
&block name="sidebar"&
&div id="subnav" class="subnav"&
&notempty name="_extra_menu"&
{// 动态扩展菜单 //}
{:extra_menu($_extra_menu,$__MENU__)}
&/notempty&
&!-- 哈哈 这里开始就是左侧菜单啦。。。。。 --&
&volist name="__MENU__.child" id="sub_menu"&
&!-- 子导航 --&
&notempty name="sub_menu"&
&notempty name="key"&&h3&&i class="icon icon-unfold"&&/i&{$key}&/h3&&/notempty&
&ul class="side-sub-menu"&
&volist name="sub_menu" id="menu"&
&a class="item" href="{$menu.url|U}"&{$menu.title}&/a&
&/notempty&
&!-- /子导航 --&
&!-- /子导航 --&
&!-- /边栏 --&
&!-- 内容区 --&
&div id="main-content"&
&div id="top-alert" class="fixed alert alert-error" style="display:"&
&button class="close fixed" style="margin-top: 4"&&&/button&
&div class="alert-content"&这是内容&/div&
&div id="main" class="main"&
&block name="nav"&
&!-- nav --&
&notempty name="_show_nav"&
&div class="breadcrumb"&
&span&您的位置:&/span&
&assign name="i" value="1" /&
&foreach name="_nav" item="v" key="k"&
&if condition="$i eq count($_nav)"&
&span&{$v}&/span&
&span&&a href="{$k}"&{$v}&/a&&&/span&
&assign name="i" value="$i+1" /&
&/foreach&
&/notempty&
&!-- nav --&
&block name="body"& &/block&
&div class="cont-ft"&
&div class="copyright"&
&div class="fl"&感谢使用&a href="" target="_blank"&{:C('TIPINFO')}&/a&&/div&
&div class="fr"&V{$Think.const.BP_VERSION}&/div&
&!-- /内容区 --&
&script type="text/javascript"&
(function(){
var ThinkPHP = window.Think = {
: "__ROOT__", //当前网站地址
: "__APP__", //当前项目地址
"PUBLIC" : "__PUBLIC__", //项目公共目录地址
: "{:C('URL_PATHINFO_DEPR')}", //PATHINFO分割符
: ["{:C('URL_MODEL')}", "{:C('URL_CASE_INSENSITIVE')}", "{:C('URL_HTML_SUFFIX')}"],
: ["{:C('VAR_MODULE')}", "{:C('VAR_CONTROLLER')}", "{:C('VAR_ACTION')}"]
&script type="text/javascript" src="__STATIC__/think.js"&&/script&
&script type="text/javascript" src="__JS__/common.js"&&/script&
&script type="text/javascript"&
+function(){
var $window = $(window), $subnav = $("#subnav"),
$window.resize(function(){
$("#main").css("min-height", $window.height() - 80);
}).resize();
/* 左边菜单高亮 */
url = window.location.pathname + window.location.
url = url.replace(/(\/(p)\/\d+)|(&p=\d+)|(\/(id)\/\d+)|(&id=\d+)|(\/(group)\/\d+)|(&group=\d+)/, "");
$subnav.find("a[href='" + url + "']").parent().addClass("current");
/* 左边菜单显示收起 */
$("#subnav").on("click", "h3", function(){
var $this = $(this);
$this.find(".icon").toggleClass("icon-fold");
$this.next().slideToggle("fast").siblings(".side-sub-menu:visible").
prev("h3").find("i").addClass("icon-fold").end().end().hide();
$("#subnav h3 a").click(function(e){e.stopPropagation()});
/* 头部管理员菜单 */
$(".user-bar").mouseenter(function(){
var userMenu = $(this).children(".user-menu ");
userMenu.removeClass("hidden");
clearTimeout(userMenu.data("timeout"));
}).mouseleave(function(){
var userMenu = $(this).children(".user-menu");
userMenu.data("timeout") && clearTimeout(userMenu.data("timeout"));
userMenu.data("timeout", setTimeout(function(){userMenu.addClass("hidden")}, 100));
/* 表单获取焦点变色 */
$("form").on("focus", "input", function(){
$(this).addClass('focus');
}).on("blur","input",function(){
$(this).removeClass('focus');
$("form").on("focus", "textarea", function(){
$(this).closest('label').addClass('focus');
}).on("blur","textarea",function(){
$(this).closest('label').removeClass('focus');
// 导航栏超出窗口高度后的模拟滚动条
var sHeight = $(".sidebar").height();
var subHeight
= $(".subnav").height();
var diff = subHeight - sH //250
var sub = $(".subnav");
if(diff & 0){
$(window).mousewheel(function(event, delta){
if(delta&0){
if(parseInt(sub.css('marginTop'))&-10){
sub.css('marginTop','0px');
sub.css('marginTop','+='+10);
if(parseInt(sub.css('marginTop'))&'-'+(diff-10)){
sub.css('marginTop','-'+(diff-10));
sub.css('marginTop','-='+10);
&block name="script"&&/block&
左侧菜单的生成就是通过
&volist name="__MENU__.child" id="sub_menu"&
&!-- 子导航 --&
&notempty name="sub_menu"&
&notempty name="key"&&h3&&i class="icon icon-unfold"&&/i&{$key}&/h3&&/notempty&
&ul class="side-sub-menu"&
&volist name="sub_menu" id="menu"&
&a class="item" href="{$menu.url|U}"&{$menu.title}&/a&
&/notempty&
&!-- /子导航 --&
通过这里可以看到官方在构建OneThink时候也是下了很大的功夫的。
至于官方是如何生成tree 并获取到的可以通过对extra_menu这个方法进行debug来查看这个方法的位置是 /Application/Admin/Common/function.phg
第253行朱亚杰也对这个方法做了简单说明，但最主要的还是那个tree的生成。那么$__MENU__参数是在哪里设置的呢？可以参见 /Application/Admin/Controller/AdminController.class.php 第65行这里的get_menu方法便是这个东东了
动态扩展(假的啊)
大家在看代码的时候会看到这样的东东
{// 动态扩展菜单 //}
{:extra_menu($_extra_menu,$__MENU__)}
咦,这个东东是做什么用的？让我们再来看个别的图
内容区域的左侧导航配置
内容左侧实际情况
傻眼了吧，我刚开始的时候看到这里的也是傻了。这里是怎么弄的呢？看程序源码吧
#Application\Admin\Controller\ArticleController.class.php 第154行
$this-&getMenu();
#然后查看getMenu()内容
* 显示左边菜单，进行权限控制
* @author huajie &&
protected function getMenu(){
//获取动态分类
$cate_auth
AuthGroupModel::getAuthCategories(UID); //获取当前用户所有的内容权限节点
$cate_auth
$cate_auth == null ? array() : $cate_
M('Category')-&where(array('status'=&1))-&field('id,title,pid,allow_publish')-&order('pid,sort')-&select();
//没有权限的分类则不显示
if(!IS_ROOT){
foreach ($cate as $key=&$value){
if(!in_array($value['id'], $cate_auth)){
unset($cate[$key]);
list_to_tree($cate);
//生成分类树
//获取分类id
I('param.cate_id');
$this-&cate_id
//是否展开分类
$hide_cate =
if(ACTION_NAME != 'recycle' && ACTION_NAME != 'draftbox' && ACTION_NAME != 'mydocument'){
$hide_cate
//生成每个分类的url
foreach ($cate as $key=&&$value){
$value['url']
'Article/index?cate_id='.$value['id'];
if($cate_id == $value['id'] && $hide_cate){
$value['current'] =
$value['current'] =
if(!empty($value['_child'])){
$is_child =
foreach ($value['_child'] as $ka=&&$va){
$va['url']
'Article/index?cate_id='.$va['id'];
if(!empty($va['_child'])){
foreach ($va['_child'] as $k=&&$v){
'Article/index?cate_id='.$v['id'];
$va['id'];
$is_child = $v['id'] == $cate_id ? true :
//展开子分类的父分类
if($va['id'] == $cate_id || $is_child){
$is_child =
if($hide_cate){
$value['current']
$va['current']
$value['current']
$va['current']
$va['current']
$this-&assign('nodes',
$this-&assign('cate_id',
$this-&cate_id);
//获取面包屑信息
$nav = get_parent_category($cate_id);
$this-&assign('rightNav',
//获取回收站权限
$this-&assign('show_recycle', IS_ROOT || $this-&checkRule('Admin/article/recycle'));
//获取草稿箱权限
$this-&assign('show_draftbox', C('OPEN_DRAFTBOX'));
//获取审核列表权限
$this-&assign('show_examine', IS_ROOT || $this-&checkRule('Admin/article/examine'));
这就出来了吗
？ 纳尼！？ 怎么没看到个人中心的字样呢？还是再看看模板吧
&div id="subnav" class="subnav"&
&notempty name="_extra_menu"&
{// 动态扩展菜单 //}
{:extra_menu($_extra_menu,$__MENU__)}
&/notempty&
&volist name="__MENU__.child" id="sub_menu"&
&!-- 子导航 --&
&notempty name="sub_menu"&
&notempty name="key"&&h3&&i class="icon icon-unfold"&&/i&{$key}&/h3&&/notempty&
&ul class="side-sub-menu"&
&volist name="sub_menu" id="menu"&
&a class="item" href="{$menu.url|U}"&{$menu.title}&/a&
&/notempty&
&!-- /子导航 --&
&i class="icon &notin name="Think.ACTION_NAME"
value="mydocument,draftbox,examine"&icon-fold&/notin&"&&/i&
&ul class="side-sub-menu &notin name="Think.ACTION_NAME"
value="mydocument,draftbox,examine"&subnav-off&/notin&"&
&li &eq name="Think.ACTION_NAME" value="mydocument"&class="current"&/eq&&&a class="item" href="{:U('article/mydocument')}"&我的文档&/a&&/li&
&eq name="show_draftbox" value="1"&
&li &eq name="Think.ACTION_NAME" value="draftbox"&class="current"&/eq&&&a class="item" href="{:U('article/draftbox')}"&草稿箱&/a&&/li&
&eq name="show_examine" value="1"&
&li &eq name="Think.ACTION_NAME" value="examine"&class="examine"&/eq&&&a class="item" href="{:U('article/examine')}"&待审核&/a&&/li&
&volist name="nodes" id="sub_menu"&
&!-- 子导航 --&
&notempty name="sub_menu"&
&i class="icon &neq name="sub_menu['current']" value="1"&icon-fold&/neq&"&&/i&
&gt name="sub_menu['allow_publish']" value="0"&&a class="item" href="{$sub_menu.url|U}"&{$sub_menu.title}&/a&&else/&{$sub_menu.title}&/gt&
&ul class="side-sub-menu &neq name='sub_menu["current"]' value="1"&subnav-off&/neq&"&
&volist name="sub_menu['_child']" id="menu"&
&li &if condition="$menu['id'] eq $cate_id or $menu['current'] eq 1"&class="current"&/if&&
&gt name="menu['allow_publish']" value="0"&&a class="item" href="{$menu.url|U}"&{$menu.title}&/a&&else/&&a class="item" href="javascript:void(0);"&{$menu.title}&/a&&/gt&
&!-- 一级子菜单 --&
&present name="menu['_child']"&
&ul class="subitem"&
&foreach name="menu['_child']" item="three_menu"&
&gt name="three_menu['allow_publish']" value="0"&&a class="item" href="{$three_menu.url|U}"&{$three_menu.title}&/a&&else/&&a class="item" href="javascript:void(0);"&{$three_menu.title}&/a&&/gt&
&!-- 二级子菜单 --&
&present name="three_menu['_child']"&
&ul class="subitem"&
&foreach name="three_menu['_child']" item="four_menu"&
&gt name="four_menu['allow_publish']" value="0"&&a class="item" href="{:U('index','cate_id='.$four_menu['id'])}"&{$four_menu.title}&/a&&else/&&a class="item" href="javascript:void(0);"&{$four_menu.title}&/a&&/gt&
&!-- 三级子菜单 --&
&present name="four_menu['_child']"&
&ul class="subitem"&
&volist name="four_menu['_child']" id="five_menu"&
&gt name="five_menu['allow_publish']" value="0"&&a class="item" href="{:U('index','cate_id='.$five_menu['id'])}"&{$five_menu.title}&/a&&else/&&a class="item" href="javascript:void(0);"&{$five_menu.title}&/a&&/gt&
&/present&
&!-- end 三级子菜单 --&
&/foreach&
&/present&
&!-- end 二级子菜单 --&
&/foreach&
&/present&
&!-- end 一级子菜单 --&
&/notempty&
&!-- /子导航 --&
&!-- 回收站 --&
&eq name="show_recycle" value="1"&
&em class="recycle"&&/em&
&a href="{:U('article/recycle')}"&回收站&/a&
$(function(){
$(".side-sub-menu li").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
卧槽，，竟然不是真正的 动态扩展这里是手动拼出来的。不过也得感激官方这种想法也能够给出实例。。。
那么真正的动态扩展在哪里？
真正的动态扩展
没错，这就是扩展页面
扩展菜单是这样设置第
咦 有戏，赶紧去看代码
#Application\Admin\Controller\AddonsController.class.php
就在开头不用写行号了
class AddonsController extends AdminController {
public function _initialize(){
$this-&assign('_extra_menu',array(
'已装插件后台'=& D('Addons')-&getAdminList(),
parent::_initialize();
看到了已安装插件，看到了_extra_menu 一切ok。。。本章完
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
以ThinkPHP为核心框架搭建的快速建站框架OneThink
· 5人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：