OpenStack Horizon 登陸頁面定製

文章目錄

效果圖

這裏，我們來參照阿里雲的登陸頁面改一改平臺登陸頁面，看看效果圖：
阿里雲頁面

smaleaf主題修改後的頁面：

有幾分神似，但非專業美工，談不上美化了，能看ok了。阿里雲登陸的那個框是 iframe，當然你也可以做一個靜態網頁，留一個 iframe，然後把 openstack 的 login 頁面嵌入。這裏我採用的是直接修改，沒有用框架。

注：默認都是在smalleaf裏面工作的 “./”代表當前目錄是“/usr/share/openstack_dashboard/themes/smalleaf/”目錄下
注：製作過程用到了瀏覽器開發者工具，不斷嘗試，這是一種笨方法。您大可自己弄一套後臺管理頁面進行開發
注：smalleaf是default主題拷貝的一個備份，改名爲smalleaf，在default基礎上進行修改。

靜態文件準備

/usr/share/openstack-dashboard/openstack_dashboard
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使用。

header 添加

/usr/share/openstack-dashboard/openstack_dashboard/templates/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 %}

/usr/share/openstack-dashboard/openstack_dashboard/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 %}

/usr/share/openstack-dashboard/openstack_dashboard/templates/auth/headerlogin.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 %}

背景修改

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

   <style>
     .body-bk {
        background-color: #1F2325;
        background-image: url(../../static/dashboard/img/bk-2880-1280.jpg); <!--這裏加載的是自己的背景圖-->
        background-size: cover;
        }
    </style>

  </head>

  <body class="body-bk" id="{% block body_id %}{% endblock %}" ng-app='horizon.app' ng-strict-di>
    <noscript>
      <div class="alert alert-danger text-center javascript-disabled">
        {% trans "This application requires JavaScript to be enabled in your web browser." %}
      </div>
    </noscript>
    {% block content %}
      <div class='topbar'>
        {% include "header/_header.html" %}
      </div>
      <div id='main_content'>
        {% include "horizon/_messages.html" %}
        {% block sidebar %}
          {% include 'horizon/common/_sidebar.html' %}
        {% endblock %}
        <div id='content_body'>
          <div class='container-fluid'>
            <div class="row">
              <div class="col-xs-12">
                <div class="page-breadcrumb">
                  {% block breadcrumb_nav %}
                    {% breadcrumb_nav %}
                  {% endblock %}
                </div>

                {% block page_header %}
                  {% include "horizon/common/_page_header.html" with title=page_title %}
                {% endblock %}
                {% block main %}{% endblock %}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endblock %}
    <div id="footer">
      {% block footer %}
        {% include "_footer.html" %}
      {% endblock %}
    </div>
    {% block js %}
      {% include "horizon/_scripts.html" %}
    {% endblock %}
    <div id="modal_wrapper"></div>
  </body>
</html>
"base.html" 84L, 2648C                                                                                                           84,1         底端
    <style>
     .body-bk {
        background-color: #1F2325;
        background-image: url(../../static/dashboard/img/bk-2880-1280.jpg);
        background-size: cover;
        }
    </style>

  </head>

  <body class="body-bk" id="{% block body_id %}{% endblock %}" ng-app='horizon.app' ng-strict-di>
    <noscript>
      <div class="alert alert-danger text-center javascript-disabled">
        {% trans "This application requires JavaScript to be enabled in your web browser." %}
      </div>
    </noscript>
    {% block content %}
      <div class='topbar'>
        {% include "header/_header.html" %}
      </div>
      <div id='main_content'>
        {% include "horizon/_messages.html" %}
        {% block sidebar %}
          {% include 'horizon/common/_sidebar.html' %}
        {% endblock %}
        <div id='content_body'>
          <div class='container-fluid'>
            <div class="row">
              <div class="col-xs-12">
                <div class="page-breadcrumb">
                  {% block breadcrumb_nav %}
                    {% breadcrumb_nav %}
                  {% endblock %}
                </div>

                {% block page_header %}
                  {% include "horizon/common/_page_header.html" with title=page_title %}
                {% endblock %}
                {% block main %}{% endblock %}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endblock %}
    <div id="footer">
      {% block footer %}
        {% include "_footer.html" %}
      {% endblock %}
    </div>
    {% block js %}
      {% include "horizon/_scripts.html" %}
    {% endblock %}
    <div id="modal_wrapper"></div>
  </body>
</html>
"base.html" 84L, 2648C

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 style="font-weight:bold">低門檻快速上雲</h1><br>
    <ul style="font-size:18px">
       <li>更高控制性和安全性</li>
       <li>研發和測試，提供虛擬機資源</li>
       <li>解決運維的資源分配瓶頸</li>
       <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 %}

footer添加

頁腳添加和頁眉類似，需要注意一點，當瀏覽器縮小時，頁腳可能會遮住正文內容，而且沒有滾動條顯示，解決方法爲，創建一個空的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;color:#fff">
                            <span>關於我們</span>
                        </a>

                        </a>
                          <a style="float: left; color:#fff">
                            <span>友情鏈接</span>

                        </a>

                    </li>

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

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

    </nav>
{% endspaceless %}

結束語

這裏的登陸頁面，仍舊沒有修改任何 py 文件，簡單的改了下 html。權當拋磚引玉，您可以自己準備一套精美的皮膚，大刀闊斧的改吧。但要注意，文件路徑要準確，否則加載不了。
openstack horizon 利用回調機制，會從外層向裏層調用準備的模板，靜態文件等，當外層（比如我的smalleaf 主題）含有符合他要求的模板，靜態文件等，他就會加載我的文件，沒有的他會自己用自己的。horion 加載的同一個文件在兩個地方都有的情況下回調，先調用openstck目錄中的，找不到的情況下會去 horizon 裏面去找。詳細的請研究源碼吧。

參考資料：
https://blog.csdn.net/cloudmq/article/details/74928705

OpenStack Horizon 登陸頁面定製

文章目錄

效果圖

靜態文件準備

header 添加

背景修改

container 修改

footer添加

結束語

Centos7.6 安裝 Oracle 11g 實例

走進Java接口測試之構建工具Maven入門

Jenkins Pipeline+SonarQube+Python集成釘釘羣消息自動通知(webhook版)

走進Java接口測試之從0到1搭建數據驅動框架（設計篇）

走進Java接口測試之從0到1搭建數據驅動框架（需求篇）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結