knpMenuBundle制作面包屑导航 左侧导航 碉堡了

最近做一个小项目,用的symfony3玩的。

之前一直深受别的框架影响。习惯把链接管理写在数据库里,这样方面操作。

但是今天按照以前的思路做下来别的都还正常但是做面包屑导航的时候就遇到问题了。于是找了一个knpmenubundle来重做了栏目  发现这样做真的好快。比以前做的快多了

首先按照symfony官网中使用教程来操作。

简单的东西直接按官网走就解决了。

https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/index.rst

执行完以后可以进行操作了。

在你的bundle新建文件,为了快,我直接贴出目录机构

创建这个文件然后执行操作

我是执行的树形栏目并且打算以后加上角色访问。所以在这里做的有点繁琐。

在adminBuilder.php代码为:

  1. <?php
  2. /**
  3. * Created by PhpStorm.
  4. * User: 27981
  5. * Date: 2016/11/13
  6. * Time: 20:33
  7. */
  8. namespace Lot\AclBundle\Menu;
  9. use Knp\Menu\Util\MenuManipulator;
  10. use Doctrine\Common\Util\Debug;
  11. use Knp\Menu\FactoryInterface;
  12. use Symfony\Component\DependencyInjection\ContainerAwareInterface;
  13. use Symfony\Component\DependencyInjection\ContainerAwareTrait;
  14. class AdminBuilder implements ContainerAwareInterface
  15. {
  16. use ContainerAwareTrait;
  17. public function mainMenu(FactoryInterface $factory, array $options)
  18. {
  19. // 获取doctrine服务方便进行数据库操作
  20. $em = $this->container->get(‘doctrine‘)->getManager();
  21. // 开始创建菜单
  22. $menu = $factory->createItem(‘root‘,array(‘label‘=>‘主页‘));
  23. // 从数据库读出所有的链接
  24. $linklist = $em->getRepository(‘LotAclBundle:Linkadmin‘)->getLinkList(true,true);
  25. // 遍历列出一级栏目
  26. foreach ($linklist as $lk=>$lv)
  27. {
  28. // 添加一级栏目
  29. $menu->addChild($lv[‘id‘],array(‘label‘=>$lv[‘routeLabel‘],‘attributes‘=> array(
  30. ‘icons‘ => $lv[‘iconName‘]
  31. )));
  32. // 遍历列出二级栏目
  33. if(isset($lv[‘sLinkList‘]) && !empty($lv[‘sLinkList‘]))
  34. {
  35. foreach ($lv[‘sLinkList‘] as $sk=>$sv)
  36. {
  37. // 执行添加二级栏目
  38. $menu[$lv[‘id‘]]->addChild($sv[‘id‘], array(
  39. ‘route‘ => $sv[‘routeName‘],
  40. ‘label‘ => $sv[‘routeLabel‘],
  41. ‘attributes‘ => array(‘describe‘ => $sv[‘describe‘]),
  42. ));
  43. $treeLink = $em->getRepository(‘LotAclBundle:Linkadmin‘)->findOneBy(array(
  44. ‘linkPid‘ => $sv[‘id‘],
  45. ‘isShow‘ => 0,
  46. ‘isDelete‘ => 0,
  47. )
  48. );
  49. if(!empty($treeLink))
  50. {
  51. // 三级
  52. $menu[$lv[‘id‘]][$sv[‘id‘]]->addChild($treeLink->getId(),
  53. array(
  54. ‘route‘ => $treeLink->getRouteName(),
  55. ‘label‘ => $treeLink->getRouteLabel(),
  56. ‘attributes‘ => array(‘describe‘ => $treeLink->getDescribe()),
  57. ));
  58. }
  59. }
  60. }
  61. }
  62. return $menu;
  63. }
  64. }

