企业官网建设流程全解析

OneUptime 状态页品牌定制与自定义域名配置完全指南

【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime

状态页是 OneUptime 中客户真正会反复查看的唯一对外界面：它必须呈现你的品牌形象，并运行在你自己的域名之下。本文以官方文档《Image de marque et domaines personnalisés》（品牌与自定义域名）为主体，系统梳理状态页品牌设置的七个配置屏幕、自定义域名从 CNAME 验证到 SSL 证书签发的完整流程，并结合当前仓库源码（packages/Common、packages/App）验证底层实现，帮助你独立完成从"默认预览页"到"运行在status.votreentreprise.com上的正式状态页"的全部配置。

阅读完本文，你将掌握：品牌控件在七个屏幕中的准确位置与用途、自定义 HTML/CSS/JS 的生效条件、语言选择器的配置方式、自定义域名接入的两个硬性前置条件，以及理解"域名状态列"这套状态机并据此排障。

品牌控件分布总览：七个屏幕一张表

打开任一状态页后，侧边菜单中的Image de marque（品牌）分区共包含七个入口。控件分布的"直觉"往往与实际情况不符，例如：Logo 和封面图并不在"核心品牌"屏幕上，而在"页眉"屏幕上；favicon 却在"核心品牌"屏幕上；颜色配置只在"概览页"屏幕上，其余一切所谓"主题"都靠自定义 CSS 实现。先记住这张总览表，避免到处翻找：

核心品牌：标题、SEO 索引与 favicon

路径：Pages de statut → 你的状态页 → Image de marque → Image de marque essentielle（路由为{id}/branding），共三张卡片。

• Titre et description（标题与描述）：卡片明确注明这些内容同时服务于 SEO。"编辑"打开Titre de la page（占位提示Please enter page title here.）与Description de la page两个字段。它们会显示在搜索引擎结果与链接预览中，因此应按"面向客户"而非"面向团队"来撰写。
• Search Engine Indexing（搜索引擎索引）：只有一个开关Allow Search Engines to Index this Status Page，产品内描述为决定 Google 与 Bing 是否将该页收录进搜索结果。默认开启；关闭后页面将以noindex, nofollow头被提供。
• Favicon：Edit Favicon打开Favicon图片上传控件，用于设置浏览器标签页上的小图标。

适用场景：当页面仅限内部使用、或仍处于建设期时，应关闭Allow Search Engines to Index this Status Page，避免一个未完成页面以你的品牌名出现在搜索结果中。

页眉屏幕：Logo、封面图与页眉链接

路径：Pages de statut → 你的状态页 → Image de marque → En-tête（路由{id}/header-style）。尽管菜单名叫"页眉"，你的两个最大品牌资产恰恰在这里。

第一张卡片为Logo, couverture et favicon（Logo、封面与 favicon），含Edit Images按钮：

• Logo：图片上传，占位提示Upload logo。
• Logo Alt Text：占位提示Logo of My Company；留空时回退使用状态页标题。
• Couverture（封面图）：图片上传，占位提示Upload cover image，是页眉后方的宽幅横幅。
• Cover Image Alt Text：封面图的替代文本。

下方是一张Liens d'en-tête（页眉链接）表格（标题为 "Header Links for your status page"）。每个链接包含Titre（标题）与Lien（URL，占位提示https://link.com），行序支持拖拽调整；未配置任何链接时表格显示"Aucun lien d'en-tête de statut pour cette page de statut."（该状态页没有页眉链接）。

适用场景：引导访客前往你的营销官网、文档或支持门户，无需他们自行猜测 URL。

页脚屏幕：版权与页脚链接

路径：Pages de statut → 你的状态页 → Image de marque → Pied de page（路由{id}/footer-style），结构上与页眉相同：一张卡片加一张表格。

• Informations de copyright（版权信息）：Edit Copyright打开单个字段，占位提示Acme, Inc.。
• Liens du pied de page（页脚链接）：同样是Titre+Lien的组合，可拖拽排序，空态提示"Aucun lien de pied de page de statut pour cette page de statut."。

