Skip to main content

管理面板定制

¥Admin panel customization

Strapi 的前端部分

¥The front-end part of Strapi

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

¥is called the admin panel. The admin panel presents a graphical user interface to help you structure and manage the content that will be accessible through the Content API. To get an overview of the admin panel, please refer to the Getting Started > Admin panel page.

从开发者的角度来看，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:

  • 自定义管理面板的某些部分，以更好地体现你的品牌标识（徽标、网站图标）或语言。

    ¥Customize some parts of the admin panel to better reflect your brand identity (logos, favicon) or your language,

  • 替换管理面板的其他部分，例如富文本编辑器和打包器。

    ¥Replace some other parts of the admin panel, such as the Rich text editor and the bundler,

  • 扩展主题或管理​​面板以添加新功能或自定义现有用户界面。

    ¥Extend the theme or the admin panel to add new features or customize the existing user interface.

一般注意事项​

¥General considerations

Prerequisites

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

¥Before updating code to customize the admin panel:

  • 将现在无效的任何配置文件重命名为新名称，并更新代码以查找该路径。

    ¥Rename the default app.example.tsx|js file into app.ts|js.

  • 在 /src/admin/ 中创建一个新的 extensions 文件夹。

    ¥Create a new extensions folder in /src/admin/.

  • 如果你想在开发过程中实时看到你的更改，请确保管理面板服务器正在运行（如果你没有更改管理面板的默认 主机、端口和路径，通常使用 yarn develop 或 npm run develop 命令完成）。

    ¥If you want to see your changes applied live while developing, ensure the admin panel server is running (it's usually done with the yarn develop or npm run develop command if you have not changed the default host, port, and path of the admin panel).

大多数基本的管理面板自定义将在 /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.

提示：开发时的热重载

在 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 build

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

¥This will replace the folder's content located at ./build. Visit http://localhost:1337/admin to make sure customizations have been taken into account.

注意：管理面板扩展与插件扩展

默认情况下，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 键（布尔值）以切换显示新版本通知

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

¥Click on any of the following cards to get more details about a specific topic:

基本示例​

¥Basic example

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

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

/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() {},
};
代码库中的详细示例

  • 你可以查看完整的翻译键，例如更改欢迎消息，在 GitHub 上。

    ¥You can see the full translation keys, for instance to change the welcome message, on GitHub.

  • 在 GitHub 上 中也包含浅色和深色。

    ¥Light and dark colors are also found on GitHub.

Contribute to this page