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

xiaoxiao2021-02-28 119

效果图

这里，我们来参照阿里云的登陆页面改一改平台登陆页面，看看效果图吧阿里云页面(20170710时候的页面) smaleaf主题修改后的页面有几分神似，但非专业美工，谈不上美化了，能看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">  <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>  <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> {% include "auth/header/_user_menu.html" %} </ul> </div> </div> </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" %}  {% 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 %}  <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-10 col-sm-7 col-md-5 col-lg-4 horizontal-center" style="margin-top:10%;margin-right: 7%; float: right">  {{ block.super }} {% endblock %} {% block login_header %} {# {% include 'auth/_splash.html' %}#} {{ block.super }} {% endblock %} {% block post_login %} {{ block.super }} </div> </div> </div> {% endblock %}

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

./templates/_login_footer.html内容

{% comment %} A simple placeholder template for custom login footer content {% endcomment %} {% load i18n %} {% spaceless %}  <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> </div> </nav> {% endspaceless %}

结束语

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

转载请注明原文地址: https://www.6miu.com/read-31521.html

技术

最新回复(0)

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

效果图

静态文件准备

header 添加

背景修改

container 修改

footer添加

结束语

技术