然后再leftmenu.html.twig中(这个为左侧菜单)

  1. {% set menuItem = knp_menu_get(‘LotAclBundle:AdminBuilder:mainMenu‘) %}
  2. <!------菜单------->
  3. <div id="sidebar" class="sidebar">
  4. <div class="sidebar-menu nav-collapse">
  5. <div class="divide-20"></div>
  6. <!-- SEARCH BAR -->
  7. <div id="search-bar">
  8. <input class="search" type="text" placeholder="Search"><i class="fa fa-search search-icon"></i>
  9. </div>
  10. <!-- /SEARCH BAR -->
  11. <!-- 左侧菜单开始 -->
  12. <ul>
  13. {% if menuItem.children is defined and menuItem.children is not empty %}
  14. {% for lkey in menuItem.children %}
  15. <li class="has-sub">
  16. <a href="javascript:;" class="">
  17. <i class="fa {{ lkey.attributes.icons }}"></i> <span class="menu-text">{{ lkey.label }}</span>
  18. <span class="arrow"></span>
  19. </a>
  20. {% if lkey.children is defined and lkey.children is not empty %}
  21. <ul class="sub">
  22. {% for skey in lkey.children %}
  23. <li><a class="" href="{{ skey.uri is defined ? skey.uri: ‘#‘ }}"><span class="sub-menu-text">{{ skey.label is defined ? skey.label : ‘‘ }}</span></a></li>
  24. {% endfor %}
  25. </ul>
  26. {% endif %}
  27. </li>
  28. {% endfor %}
  29. {% endif %}
  30. </ul>
  31. <!-- /左侧菜单结束 -->
  32. </div>
  33. </div>
  34. <!-- SIDEBAR -->
  35. <!------菜单------->
  36. {#<div id="sidebar" class="sidebar">#}
  37. {#<div class="sidebar-menu nav-collapse">#}
  38. {#<div class="divide-20"></div>#}
  39. {#<!-- SEARCH BAR -->#}
  40. {#<div id="search-bar">#}
  41. {#<input class="search" type="text" placeholder="Search"><i class="fa fa-search search-icon"></i>#}
  42. {#</div>#}
  43. {#<!-- /SEARCH BAR -->#}
  44. {#<!-- 左侧菜单开始 -->#}
  45. {#<ul>#}
  46. {#{% if linklist is defined and linklist is not empty %}#}
  47. {#{% for list in linklist %}#}
  48. {#<li class="has-sub">#}
  49. {#<a href="javascript:;" class="">#}
  50. {#<i class="fa {{ list.iconName is defined ? list.iconName : ‘‘ }}"></i> <span class="menu-text">{{ list.routeLabel is defined ? list.routeLabel : "" }}</span>#}
  51. {#<span class="arrow"></span>#}
  52. {#</a>#}
  53. {#{% if list.sLinkList is defined and list.sLinkList is not empty %}#}
  54. {#<ul class="sub">#}
  55. {#{% for slist in list.sLinkList %}#}
  56. {#<li><a class="" href="{{ slist.routeName is defined ? path(slist.routeName): ‘#‘ }}"><span class="sub-menu-text">{{ slist.routeLabel is defined ? slist.routeLabel : ‘‘ }}</span></a></li>#}
  57. {#{% endfor %}#}
  58. {#</ul>#}
  59. {#{% endif %}#}
  60. {#</li>#}
  61. {#{% endfor %}#}
  62. {#{% endif %}#}
  63. {#</ul>#}
  64. {#<!-- /左侧菜单结束 -->#}
  65. {#</div>#}
  66. {#</div>#}
  67. <!-- /SIDEBAR -->

效果如下图:

可以打印出来数据结构。看到数据结构就知道怎么遍历了。之前第一次用的时候对symfony不太了解。所以很多地方搞不定。于是放弃了使用这个包。如今回过头来感觉这些包是真方便

数据结构如图

上面是两种读取方式。一种是用menubundle 一直是按传统做法来做。

按照symfony的路由命名  如果后面有参数的话,应该这样做

  1. $parent = $menu->addChild(‘Users‘, array(‘route‘ => ‘users‘));
  2. $parent->addChild(‘Edit‘, array(‘route‘ => ‘user_edit‘, ‘routeParameters‘ => array(‘id‘ => $request->get(‘id‘))));

为了便于操作我习惯把这些参数写进数据库

左侧导航是搞定了。然后头疼的就来了。面包屑导航。找了半天在StackOverflow里找了一个特别厉害的大哥  说的特别仔细

链接在这里

http://stackoverflow.com/questions/13359366/creating-breadcrumbs-in-symfony-2-1-using-knpmenu-bundle

在这里有几个要点

获取栏目总数据
knp_menu_get()
{% set menuItem = knp_menu_get(‘LotAclBundle:AdminBuilder:mainMenu‘) %}
获取当前的栏目数据
knp_menu_get_current_item()
{% set currentInfo = knp_menu_get_current_item(menuItem) %}
获取面包屑数据
knp_menu_get_breadcrumbs_array()
  1. <!-- 面包屑开始 -->
  2. <ul class="breadcrumb">
  3. {% for breadcrumb_item in knp_menu_get_breadcrumbs_array(knp_menu_get_current_item(menuItem)) %}
  4. {% if not loop.last %}
  5. <li><a href="{{ breadcrumb_item.uri }}">{{ breadcrumb_item.label }}</a></li>
  6. {% else %}
  7. <li class="active">{{ breadcrumb_item.label }}</li>
  8. {% endif %}
  9. {% endfor %}
  10. </ul>
  11. <!-- /面包屑结束 -->

效果图如下 是不是特别叼。我感觉真他妈叼爆了

从此以后做面包屑导航是如此的简单哈啊哈哈哈哈哈哈哈哈哈哈

时间: 2024-10-13 02:44:27

knpMenuBundle制作面包屑导航 左侧导航 碉堡了的相关文章

css制作面包屑导航

css2制作面包屑导航主要的原理就是利用绝对定位以及当元素的宽度和高度都为零时边框的挤压性质,效果图 代码: <ul>     <li>HTML<i></i></li>     <li><em></em>CSS<i></i></li>     <li><em></em>JavaScript<i></i></li

WordPress主题开发:制作面包屑导航

所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php : //面包屑功能 function the_breadcrumb() { echo '<ul class="breadcrumb">'; if (!is_home()) { echo '<li><a href="'; echo get_option

辛星跟您解析在CSS面包屑中三角形的定位问题

刚才看到有位网友很纳闷第二个棕色三角形是怎么定位的,我当感觉在下面说不清楚,就特别开了一片博客,来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的那篇博文,如果不明白,可以问我,我会解释的. 首先是html代码,我们直接拿过来,粘贴一下: <html> <head> <title>辛星手写CSS面包屑</title> <link rel="stylesheet" type=&quo

辛星和您一起用纯CSS美化面包屑导航

首先讲一下面包屑导航为什么叫做面包屑导航,它来自于一个童话故事,这个童话故事的名字也非常有特色,叫做"汉塞尔和格莱特",有一天他们去森林里游玩,但是走着走着发现迷路了,大家都知道,森林里都都是数,不管往哪边走,还是茫茫的一片树,于是他们在沿途走过的地方都撒下面包屑,他们利用这些面包屑帮助他们走出了森林,因此,面包屑导航的意思就是说我们去过哪些地方,以及我们如何回到我们之前的位置. 有时候我们特别需要面包屑导航,比如我们在某论坛或者某网上商城闲逛的时候,很容易被茫茫的帖子和众多的商品搞的

带箭头的面包屑导航栏

制作漂亮美观的面包屑导航栏 在开始之前,我要照例给大家科普一下啥叫面包屑导航栏 类似于下面这几种的 主页>栏目页>文章页面 主页/栏目页/文章页面 可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏 但是...... 你不觉得这个不好看吗? 如果哪一天,你们公司的UI给你一张图,图里的面包屑导航栏是这样的 这样的 又或者是其他带图案的面包屑导航栏,这时候应该怎么做? 可能有朋友说这个简单,so easy,直接找个图案给导航栏加background就行了 可是,真的有这么简单

纯CSS3编写的面包屑导航收集

整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导航 查看网站 CSS面包屑导航 查看网站 CSS3面包屑导航制作教程 查看网站 黄色的CSS Breadcrumbs教程 查看网站 CSS3 Breadcrumbs 查看网站 扁平化风格面包屑制作教程 查看网站 CSS 面包屑菜单制作方法 查看网站 五个不同风格的面包屑导航CSS制作教程 查看网站

SEO之面包屑导航

面包屑导航作为网站优化中经典的一个优化方案,尤其一定的作用,如电子铭牌网站的建设,采用面包屑导航,主要作用是: 1.为了让用户在浏览网站时能够明确的浏览页面位置,同时可以方便用户返回上一级菜单,符合用户体验; 2.从网站优化的角度来说,符合用户体验的设计思路本身就有利于网站优化,同时有利于提升某些关键词的排名. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事Hansel和Gretel,当Hansel和Gretel穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都

Layui导航、面包屑

物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 element模块.虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用.你可以移步文档左侧[内置模块 - 常用元素操作 element]了解详情 水平.垂直.侧边三个导航的HTML结构是完全一样的,不同的是: 垂直导航需要追加class:layu

如何删除帝国cms面包屑导航中首页链接的/index.html

前面一篇"帝国cms面包屑导航的首页链接锚文本改成关键字"中xmyanke有写到改首页链接的方法,但是感觉比较麻烦,这里就说说如何删除帝国cms面包屑导航中首页链接的/index.html,我们的首页一般都是***.com/结尾的,如果Breadcrumb的中首页链接变成***.com/index.html结尾的话,会造成有两个首页,分散权重.重复收录.(当然可以把index.html 301到不带index.html) 找到e/class/connect.php,搜索$file=$p