dashboard页面示例解析含css+js

1.horizon登录界面的模版文件全部定义在auth目录中

2.打开：templates/auth/login.html 登录界面的入口文件，可以看到，这个文件继承

自base.html

可以修改进行验证：

ng-app='horizon.app' ng-strict-di>

Test

登入界面会发生变化。

3.接下来我们再来看下auth/_login.html，这个文件引入了_login_modal.html文件和

_login_page.html文件，

4，auth/_login_modal.html:定义登录表单,打开这个文件，可以看到它时继承自

auth/_login_form.html文件，这个文件中详细定义了登录界面，

修改如下：

4.现在我们来看下登录进去之后header这块怎么来修改，同理：header html页面主

要在templates/header目录中

通过base.html：

5.可以得知_header.html是header模块的入口文件，打开

templates/header/_header.html

6. 继续往下看，可以看到_header.html文件中引入

{% include “header/_brand.html” %}: 这个文件主要用来加载

logo，

6.{% include “header/_context_selection.html” %}:

该文件主要用来在定义项目／区域切换的样式：

简单修改如下：可以看到项目切换颜色发生了变化。

这个文件中通过{% load context_selection %}自定义的标签引入了horizon.dev/openstack_dashboard/templatetags/context_selection.py 整个horizon项目中templatetags目录中定义的私有的django模版标签即自定义模版标签。

通过引入这个文件，在_context_selection.html中使用的标签都可以在context_selection.py文件中找到他的实现。

{% show_overview %}：对应“def show_overview(context)”方法，并且可以根据这个方法得知它所使用的模版

horizon.dev/openstack_dashboard/templates/context_selection/_over view.html，如果你想修改这个模版片段，原理都一样，那这个文件安相同的目录结构在我们的主题/themes/bruce/templates/context_selection/建立起来再进行修改即可，这里不再详细说明。

{% show_domain_list %}：修改原理同上

{% show_project_list %}：修改原理同上

{% show_region_list %}：修改原理同

7.{% include “header/_user_menu.html” %}

主要用来显示右侧点击当前登录用户名的下拉列表框，包括帮助、主题

切换、退出等功能

简单修改如下：

主要用来显示右侧点击当前登录用户名的下拉列表框，包括帮助、主题切换、退出等功能

简单修改如下：

{% include “header/_region_selection.html” %}:

9.sidebar修改(侧边导航)

可知侧边导航入口文件为：{% include ‘horizon/common/_sidebar.html’ %}

那么在哪里定义了horizon_nav这个变量呢？可以看到它加载了{% load branding horizon i18n %}，注意，这里有“horizon”这个文件指的是horizon.dev/horizon/templatetags/horizon.py，其中{% horizon_nav %}标签通过文件中的”def horizon_nav(context):“函数方法定义，并且该函数方法指定了模版文件为horizon/_sidebar.html。如果需要对返回的数据格式有修改就需要改动这个文件，不建议直接修改，可以重构一个方法来进行修改合适。打开/themes/bruce/templates/horizon/_sidebar.html，没什么好讲都是html 代码，其中导航就是通过for标签循环components变量加载出来的，直接进行修改就行了。

10. page header 修改

horizon/common/_page_header.html:

这个文件主要用来定义右侧页面用来显示当前plan名字位置区域，打开该文件：