Horizon 二次开发 - 登陆页面修改

最新推荐文章于 2024-03-28 10:30:58 发布

猫影

最新推荐文章于 2024-03-28 10:30:58 发布

阅读量1.6k

点赞数 3

分类专栏： openstack Django 文章标签： openstack horizon

本文链接：https://blog.csdn.net/cloudmq/article/details/74928705

版权

Django 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

openstack

10 篇文章 0 订阅

订阅专栏

效果图

这里，我们来参照阿里云的登陆页面改一改平台登陆页面，看看效果图吧
阿里云页面(20170710时候的页面)
这里写图片描述
smaleaf主题修改后的页面
smalleaf
有几分神似，但非专业美工，谈不上美化了，能看ok了。阿里云登陆的那个框是iframe，当然你也可以做一个静态网页，留一个iframe，然后把openstack的login页面嵌入。这里我采用的是直接修改，没有用框架。

注：默认都是在smalleaf里面工作的 “./”代表当前目录是“/usr/share/openstack_dashboard/themes/smalleaf/”目录下
注：制作过程用到了浏览器开发者工具，不断尝试，这是一种笨方法。您大可自己弄一套后台管理页面进行开发
注：smalleaf是default主题拷贝的一个备份，改名为smalleaf，在default基础上进行修改，上一篇博客有大致步骤

静态文件准备

mkdir ./templates/auth/header -> 创建存放login-header的存放目录
cp ./templates/header/_header.html ./templates/auth/header/  && cp ./templages/header/_usermenu.html ./templates/auth/header/ 
cp ./templates/base.html ./templates/auth/ -> 这里准备一个base，专门提供login使用。

./template/auth/header/_header.html内容

{% load i18n %}

{% spaceless %}
<nav class="navbar navbar-default navbar-fixed-top" style="background: #191E21;">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      {% include "auth/header/_brand.html" %}

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">{% trans "Toggle navigation" %}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
          {% include "auth/header/_user_menu.html" %}
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endspaceless %}

./templates/auth/header/_user_menu.html内容

{% load i18n %}
{% load themes %}
{% if not_list %}
  <div class="dropdown user-menu">
{% else %}
  <li class="dropdown user-menu">
{% endif %}
    <a data-toggle="dropdown" href="#" class="dropdown-toggle" role="button" aria-expanded="false">
      <span class="fa fa-home"></span>
      <span class="user-name">首 页</span>
    </a>
{% if not_list %}
  </div>
{% else %}
  </li>
{% endif %}

./templates/auth/login.html文件内容

{% extends "auth/base.html" %} <!--这里加载的是自己的base-->
{% load i18n %}

{% block title %}{% trans "云平台 | 登陆" %}{% endblock %}

{% block body_id %}splash{% endblock %}

{% block content %}
    <div class='topbar'>
        {% include "auth/header/_header.html" %}
    </div>
  {% include 'auth/_login.html' %}
{% endblock %}

{% block footer %}
  {% include '_login_footer.html' %}
{% endblock %}

这样，header添加完毕

背景修改

背景使用的是阿里云的那个背景，直接修改./templates/auth/base.html即可

.body-bk {
    background-color: #1F2325;
    background-image: url(../img/bk-2880-1280.jpg);
    background-size: cover;
}
...
<body class="body-bk" id="{% block body_id %}{% endblock %}" ng-app='horizon.app' ng-strict-di>
...
</body>

container 修改

这里需要注意的是，horizon-center要指定一下float:right，然后修改一下style.大概内容为：
./templates/auth/_login_page.html

{% extends 'auth/_login_form.html' %}
{% load i18n %}
{% block pre_login %}
<!--自定义的一个css-->
    <style>
        .login-welcome {
            margin-left:7%;
            margin-right: 7%;
            margin-top: 12%;
            float: left;
            color: #ffffff;
        }
    </style>
  <div class="container login" >
    <div class="row">
   <div class="login-welcome " >
    <h1>xx低门槛快速</h1><br>
   <ul>
   <li>...<li>
   </ul>
    </div>
      <!--div class="col-xs-11 col-sm-8 col-md-6 col-lg-5 horizontal-center"-->
    <div class="col-xs-10 col-sm-7 col-md-5 col-lg-4 horizontal-center" style="margin-top:10%;margin-right: 7%; float: right">
    <!--div class="col-xs-10 col-sm-7 col-md-5 col-lg-4 col-md-offset-7"-->
        {{ block.super }}
{% endblock %}

{% block login_header %}
{#  {% include 'auth/_splash.html' %}#}
  {{ block.super }}
{% endblock %}

{% block post_login %}
      {{ block.super }}
      </div>
    </div>
  </div>
{% endblock %}

页脚添加和页眉类似，需要注意一点，当浏览器缩小时，页脚可能会遮住正文内容，而且没有滚动条显示，解决方法为，创建一个空的div，指定个高度

 <div style="height:120px;"></div> <p></p>

./templates/_login_footer.html内容

{% comment %}
  A simple placeholder template for custom login footer content
{% endcomment %}


{% load i18n %}

{% spaceless %}
    <!--这里的空的div 是防止footer遮住正文内容-->
    <div style="height:120px;"></div> <p></p>
    <nav class="navbar navbar-default navbar-fixed-bottom" style="background: #373D41;">
        <div class="container-fluid">
            <div id="navbar-collapse">
                <ul class="nav navbar-nav ">
                    <li>

                          <a style="float: left">
                            <span>关于我们</span>

                        </a>
                          <a style="float: left">
                            <span>招贤纳士</span>

                        </a>
                          <a style="float: left">
                            <span>友情链接</span>

                        </a>

                    </li>

                </ul>
            </div><!-- /.navbar-collapse -->

        </div><!-- /.container-fluid -->

    </nav>
{% endspaceless %}

结束语

这里的登陆页面，仍旧没有修改任何py文件，简单的改了下html。权当抛砖引玉，您可以自己准备一套精美的皮肤，大刀阔斧的改吧。但要注意，文件路径要准确，否则加载不了。
openstack horizon 利用回调机制，会从外层向里层调用准备的模板，静态文件等，当外层（比如我的smalleaf主题）含有符合他要求的模板，静态文件等，他就会加载我的文件，没有的他会自己用自己的。horion加载的同一个文件在两个地方都有的情况下回调，先调用openstck目录中的，找不到的情况下会去horizon里面去找。详细的请研究源码吧。