add customized javascript and globalization

最新推荐文章于 2017-02-17 22:50:00 发布

原创最新推荐文章于 2017-02-17 22:50:00 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在 OpenStack Horizon 中自定义样式、引入 CSS 和 JS 库，以及实现国际化功能。通过创建自定义模板文件和修改 locale 文件，用户能够轻松地个性化界面并支持多种语言。

硬件provision终于收尾了，产品化，国际化，基本测试都齐活了，从前到后的一套东西，虽然之前自认为已经知道了，实际做下来，中间和预想的有差异，但

最终结果就是我所想的样子，心情也不错！

这里记录几个自己遇到的问题，以后若有查阅也方便：

一. 模板问题

大部分的horizon页面效果的实现是不需要特别的css或者js的引入的，特别是table相关的操作，horizon自己做了很好的封装，依样画葫芦即可，就算

有些不明白的(前面的记录中有所提及)，也基本上可以解决。直到我希望在horizon中加入特殊的效果，需要引入现有的css和js库，发现按照：

http://docs.openstack.org/developer/horizon/topics/customizing.html 中所写的行不通，这让我非常苦恼，毕竟不能引入自己的style和js，对horizon的改动受限很大。

进行过很多尝试，改变template的位置，compress问题一大堆，网上资料也很少！不断的尝试两天后发现其实改动很容易，只是不能按照文档来，我是用的Kilo版本，

方法为：

1. 建一个_scripts.html，里面是自己的js:

{% extends 'horizon/_scripts.html' %}
{% block custom_js_files %}
<script src='{{ STATIC_URL }}project/myown/my.js' type='text/javascript' charset='utf-8'></script>
xxx
{% endblock %}

这STATIC_URL是什么呢，根据自己配置文件中指定的不同会不一样，是用RDO安装的话在/usr/share/openstack-dashabord/static下，因此，

在此目录下建立目录"project/myown/", 将my.js等自己的js放入其中（是admin的就将project变成admin）

2. 按照文档 {% extends 'my_custom_dashboard/base.html' %}不行，改成{% extends 'project/my_custom_dashboard/base.html' %}也不行，

后来干脆{% extends 'base.html' %}，然后形式变为：

% extends 'base.html' %}

#css库
{% block css %}
      <link href='{{ STATIC_URL }}project/myown/my.css' type='text/css' rel='stylesheet' /> #和js一样
      {% include "_stylesheets.html" %}
{% endblock %}
{% block main %}
#实现页面
{% endblock %}
{% block js %}
    {% include "project/physical_servers/_scripts.html" %}#js库
    <script type="text/javascript">
        function test(){
        #实现单独的页面是用的js
        }
    </script>
{% endblock %}