J版 OpenStack动态加载菜单图片详解
2015-08-27 17:01
225 查看
首先,需要了解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>对应的不同的图片。大家这里应该有不同的想法和办法吧~
最后展示一下我改过的菜单(几个菜单图片是随便截的个图.........)
一.这里大致说下与加载左侧菜单相关的几个文件
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>对应的不同的图片。大家这里应该有不同的想法和办法吧~
最后展示一下我改过的菜单(几个菜单图片是随便截的个图.........)
相关文章推荐
- ubuntu下安装 openssl 开发库
- Linux 下编译安装OpenCV
- Linux服务器的初步配置流程
- Linux下,多线程程序死循环问题调试
- 一些常用到的linux命令整理笔记
- linux keypad driver
- linux常用命令(10):cat命令
- 无忧之道:Docker中容器的备份、恢复和迁移
- Windows中SSH Secure Shell Client 的使用方法
- linux date v1
- tomcat和jetty的比较
- cocos2dx-游戏apk上传Google Play警告:OpenSSL版本有多个安全漏洞,建议您尽快更新 OpenSSL
- LINUX 命令总结
- loadrunner监控Linux之前需要做的准备工作
- linux read v1
- Linux第1天
- loadrunner监控Windows之前需要做的准备工作
- 常用的邮箱服务器(SMTP、POP3)域名、端口汇总
- linux shell——小试牛刀
- 免费学桌面工程师、系统工程师、系统运维工程师