[ English | 한국어 (대한민국) | português (Brasil) | français | español | English (United Kingdom) | русский | 中文 (简体, 中国) | Esperanto | Deutsch | Indonesia | नेपाली ]

主题

从 Kilo 版本开始，OpenStack Dashboard 的样式可以通过使用主题来更改。主题是一个包含 _variables.scss 文件以覆盖 SCSS 中使用的颜色代码，以及一个 _styles.scss 文件以在仪表板样式加载后加载其他样式的文件目录。

从 Mitaka 版本开始，Horizon 可以配置为在运行时使用多个主题。它使用浏览器 cookie 允许用户在配置的主题之间切换。默认情况下，Horizon 配置了两个标准主题：‘default’ 和 ‘material’。

要配置或更改可用主题，请在 local_settings.py 中设置 AVAILABLE_THEMES 为元组列表，格式为 ('name', 'label', 'path')

name

主题值在 cookie 中存储的键

标签

在用户菜单下的主题切换器中显示的标签

路径

主题的目录位置。路径必须相对于 openstack_dashboard 目录，或者到文件系统上可访问位置的绝对路径

要使用自定义主题，请将 AVAILABLE_THEMES 设置为 local_settings.py 中的主题列表。如果您希望以类似于旧版 Horizon 的模式运行，请将 AVAILABLE_THEMES 设置为单个元组，并且应用程序中将不可用主题切换，以允许用户配置主题。

例如，具有多个主题的配置

AVAILABLE_THEMES = [
    ('default', 'Default', 'themes/default'),
    ('material', 'Material', 'themes/material'),
]

具有单个主题的配置

AVAILABLE_THEMES = [
    ('default', 'Default', 'themes/default'),
]

仪表板自定义变量和 Bootstrap 变量都可以被覆盖。有关可以更改的仪表板 SCSS 变量的完整列表，请参阅位于 openstack_dashboard/static/dashboard/scss/_variables.scss 的变量文件。

为了构建自定义主题，需要同时使用 _variables.scss 和 _styles.scss，并且 _variables.scss 必须提供所有默认 Bootstrap 变量。

从现有主题继承

自定义主题必须在 _variables.scss 和 _styles.scss 中实现 Horizon 所需的所有 Bootstrap 变量。为了使这更容易，您可以继承默认主题中需要的变量，并仅覆盖需要自定义的变量。要从默认主题继承，请将以下内容放入您的主题的 _variables.scss

@import "/themes/default/variables";

完成更改后，您必须使用以下命令重新生成静态文件

python manage.py collectstatic

默认情况下，AVAILABLE_THEMES 设置配置的所有主题都由 horizon 在 collectstatic 过程中收集。默认情况下，主题被收集到动态 static/themes 目录中，但可以通过 local_settings.py 变量 THEME_COLLECTION_DIR 进行自定义。

收集后，通过从其收集目录导入变量和样式，可以从 AVAILABLE_THEMES 配置的任何主题继承。以下是从 material 主题继承的示例

@import "/themes/material/variables";
@import "/themes/material/styles";

所有主题都需要在 AVAILABLE_THEMES 中配置，以允许继承。如果您希望从某个主题继承，但不想将该主题作为主题选择器小部件中可选择的选项显示，则只需配置 SELECTABLE_THEMES 以排除父主题即可。 SELECTABLE_THEMES 必须与 AVAILABLE_THEMES 具有相同的格式。如果未显式设置，则默认为 AVAILABLE_THEMES。

Bootswatch

Horizon 封装了 Bootswatch SCSS 文件以用于其 material 主题。因此，使用现有的 Bootswatch 主题作为基础很简单。这是因为 Bootswatch 作为第三方静态资源加载，因此会自动收集到 /horizon/lib/ 中的 static 目录中。以下是如何从 Bootswatch 的 darkly 主题继承的示例

@import "/horizon/lib/bootswatch/darkly/variables";
@import "/horizon/lib/bootswatch/darkly/bootswatch";

组织您的主题目录

自定义主题目录可以组织得不同，具体取决于所需的自定义级别，因为它可能包括静态文件以及 Django 模板。它可以包含将以不同方式使用的特殊子目录：static、templates 和 img。

static 文件夹

如果主题文件夹包含名为 static 的子文件夹，则该子文件夹将用作主题的**静态根目录**。即，Horizon 将在该子文件夹中查找 _variables.scss 和 _styles.scss 文件。此文件夹的内容也将提供在 /static/custom。

templates 文件夹

如果主题文件夹包含 templates 子文件夹，则该子文件夹的路径将被添加到 TEMPLATE_DIRS 元组的前面，以允许主题特定的模板自定义。

使用 templates 文件夹

Horizon 中使用的任何 Django 模板都可以通过主题覆盖。这允许在不同主题的范围内存在高度自定义的用户体验。任何被覆盖的模板都必须遵循扩展模板所期望的相同目录结构。

例如，如果您希望自定义侧边栏，Horizon 期望模板位于 horizon/_sidebar.html。您需要在您的模板目录中复制该目录结构，以便您的覆盖将位于 { theme_path }/templates/horizon/_sidebar.html。

img 文件夹

如果主题文件夹的静态根目录包含 img 目录，则可以使用 {% themable_asset %} templatetag 覆盖所有使用它的图像。

这些资产包括 logo.svg、splash-logo.svg 和 favicon.ico，但是目前不支持覆盖 Heat 在 dashboard/img 文件夹中使用的 SVG/GIF 资产。