分工建议：页眉链接承担导航功能，页脚链接放置法律声明、隐私政策与服务条款。

概览页品牌：颜色规则、宕机判定与可用性精度

路径：Pages de statut → 你的状态页 → Image de marque → Page de vue d'ensemble（路由{id}/overview-page-branding）。这是唯一可以配置颜色的屏幕，同时也决定了"什么算宕机"。

• Page de vue d'ensemble（概览描述）：Edit Branding打开一个 Markdown 字段Description de la page de vue d'ensemble.，内容显示在资源列表上方。适合用一两句话说明该页覆盖范围、以及遇到问题时去哪里求助。
• Rules for Bar Colors of History Chart（历史图表柱颜色规则）：一张有序、可拖拽排序的规则表。每条规则包含When uptime % is greater than or equal to（可用性百分比阈值）与Then, use this bar color（柱颜色），表格列名分别为When Uptime Percent >=与Then, Bar Color is。顺序有意义：请按期望的求值顺序排列这些规则。
• Statuts de moniteur d'indisponibilité（宕机状态）：Edit Statuses打开多选控件，产品描述为 "These monitor statuses are considered as down"。由此决定例如"降级（degraded）"状态是否计入该页的可用性。
• Couleur de barre par défaut du graphique d'historique（历史图表默认柱颜色）：Edit Default Bar Color打开Couleur de barre par défaut颜色选择器，即无规则命中时使用的颜色。
• Pourcentage de disponibilité global（全局可用性百分比）：Edit Settings打开开关Afficher le pourcentage de disponibilité global（显示全局可用性百分比）与列表Sélectionner la précision de disponibilité（可用性精度），默认两位小数（99.99% (Two Decimal)）。

需要特别提醒：图表覆盖的天数不在此处配置，而是在Pages de statut → 你的状态页 → Avancé → Paramètres avancés（路由{id}/settings）中的Afficher l'historique de disponibilité (en jours)（显示可用性历史，天数），取值范围 1～90。

自定义 HTML、CSS 与 JavaScript

路径：Pages de statut → 你的状态页 → Image de marque → HTML, CSS et JavaScript（路由{id}/custom-code），包含四张可独立编辑的卡片。这些内容在数据模型层分别对应StatusPage模型的四个字段：headerHTML、footerHTML、customCSS与customJavaScript（见 packages/Common/Models/DatabaseModels/StatusPage.ts）。

• HTML d'en-tête（页眉 HTML）：占位提示Insert Custom HTML here.，注入页面页眉。
• HTML du pied de page（页脚 HTML）：注入页面页脚。
• CSS personnalisé：占位提示Insert Custom CSS here.。
• JavaScript personnalisé：占位提示Insert Custom JavaScript here.。

重要限制：有效的自定义 HTML/CSS/JS 仅在已验证的自定义域名上被提供；在默认的/status-page/:idURL 上它们处于禁用状态，因为该 URL 与 OneUptime 已认证空间共享同一来源（同源安全策略），随意注入代码存在安全风险。

没有"主题选择器"。OneUptime 状态页不存在任何主题或品牌色设置：全站唯一的内置颜色控件只有概览页屏幕上的Couleur de barre par défaut（默认柱颜色）与柱颜色规则。字体、背景色、强调色与版式微调，全部通过这里的CSS personnalisé实现——如果你在找"品牌色"字段，答案是：没有，这里就是出口。

另外一条使用建议值得记住：自定义 JavaScript 运行在访问者的浏览器中，而访客恰恰是在担心故障的时刻加载该页。请保持脚本轻量、尽可能自托管资源，并在真正依赖它之前充分测试。

语言设置：默认语言与可选语言

路径：Pages de statut → 你的状态页 → Image de marque → Langues（路由{id}/languages），两张卡片都服务于页脚提供给访客的语言选择器。

