J版 OpenStack动态加载菜单图片详解

首先，需要了解OpenStack Horizon动态加载、注册dashboard、PanelGroup、Panel的原理流程

一.这里大致说下与加载左侧菜单相关的几个文件

1. /usr/lib/python2.7/site-packages/horizon/templates/base.html

       

      红色方框对应组装的菜单html

2. /usr/lib/python2.7/site-packages/horizon/templates/horizon/common/_sidebar.html

 

 对应方法def  horizon_nav

3. /usr/lib/python2.7/site-packages/horizon/templatetags/horizon.py

这个方法读取dashboard、PanelGroup、Panel并最终传值给_accordion_nav.html

4. /usr/lib/python2.7/site-packages/horizon/templates/horizon/_accordion_nav.html

 

这里是组成dashboard、PanelGroup、Panel的html，并指明哪部分使用哪个css

二.修改代码以实现目标：菜单有图标(这里如果你只是想每个PanelGroup前的图标都是一样的话，可以直接修改css，无需改代码)

  _accordion_nav.html第21行

 这里变量{{heading}}即为每个PanelGroup的名称(每个dashboard都是：Peoject、Admin...)

 具体这个{{heading}}是怎么传过来的，看下_accordion_nav.html逻辑，最后找到horizon.py第67行

group.name即为{{heading}}

那么找到文字了 具体我们要怎么在文字之前加入图片呢？

这毕竟是个html，采用原始办法

在{{heading}}之前加入<img src="/static/dashboard/img/xx.png">就行了

但是问题来了，PanelGroup是动态加载的，是在逻辑遍历中的，我们如何根据不同的PanelGroup名称加载不同的图片呢？

其实可以写成这样<img src="/static/dashboard/img/{{ heading }}.png">,只需要找几个名称与PanelGroup的名称一样的图片就可以了，比如Compute.png、Network.png

本来这个想法是不错的，但是这只能在整个horizon是英文状态下才生效，在中文下是不行的，因为在这个html中加载中文名称的图片是展示不出图片的

至于为何在中文状态下不行？怎么变了变成中文的了呢？

ps：变量是由horizon.py传入_accordion_nav.html中的。传入html之前，国际化已经完成了，其实在最初dashboard.py下就建立国际化了（怎么国际化的？看下djangobook国际化）

怎么在中文的时候也生效呢？

我们可以在horizon.py中既传入group.name的同时也将group.slug想办法传到html，然后在html中再根据不同的slug来<img>对应的不同的图片。大家这里应该有不同的想法和办法吧~

最后展示一下我改过的菜单（几个菜单图片是随便截的个图.........）