# 自定义你的状态页

Source: https://instatus.com/help/zh/status-page/customize

你可以在**状态页**设置中修改状态页的 Logo、颜色、页头设计、深色模式、语言、日期格式和社交预览，还可以添加自定义 HTML、CSS 和 JavaScript。

| At a glance | Details |
| :-- | :-- |
| [品牌](https://instatus.com/help/zh/status-page/customize#如何添加我的-logo-和颜色) | Logo、深色模式 Logo、网站图标、品牌色和状态色 |
| [设计](https://instatus.com/help/zh/status-page/customize#如何修改设计或深色模式) | 3 种页头设计、深色或浅色模式、组件布局 |
| [自定义代码](https://instatus.com/help/zh/status-page/customize#可以添加自定义-htmlcss-或-javascript-吗) | 5 个位置的 HTML、CSS 和 JavaScript |
| [语言](https://instatus.com/help/zh/status-page/customize#如何修改状态页的语言) | 默认语言，Pro 套餐支持多语言 |
| [时间线](https://instatus.com/help/zh/status-page/customize#如何修改日期时间和时区格式) | 日期和时间格式、时区、上线日期 |
| [搜索与社交](https://instatus.com/help/zh/status-page/customize#如何控制-google-和社交媒体上的预览) | 预览的标题、描述和图片 |

## 如何添加我的 Logo 和颜色？

在 [instatus.com/login](https://dashboard.instatus.com/login) 登录，选择你的状态页，然后进入**状态页 → 外观**。

在品牌区域你可以修改：

- 品牌 Logo，包括深色模式下单独使用的 Logo。
- 网站图标。
- 与 Logo 相配的品牌色。
- 状态颜色。

自定义完成后点击 **SAVE**，页面就会更新。

![品牌设置](https://instatus.com/help/customize/1.png)

## 如何修改设计或深色模式？

在**外观**的设计区域，你可以修改：

- 页头设计，可从我们的 3 种设计中选择。
- 状态页以深色模式、浅色模式显示，还是通过按钮切换。
- 组件的展示方式。

修改设计后点击 **SAVE**，页面就会更新。

![外观设置](https://instatus.com/help/customize/2.png)

## 可以添加自定义 HTML、CSS 或 JavaScript 吗？

可以。在**状态页 → HTML** 中，你可以在五个位置插入自己的 HTML、CSS 和 JavaScript：

- 状态页页头上方。
- 页头下方。
- 状态页组件下方。
- 状态页页脚上方。
- 页脚下方。

添加自定义 HTML 后点击 **SAVE**，页面就会更新。

![自定义 HTML 设置](https://instatus.com/help/customize/3.png)

## 如何修改状态页的语言？

在**状态页 → 语言**中你可以修改：

- 状态页的默认语言。

**Pro 套餐功能：**

- 多语言状态页。
- 使用你自定义的措辞。

你可以在[多语言支持](https://instatus.com/help/zh/status-page/multi-language)一文中查看配置多语言的分步指南。

![语言设置](https://instatus.com/help/customize/4.png)

修改状态页语言后点击 **SAVE**，页面就会更新。

## 如何修改日期、时间和时区格式？

在**状态页 → 时间线**中你可以修改：

- 日期和时间格式，你可以[在这里了解更多关于日期和时间格式的信息](https://date-fns.org/v2.16.1/docs/format)。
- 时区。
- 服务上线日期。

修改状态页的日期和时间后点击 **SAVE**，页面就会更新。

![日期与时间格式设置](https://instatus.com/help/customize/5.png)

## 如何控制 Google 和社交媒体上的预览？

在**状态页 → 搜索与社交**中，你可以设置：

- 修改标题。
- 为 Google 和社交媒体添加自定义描述。
- 上传一张图片。

自定义搜索与社交设置后，点击 **SAVE** 让改动生效。

![搜索与社交设置](https://instatus.com/help/customize/6.png)

- [多语言支持](https://instatus.com/help/zh/status-page/multi-language): 了解如何以多种语言提供你的状态页。