• Langue par défaut（默认语言）：Edit Default Language打开下拉列表，每种受支持语言以其母语名称和英文名称并列展示（如Deutsch (German)）。卡片描述其为临时访客首先看到的语言；访客仍可在页脚自行切换。默认值为英文。
• Langues activées（启用语言）：Edit Enabled Languages打开多选控件，占位提示All languages。留空表示提供所有受支持语言；若选择了部分语言，页脚选择器将只列出这些语言。

关于受支持语言的数量，需要说明一点：文档正文列举了 16 种语言（英语、德语、法语、西班牙语、意大利语、葡萄牙语、荷兰语、丹麦语、挪威语、瑞典语、俄语、日语、韩语、简体中文、繁体中文、印地语），而当前仓库中的语言常量表 packages/Common/Types/Docs/DocsLanguage.ts 实际列出了 17 个语言代码——在文档列举的 16 种之外还包含波斯语（fa, "Persian"）。若你的部署版本较新，语言选择器应能展示全部 17 种语言。

自定义域名：把状态页放到你的域名上

默认情况下，状态页通过其Vue d'ensemble（概览）屏幕显示的预览 URL 访问。要把它挂到自有主机名下，进入Pages de statut → 你的状态页 → Image de marque → Domaines personnalisés（路由{id}/domains）。

卡片Domaines personnalisés的描述直截了当地说明了要求：将你安装实例的状态页 CNAME 记录（status page CNAME record）作为这些域名的 CNAME 指向。未配置任何域名时，表格显示"Aucun domaine personnalisé trouvé."（未找到自定义域名）。表格共两列Domaine（域名）与Statut（状态），并提供Domaine、CNAME valide（CNAME 有效）与SSL provisionné（SSL 已签发）三个筛选条件。

前置条件（漏掉一个就"一切正常但不生效"）

1. 父域名必须已在项目中验证。Domaine下拉列表只展示已在项目设置中验证过的域名——字段的帮助文本会引导你先去Plus → Paramètres du projet → Domaines personnalisés添加。
2. 安装实例必须配置了状态页 CNAME 记录。对于自托管部署，这是 Docker Compose 中的环境变量STATUS_PAGE_CNAME_RECORD，或 Helm 的values.yaml中的statusPage.cnameRecord。未配置时，"Add CNAME"与"Order Free SSL"弹窗会显示 "Custom Domains not enabled for this OneUptime installation" 而不是具体操作指引。

仓库中的实现证据如下：

• 环境变量在 packages/Common/Server/EnvironmentConfig.ts 中读取为StatusPageCNameRecord（process.env["STATUS_PAGE_CNAME_RECORD"] || ""），同时该变量也出现在前端允许白名单中（同一文件 L39），并传入docker-compose.base.yml（STATUS_PAGE_CNAME_RECORD: ${STATUS_PAGE_CNAME_RECORD}）。
• config.example.env 给出了完整的 DNS 配置三步示例：
  1. 在你的 DNS 服务商处创建一条 A 记录，名称为oneuptime.yourcompany.com，值指向 OneUptime 部署服务器的公网 IP；
  2. 将STATUS_PAGE_CNAME_RECORD设为oneuptime.yourcompany.com；
  3. 再创建一条 CNAME 记录，名称为status.yourcompany.com，值指向oneuptime.yourcompany.com。
• Helm 部署则在 HelmChart/Public/oneuptime/values.yaml 中以statusPage.cnameRecord呈现同一概念（dashboard.cnameRecord对公共仪表盘同理）。

添加域名

点击Create Status Page Domain，弹窗（Create New Status Page Domain）分两步：

Basique（基础）

• Sous-domaine（子域）：仅填写子域标签，占位提示status (leave blank for root)——只填status，不要填完整主机名；留空或填@表示使用根域名。
• Domaine（域名）：已验证域名的下拉列表，占位提示Select domain。

Plus（更多）

