# 管理面板定制

> Source: https://strapi.nodejs.cn/cms/admin-panel-customization

🌐 Admin panel customization

管理员面板可以通过编辑 `src/admin/app` 并使用 `extensions` 文件夹来替换徽标、网站图标、本地语言、翻译、主题、打包器或编辑器，从而定制以匹配你的品牌。

Strapi 的 **前端部分** <Annotation>有关以下区分的说明：<ul><li>Strapi 管理面板（Strapi 的前端），</li><li>Strapi 服务器（Strapi 的后端），</li><li>以及面向终端用户的 Strapi 驱动应用的前端，</li></ul> 请参考 [开发入门](/cms/customization)。 称为管理面板。管理面板提供图形用户界面，帮助你构建和管理通过内容 API 可访问的内容。要了解管理面板的概览，请参考 [入门 > 管理面板](/cms/features/admin-panel) 页面。

从开发者的角度来看，Strapi 的管理面板是一个基于 React 的单页应用，它封装了 Strapi 应用的所有功能和已安装的插件。

🌐 From a developer point of view, Strapi's admin panel is a React-based single-page application that encapsulates all the features and installed plugins of a Strapi application.

管理员面板的自定义通过调整 `src/admin/app` 文件或 `src/admin` 文件夹中包含的其他文件的代码来完成（参见 [项目结构](/cms/project-structure)）。通过这样做，你可以：

🌐 Admin panel customization is done by tweaking the code of the `src/admin/app` file or other files included in the `src/admin` folder (see [project structure](/cms/project-structure)). By doing so, you can:

- 自定义管理面板的某些部分，以更好地体现你的品牌标识（徽标、网站图标）或语言。
- 替换管理面板的其他部分，例如富文本编辑器和打包器。
- 扩展主题或管理​​面板以添加新功能或自定义现有用户界面。

:::strapi Plugins and Admin Panel API

除了本节中详细说明的支持自定义功能外，你还可以更进一步，创建可以使用 [管理员面板 API](/cms/plugins-development/admin-panel-api) 的插件。

🌐 In addition to supported customizations detailed in this section, you can go further and create plugins that tap into the [Admin Panel API](/cms/plugins-development/admin-panel-api).

:::

## 一般考虑 {#general-considerations}

🌐 General considerations

:::prerequisites

在更新代码以自定义管理面板之前：

🌐 Before updating code to customize the admin panel:

