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 实现。先记住这张总览表避免到处翻找屏幕可配置内容Image de marque essentielle核心品牌页面标题、页面描述、搜索引擎索引开关、faviconEn-tête页眉Logo、封面图、二者的替代文本Alt Text、页眉链接栏Pied de page页脚版权行、页脚链接栏Page de vue densemble概览页概览描述、历史图表柱颜色规则、宕机判定状态、全局可用性HTML, CSS et JavaScript页眉 HTML、页脚 HTML、自定义 CSS、自定义 JavaScriptDomaines personnalisés自定义域名自有域名、CNAME 验证、SSLLangues语言默认语言、页脚语言选择器中提供的语言核心品牌标题、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头被提供。FaviconEdit 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 faviconLogo、封面与 favicon含Edit Images按钮Logo图片上传占位提示Upload logo。Logo Alt Text占位提示Logo of My Company留空时回退使用状态页标题。Couverture封面图图片上传占位提示Upload cover image是页眉后方的宽幅横幅。Cover Image Alt Text封面图的替代文本。下方是一张Liens den-tête页眉链接表格标题为 Header Links for your status page。每个链接包含Titre标题与LienURL占位提示https://link.com行序支持拖拽调整未配置任何链接时表格显示Aucun lien den-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页脚链接同样是TitreLien的组合可拖拽排序空态提示Aucun lien de pied de page de statut pour cette page de statut.。分工建议页眉链接承担导航功能页脚链接放置法律声明、隐私政策与服务条款。概览页品牌颜色规则、宕机判定与可用性精度路径Pages de statut → 你的状态页 → Image de marque → Page de vue densemble路由{id}/overview-page-branding。这是唯一可以配置颜色的屏幕同时也决定了什么算宕机。Page de vue densemble概览描述Edit Branding打开一个 Markdown 字段Description de la page de vue densemble.内容显示在资源列表上方。适合用一两句话说明该页覆盖范围、以及遇到问题时去哪里求助。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 dindisponibilité宕机状态Edit Statuses打开多选控件产品描述为 These monitor statuses are considered as down。由此决定例如降级degraded状态是否计入该页的可用性。Couleur de barre par défaut du graphique dhistorique历史图表默认柱颜色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 lhistorique de disponibilité (en jours)显示可用性历史天数取值范围 190。自定义 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 den-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 densemble概览屏幕显示的预览 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 valideCNAME 有效与SSL provisionnéSSL 已签发三个筛选条件。前置条件漏掉一个就一切正常但不生效父域名必须已在项目中验证。Domaine下拉列表只展示已在项目设置中验证过的域名——字段的帮助文本会引导你先去Plus → Paramètres du projet → Domaines personnalisés添加。安装实例必须配置了状态页 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 中读取为StatusPageCNameRecordprocess.env[STATUS_PAGE_CNAME_RECORD] || 同时该变量也出现在前端允许白名单中同一文件 L39并传入docker-compose.base.ymlSTATUS_PAGE_CNAME_RECORD: ${STATUS_PAGE_CNAME_RECORD}。config.example.env 给出了完整的 DNS 配置三步示例在你的 DNS 服务商处创建一条 A 记录名称为oneuptime.yourcompany.com值指向 OneUptime 部署服务器的公网 IP将STATUS_PAGE_CNAME_RECORD设为oneuptime.yourcompany.com再创建一条 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 denregistrement记录类型CNAMENom名称刚创建的完整域名例如status.votreentreprise.comContenu内容你的安装实例的状态页 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字段限流每个域名每次只允许一个续签请求随后触发 Lets Encrypt 证书重签。读懂域名状态列整套状态机Statut列本身就包含了整个配置流程的状态机。每条消息要么告诉你下一步该做什么要么告诉你已经完成状态列显示含义Action Required: Please add your CNAME record.CNAME 尚未验证。添加记录后点击Vérifier le CNAME。Action Required: Please order SSL certificate.CNAME 已验证但尚未订购证书。点击Commander un SSL gratuit。No action is required, allow 30 minutes to provision.已上传自定义证书正在安装部署。No action is required, this will be provisioned soon.免费证书已订购、正在签发中。若迟迟未到请联系支持。Certificate Provisioned. No action required.完成。OneUptime 会自动续期证书。排障提示如果某一行在 DNS 记录创建很久后仍停留在 Action Required: Please add your CNAME record.请检查记录名称是否为完整域名以及记录内容是否与安装实例的 CNAME 记录完全一致结合上文源码中的校验逻辑这两点是失败的最常见原因。Powered by OneUptime 设置Propulsé par OneUptimePowered 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考