• Téléverser un certificat personnalisé（上传自定义证书）：开关，默认关闭。保持关闭时，OneUptime 会为你自动签发免费证书；打开后出现Certificat（证书）与Clé privée du certificat（证书私钥）两个字段，用于上传自己的 PEM 材料。

验证 CNAME

在域名验证通过之前，行上会提供Ajouter un CNAME动作，弹窗（Ajouter un CNAME）给出需要粘贴到 DNS 服务商的完整信息：

• Type d'enregistrement（记录类型）：CNAME
• Nom（名称）：刚创建的完整域名，例如status.votreentreprise.com
• Contenu（内容）：你的安装实例的状态页 CNAME 记录

弹窗会说明：记录生效后，自动验证最长可能需要 24 小时。但你无需干等：弹窗的确认按钮就是Vérifier le CNAME（验证 CNAME），可随时手动触发检查。

操作顺序很关键：先在 DNS 服务商处创建记录，再点击Vérifier le CNAME。在记录尚未存在时点击验证只会失败。

从源码看，验证逻辑位于 packages/Common/Server/Services/StatusPageDomainService.ts：当配置了StatusPageCNameRecord时，服务会对目标完整域名发起 CNAME 查询，并校验返回记录与StatusPageCNameRecord是否匹配（不匹配时会记录No CNAME record found for ${fullDomain}. Expected record: ${StatusPageCNameRecord}之类的日志）。因此"内容"一栏必须与安装实例的 CNAME 记录完全一致。验证通过后，StatusPageDomain模型上的isCnameVerified字段被置为true（见 packages/Common/Models/DatabaseModels/StatusPageDomain.ts），随后证书会加入 Greenlock 管理。

订购 SSL 证书

CNAME 验证通过后——且仅当没有上传自定义证书时——行上会出现Commander un SSL gratuit（订购免费 SSL）动作。其弹窗（Order Free SSL Certificate for this Status Page）说明：OneUptime 使用 LetsEncrypt，过程安全且免费，下单后签发需要数小时。确认按钮为Commander un SSL gratuit。

时间口径各处不一致，请勿较真：订购弹窗说三小时，Statut列说一小时，自定义证书则说三十分钟。请统一当作"晚些时候再回来看"，若长时间无进展再联系支持。

证书签发后续期完全自动，你无需再做任何周期性操作。这对应源码中 StatusPageDomainService.ts 的证书续签逻辑：服务会检查 CNAME 是否已验证、证书是否已订购，并通过certificateReissueRequestedAt字段限流（每个域名每次只允许一个续签请求），随后触发 Let's Encrypt 证书重签。

读懂"域名状态"列：整套状态机

Statut列本身就包含了整个配置流程的状态机。每条消息要么告诉你下一步该做什么，要么告诉你已经完成：

排障提示：如果某一行在 DNS 记录创建很久后仍停留在 "Action Required: Please add your CNAME record."，请检查：记录名称是否为完整域名，以及记录内容是否与安装实例的 CNAME 记录完全一致（结合上文源码中的校验逻辑，这两点是失败的最常见原因）。

"Powered by OneUptime" 设置

"Propulsé par OneUptime"（Powered by OneUptime）并不属于品牌分区。它位于Pages de statut → 你的状态页 → Avancé → Paramètres avancés（路由{id}/settings）中的卡片Image de marque « Propulsé par OneUptime »，形式为单个开关：Masquer la mention « Propulsé par OneUptime »（隐藏"Powered by OneUptime"字样）。Edit Settings会像该屏幕上的其他卡片一样打开它。

深入阅读

• 状态页概览 — 状态页是什么、各部分如何组装。
• 状态页资源与分组 — 决定访客在页面上真正看到哪些资源。
• 订阅者与公告 — 邮件、短信、Slack 与 Webhook 订阅者，以及公告。
• 公共 API — 以编程方式读取状态页数据。
• 事件状态与严重级别 — 什么因素让事件出现在页面上、又让其消失。

【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime