Horizon 二次开发

环境准备

• ssh 允许root（不安全，但是为了使用pycharm代码提交方便，最简单的方法）登陆
• 修改/etc/ssh/sshd_config 将 PermitRootLogin prohibit-password -> PermitRootLogin yes

• 备份一下目录：

  # cp /user/share/openstack_dashboard /user/share/openstack_dashboard.bak

• 说明：请开发中间阶段，即使备份，或制作快照，保存本地

pycharm 远程同步/user/share/openstack_dashboard 所有文件
注：使用pycharm登陆服务器，请使用root+passwd 否则会出现上传代码没权限的情况

---

初步修改

• cp /openstack_dashboard/themes/default /openstack_dashboard/themes/smalleaf
• 对openstack_dashboard/setting.py的修改
  

DEBUG=TRUE....AVAILABLE_THEMES = [    (        'ubuntu',        pgettext_lazy('Ubuntu theme', 'Ubuntu'),        'themes/ubuntu'    ), (        'default',        pgettext_lazy('Default style theme', 'Default'),        'themes/default'    ), (        'material',        pgettext_lazy("Google's Material Design style theme", "Material"),        'themes/material'    ),    (        'smalleaf',        pgettext_lazy("Design theme by Longruan", "SmallLeaf"),        'themes/smalleaf'    ),]

这样就能增加了一个SmallLeaf的主题格式，接下来，进行修改Smalleaf内容

themes 文件准备

mkdir ./openstack_dashboard/smalleaf/staticmkdir ./openstack_dashboard/smalleaf/templstescp -r ./horizon/templates/auth ./openstack_dashboard/themes/smalleaf/authcp -r ./horizon/templates/horizon ./openstack_dashboard/themes/smalleaf/horizoncp -r ./openstack_dashboard/templates/* ./openstack_dashboard/themes/smalleaf/templates/cp -r ./openstack_dashboard/static/dashboard ./openstack_dashboard/themes/smalleaf/static/mv ./openstack_dashboard/themes/smalleaf/_styles.scss ./openstack_dashboard/themes/smalleaf/static/mv ./openstack_dashboard/themes/smalleaf/_variables.scss ./openstack_dashboard/themes/smalleaf/static/

文件说明

两个非常重要的文件：
_styles.scss ->horizon样式
_variables.scss->全局变量定义

修改部分html

• 修改图标
  themes/smalleaf/auth/_splash.html

{% load themes %}<div class="text-center">    <img class="splash-logo" src="{{ STATIC_URL }}themes/smalleaf/img/login_logo.png"></div>

• 固定右侧侧边栏
  themes/smalleaf/horizon/_sidebar.html

{% load horizon i18n %}<!--solve fixed sidebar problem by gqw--><!--主要是增加这个fixed--><style>.fixed{  position:fixed;  width: 220px;  background:#333744;  height: 100%;}</style>...

• themes/smalleaf/templates/horizon/commen/_sidebar.html

{% load branding horizon i18n %}<nav id='sidebar' class="fixed">  {% horizon_nav %}</nav>

• themes/smalleaf/static/_styles.scss

// all this line@import "dashboard/scss/horizon";

• 修改图标
  themes/smalleaf/teamplates/head/_brand.html

{% load branding %}{% load themes %}<a class="navbar-brand" href="{% site_branding_link %}" target="_self">        <img class="openstack-logo" src="{{ STATIC_URL }}themes/smalleaf/img/head_logo.png" alt="{% site_branding %}">    {#  <img class="openstack-logo" src="{% themable_asset 'img/logo.svg' %}" alt="{% site_branding %}">#}</a>

初步效果图

• 登陆
  

• 界面展示

总结

1. 没有对*.py文件进行任何修改
2. 所有工作都是在Smalleaf文件夹中进行
3. _styles.scss _variables.scss能够完成绝大部分主题颜色修改
4. 目前工作仅仅是最简答的修改，系统性的修改，后期会进行