管理面板定制

🌐 Admin panel customization

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

Strapi 的 前端部分 称为管理面板。管理面板提供图形用户界面，帮助你构建和管理通过内容 API 可访问的内容。要了解管理面板的概览，请参考入门 > 管理面板页面。

从开发者的角度来看，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 文件夹中包含的其他文件的代码来完成（参见项目结构）。通过这样做，你可以：

🌐 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). By doing so, you can:

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

Plugins and Admin Panel API

除了本节中详细说明的支持自定义功能外，你还可以更进一步，创建可以使用管理员面板 API 的插件。

🌐 In addition to supported customizations detailed in this section, you can go further and create plugins that tap into the Admin Panel API.

一般考虑

🌐 General considerations

Prerequisites

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

🌐 Before updating code to customize the admin panel:

将默认的 app.example.tsx|js 文件重命名为 app.ts|js。
在 /src/admin/ 中创建一个新的 extensions 文件夹。
如果你想在开发时实时看到你的更改生效，请确保管理员面板服务器正在运行（通常如果你没有更改管理员面板的默认主机、端口和路径，可以使用 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: Hot reloading while developing

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

🌐 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).

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

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

yarn
npm

yarn build

npm run build

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

Note: Admin panel extensions vs. plugins extensions

默认情况下，Strapi 项目在 /src 中已经包含另一个 extensions 文件夹，但它仅用于插件扩展（参见插件扩展）。

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

可用的自定义选项

🌐 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 键（布尔值）以切换关于新版本通知的显示 |

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

基本示例

🌐 Basic example

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

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

JavaScript
TypeScript

/src/admin/app.js
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  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() {},
};

/src/admin/app.ts
// Note: you may see some ts errors, don't worry about them
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      // Try to change the origin favicon.png file in the
      // root of strapi project if this config don't work.
      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() {},
};

Detailed examples in the codebase

你可以查看完整的翻译键，例如要更改欢迎消息，请访问 GitHub。
明暗颜色也可以在 GitHub 上找到。

管理面板定制

一般考虑

可用的自定义选项

标志

网站图标

本地化与翻译

富文本编辑器

打包器

主题扩展

管理面板扩展

基本示例

一般考虑​

可用的自定义选项​

标志

网站图标

本地化与翻译

富文本编辑器

打包器

主题扩展

管理面板扩展

基本示例​

一般考虑

可用的自定义选项

基本示例