首先,需要了解OpenStack Horizon动态加载、注册dashboard、PanelGroup、Panel的原理流程
一.这里大致说下与加载左侧菜单相关的几个文件
1. /usr/lib/python2.7/site-packages/horizon/templates/base.html
二.修改代码以实现目标:菜单有图标(这里如果你只是想每个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>对应的不同的图片。大家这里应该有不同的想法和办法吧~
最后展示一下我改过的菜单(几个菜单图片是随便截的个图.........)