第 5 章自定义仪表板

安装 OpenStack 仪表板后，您可以自定义其外观和感觉，以适应您自己的需求。此处的自定义选项侧重于 local_settings.py 文件中包含的设置，存储在 /openstack-dashboard/openstack_dashboard/local/ 中。

注意

默认情况下，OpenStack 仪表板会安装 openstack-dashboard-theme 软件包。

如果您不想使用这个主题，您可以使用以下命令删除它及其依赖项：

rpm -e --nodeps openstack-dashboard-theme

# rpm -e --nodeps openstack-dashboard-theme

Copy to Clipboard

Toggle word wrap

您可以自定义仪表板的以下元素。请注意，对于 Director 部署，您将需要以 heat-admin 身份登录每个控制器节点，才能进行更改。

标徽
站点颜色
HTML 标题
站点品牌链接
帮助 URL
风格表

徽标和站点 Colors:

以 png 格式创建两个徽标文件，其大小透明背景如下：
- 登录屏幕（例如： login_logo.png）：365 x 50
- 登录标语（例如： banner_logo.png）：216 x 35
将新镜像上传到以下位置： /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
在以下目录中创建 SCSS 风格表： /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/scss/

根据需要更改颜色和镜像文件名。请注意，相对目录路径应该相同。以下示例文件演示了如何自定义 SCSS 文件：

/*
* New theme colors for the dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*/

h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/login_logo.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/banner_logo.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #355796 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #BAD3E1 !important;
text-decoration: none;
}

/*
* New theme colors for the dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*/

h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/login_logo.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/banner_logo.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #355796 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #BAD3E1 !important;
text-decoration: none;
}

Copy to Clipboard

Toggle word wrap

在您选择的编辑器中打开以下 HTML 模板： /usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html

添加一行，使其包含您新创建的风格表。例如，custom.scss 文件：

 <link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' />
 <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' />
 <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />

 <link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' />
 <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' />
 <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />

Copy to Clipboard

Toggle word wrap

重启 Apache 服务器：

# systemctl restart httpd

# # systemctl restart httpd

Copy to Clipboard

Toggle word wrap

要查看您的更改，只需重新加载仪表板。如有必要，根据需要返回并修改 SCSS 文件。

HTML 标题：

要设置浏览器窗口顶部显示的 HTML 标题，请将以下行添加到 local_settings.py 中：
```
SITE_BRANDING = "Example, Inc. Cloud"
```
```
SITE_BRANDING = "Example, Inc. Cloud"
```
Copy to Clipboard Toggle word wrap
重新启动 Apache 服务器。

站点品牌链接：

徽标也充当超链接。默认行为是重定向到 horizon:user_home。若要更改，请将所需的 URL 目标的以下属性添加到 local_settings.py ：
```
SITE_BRANDING_LINK = "http://example.com"
```
```
SITE_BRANDING_LINK = "http://example.com"
```
Copy to Clipboard Toggle word wrap
重新启动 Apache 服务器。

帮助 URL:

默认情况下，帮助 URL 指向 https://access.redhat.com/documentation/zh-CN/Red_Hat_Enterprise_Linux_OpenStack_Platform/7/index.html。您可以通过将以下属性编辑为 local_settings.py 中所选的 URL 来更改帮助 URL。
```
'help_url': "http://openstack.mycompany.org",
```
```
'help_url': "http://openstack.mycompany.org",
```
Copy to Clipboard Toggle word wrap
重新启动 Apache 服务器。

自定义 Stylesheets：

可以为您的仪表板定义自定义风格表。仪表板的基本模板 openstack_dashboard/templates/base.html 定义了可覆盖的多个块。要定义仅适用于特定仪表板的自定义 SCSS 文件，请在仪表板的 templates 文件夹中创建一个基本模板，它将扩展仪表板的基本模板。

示例： openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.html。在此模板中，您可以重新定义块 CSS:

{% extends 'base.html' %}
{% block css %}
  {% include "_stylesheets.html" %}
  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}

{% extends 'base.html' %}
{% block css %}
  {% include "_stylesheets.html" %}
  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}

Copy to Clipboard

Toggle word wrap

注意

不要忘记包含 _stylesheets.html，其中包含仪表板的所有默认风格表。

第 5 章自定义仪表板

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 5 章 自定义仪表板

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第 5 章自定义仪表板