- 将默认的 `app.example.tsx|js` 文件重命名为 `app.ts|js`。
- 在 `/src/admin/` 中创建一个新的 `extensions` 文件夹。
- 如果你想在开发时实时看到你的更改生效，请确保管理员面板服务器正在运行（通常如果你没有更改管理员面板的默认[主机、端口和路径](/cms/configurations/admin-panel#admin-panel-server)，可以使用 `yarn develop` 或 `npm run develop` 命令来启动）。

:::

大多数基本的管理面板自定义将在 `/src/admin/app` 文件中完成，该文件包含一个 `config` 对象。

🌐 Most basic admin panel customizations will be done in the `/src/admin/app` file, which includes a `config` object.

任何 `config` 对象使用的文件（例如，自定义徽标）都应放置在 `/src/admin/extensions/` 文件夹中，并在 `/src/admin/app.js` 中导入。

🌐 Any file used by the `config` object (e.g., a custom logo) should be placed in a `/src/admin/extensions/` folder and imported inside `/src/admin/app.js`.

:::tip Tip: Hot reloading while developing

在 Strapi 5 中，服务器默认以 `watch-admin` 模式运行，因此每当你更改其代码时，管理员面板会自动重新加载。这简化了管理员面板和前端插件的开发。要禁用此功能，请运行 `yarn develop --no-watch-admin`（参见 [CLI 参考](/cms/cli#strapi-develop)）。

🌐 In Strapi 5, the server runs in `watch-admin` mode by default, so the admin panel auto-reloads whenever you change its code. This simplifies admin panel and front-end plugins development. To disable this, run `yarn develop --no-watch-admin` (see [CLI reference](/cms/cli#strapi-develop)).

:::

在部署之前，需要通过从项目的根目录运行以下命令来构建管理面板：

🌐 Before deployment, the admin panel needs to be built, by running the following command from the project's root directory:

```sh
yarn build
```

```sh
npm run build
```

这将替换位于 `./build` 的文件夹内容。访问  [http://localhost:1337/admin](http://localhost:1337/admin)  以确保自定义设置已被考虑。

:::note Note: Admin panel extensions vs. plugins extensions

默认情况下，Strapi 项目在 `/src` 中已经包含另一个 `extensions` 文件夹，但它仅用于插件扩展（参见 [插件扩展](/cms/plugins-development/plugins-extension)）。

🌐 By default, Strapi projects already contain another `extensions` folder in `/src` but it is for plugins extensions only (see [Plugins extension](/cms/plugins-development/plugins-extension)).

:::

## 可用的自定义选项 {#available-customizations}

🌐 Available customizations

`/src/admin/app` 的 `config` 对象接受以下参数：

🌐 The `config` object of `/src/admin/app` accepts the following parameters:

| 参数 | 类型 | 描述 |
| --- | --- | --- |
| `auth` | 对象 | 接受一个 `logo` 键来替换登录屏幕上的默认 Strapi 徽标 |
| `head` | 对象 | 接受一个 `favicon` 键来替换默认的 Strapi 网站图标 |
| `locales` | 字符串数组 | 定义可用的语言环境 |
| `translations` | 对象 | 扩展翻译 |
| `menu` | 对象 | 接受一个 `logo` 键以更改主导航中的徽标 |
| `theme.light` 和 `theme.dark` | 对象 | 覆盖明亮和黑夜间模式的主题属性 |
| `tutorials` | 布尔值 | 切换视频教程的显示 |
| `notifications` | 对象 | 接受 `releases` 键（布尔值）以切换关于新版本通知的显示 |

<br/>
点击以下任意卡片以获取有关特定主题的更多详细信息：

- [标志](/cms/admin-panel-customization/logos): 更新管理员面板中显示的徽标，以匹配你自己的品牌。
- [网站图标](/cms/admin-panel-customization/favicon): 更新网站图标以匹配你自己的品牌。
- [本地化与翻译](/cms/admin-panel-customization/locales-translations): 定义区域设置并扩展管理员面板中可用的翻译。
- [富文本编辑器](/cms/admin-panel-customization/wysiwyg-editor): 了解更多关于替换内置富文本编辑器的可能策略。
- [打包器](/cms/admin-panel-customization/bundlers): 在 Vite 和 webpack 打包工具之间进行选择并进行配置。
- [主题扩展](/cms/admin-panel-customization/theme-extension): 学习扩展管理面板内置主题的基础知识。
- [管理面板扩展](/cms/admin-panel-customization/extension): 学习扩展管理面板的基础知识。

## 基本示例 {#basic-example}

🌐 Basic example

以下是管理面板基本自定义的示例：

🌐 The following is an example of a basic customization of the admin panel:

```jsx title="/src/admin/app.js"

  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      // overwrite light theme properties
      light: {
        colors: {
          primary100: "#f6ecfc",
          primary200: "#e0c1f4",
          primary500: "#ac73e6",
          primary600: "#9736e8",
          primary700: "#8312d1",
          danger700: "#b72b1a",
        },
      },

      // overwrite dark theme properties
      dark: {
        // ...
      },
    },
    // Extend the translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};
```

如果 TypeScript 报告导入的图片文件缺少模块声明，请在 `/src/admin/tsconfig.json` 中包含 Vite 的客户端类型：

🌐 If TypeScript reports missing module declarations for imported image files, include Vite's client types in `/src/admin/tsconfig.json`:

```json title="/src/admin/tsconfig.json"
{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}
```

```ts title="/src/admin/app.ts"

  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
	    dark:{
	      colors: {
			  alternative100: '#f6ecfc',
			  alternative200: '#e0c1f4',
			  alternative500: '#ac73e6',
			  alternative600: '#9736e8',
			  alternative700: '#8312d1',
			  buttonNeutral0: '#ffffff',
			  buttonPrimary500: '#7b79ff',
			  // you can see other colors in the link below
			  },
		},
		light:{
			// you can see the light color here just like dark colors https://github.com/strapi/design-system/blob/main/packages/design-system/src/themes/lightTheme/light-colors.ts
		},
  },
    },
    // Extend the translations
    // you can see the traslations keys here https://github.com/strapi/strapi/blob/develop/packages/core/admin/admin/src/translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};
```

:::strapi Detailed examples in the codebase

* 你可以查看完整的翻译键，例如要更改欢迎消息，请访问 [GitHub](https://github.com/strapi/strapi/blob/develop/packages/core/admin/admin/src/translations)。
* 明暗颜色也可以在 [GitHub](https://github.com/strapi/design-system/tree/main/packages/design-system/src/themes) 上找到。

:::