自定义 HTML 和 CSS

对于希望彻底重构状态页面外观的用户，StatusIQ 提供多层次的自定义功能，包括 HTML、CSS、JavaScript、字体、页眉和页脚。 

访问布局编辑器的步骤：

1. 登录 StatusIQ。
2. 选择您要更改布局的状态页面。
3. 导航至自定义 > 自定义 HTML 和 CSS。
4. 进行必要的修改，然后点击发布以将更改应用到您的状态页面。
   
   注意

   • 您可以通过以下两种方式修改状态页面的颜色：
     • 自定义颜色
     • 自定义 HTML 和 CSS 
   • 若已启用"自定义 HTML 和 CSS"选项，通过"自定义颜色"设置的颜色将被覆盖。

布局编辑器

布局编辑器包含三个部分：

• 自定义 CSS
• 自定义页眉 HTML
• 自定义页脚 HTML

在编辑器中所做的任何更改都会自动反映在右侧面板中，提供实时预览。更改将以草稿形式保存，不会立即同步到公开页面。点击发布后，对页面所做的所有修改（包括事件历史、组件详情和事件详情页面的修改）将应用到状态页面。点击撤销草稿更改可撤销尚未发布的更改。

您可在发布和撤销草稿更改按钮下方查看最新发布者、发布日期和时间。

以下是状态页面的各种可用自定义选项：

• CSS
• HTML 和 JavaScript

本文档末尾提供了用于编辑状态页面布局的示例代码。 

CSS 自定义

要实现您偏好的自定义设计元素，可以使用自定义 CSS 和 JavaScript 编辑器来增强状态页面的布局。输入到"自定义 CSS"字段中的代码片段将放入外部样式表，并包含在文档的页眉部分。该外部样式表插入在主样式表之后，让您能够根据需要覆盖样式。

请参考此页面，查看 StatusIQ 中定义的默认 CSS 类的代码展示。

HTML 和 JavaScript 自定义

您可以根据自己的偏好，使用自定义 JavaScript 代码修改状态页面的布局。通过此功能，您可以重新排序章节、隐藏章节等。 

请参考此页面，查看默认的文档对象模型（DOM）结构，以及默认页面内容加载所在的 div.container。

请参考此页面，查看自定义更改后的 DOM 结构。

以下是几个示例操作的代码片段。请注意，Web 设计的特性可能导致兼容性问题，请测试您的 HTML 代码以确保兼容性。

• 将状态从"正常运行"更改为您选择的任意状态：在页面的自定义页脚 HTML部分添加此代码，以将组件摘要部分中的服务状态修改为您选择的任意状态。
• 重新排序章节：在自定义页脚 HTML部分插入此代码，以重新排列状态页面上的章节顺序。
• 更改横幅文本：在自定义页脚 HTML部分插入此代码片段，以更改横幅中的默认文本"All components are Operational"。
• 添加自定义页脚：要为状态页面添加自定义页脚，请在自定义页脚 HTML部分插入此代码。
• 替换订阅按钮：要替换订阅按钮，请在自定义页眉 HTML部分添加此代码片段。
• 添加横幅图片：使用此代码片段为状态页面添加横幅图片。代码片段可放置在自定义页眉 HTML部分。
• 更改从外部来源加载的字体：在编辑器的自定义 CSS部分插入此代码片段。
• 更改容器颜色：在编辑器的自定义 CSS部分插入此代码片段。
• 更改背景颜色：在自定义页眉 HTML部分插入此代码片段。
• 重新排序组件：要重新排列状态页面上的组件顺序，请插入此代码片段。插入后，请确保更新组件名称并根据需要调整"data-sort"属性的权重值，以确定组件的排列顺序。
• 自定义性能指标：在"自定义页脚 HTML"部分插入此代码，以在状态页面上显示监视器所有可能的性能指标。
  
  注意

  每种监视器类型最多可添加三个已配置的性能指标。

• 自定义性能图表：在"自定义页脚 HTML"部分插入此代码，以在状态页面上显示监视器的性能图表。
  
  注意

  每种监视器类型最多可添加三个已配置的性能图表。