插件的管理面板 API 概述

🌐 Admin Panel API for plugins: An overview

Page summary:

管理面板 API 提供 register、bootstrap 和 registerTrads 钩子，用于向 Strapi 的 UI 注入 React 组件和翻译。菜单、设置、注入区、reducer 和钩子 API 允许插件添加导航、配置面板或自定义操作。

Strapi 插件可以与 Strapi 应用的后端和前端进行交互。管理面板 API 涵盖了前端部分：它允许插件自定义 Strapi 的管理面板。管理面板是一个 React 应用，每个插件都会为其贡献自己的 React 应用。自定义包括编辑入口文件以导出所需的界面，并选择要执行的操作。

有关插件如何与 Strapi 的后端部分交互的更多信息，请参见 服务器 API。

🌐 For more information on how plugins can interact with the back end part of Strapi, see Server API.

Prerequisites

在深入了解本页的概念之前，请确保你已经创建了一个 Strapi 插件。

🌐 Before diving deeper into the concepts on this page, please ensure you created a Strapi plugin.

入口文件

🌐 Entry file

管理面板 API 的入口文件是 [plugin-name]/admin/src/index.js。该文件导出所需的接口，并提供以下功能：

🌐 The entry file for the Admin Panel API is [plugin-name]/admin/src/index.js. This file exports the required interface, with the following functions available:

功能类型	可用功能
生命周期函数	register(), bootstrap()
异步函数	registerTrads()（详情见 管理员本地化）

所有管理面板代码技术上可以全部放在单个入口文件中，但强烈建议将每个关注点拆分到各自的文件夹中，就像 strapi generate plugin CLI 命令生成的那样。本文件中的示例遵循这种结构。

🌐 All admin panel code can technically live in the single entry file, but splitting each concern into its own folder, as generated by the strapi generate plugin CLI command, is strongly recommended. The examples in this documentation follow that structure.

register()

类型: Function

此函数在加载插件时被调用，甚至在应用实际上被 引导 之前。它将正在运行的 Strapi 应用作为参数 (app)。

🌐 This function is called to load the plugin, even before the app is actually bootstrapped. It takes the running Strapi application as an argument (app).

在 register() 函数中，插件可以：

🌐 Within the register() function, a plugin can:

• 使用 registerPlugin() 注册自身，使其可以在管理面板中使用
• 在主导航中添加一个新链接（见 管理员导航与设置）
• 创建一个新的设置部分
• 定义injection zones
• 添加 reducers

示例：

JavaScript

my-plugin/admin/src/index.js

import pluginId from './pluginId';

export default {
  register(app) {
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';
import pluginId from './pluginId';

export default {
  register(app: StrapiApp) {
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};

registerPlugin()

类型: Function

注册插件以使其在管理面板中可用。此函数在register()生命周期函数中被调用，并返回一个包含以下参数的对象：

🌐 Registers the plugin to make it available in the admin panel. This function is called within the register() lifecycle function and returns an object with the following parameters:

参数	类型	描述
id	字符串	插件 ID
name	字符串	插件名称
apis	Record<string, unknown>	向其他插件开放的 API
initializer	React.ComponentType	插件初始化的组件
injectionZones	对象	可用 注入区域 的声明
isReady	布尔值	插件就绪状态（默认值：true）

Note

一些参数可以从 package.json 文件中导入。

🌐 Some parameters can be imported from the package.json file.

示例：

JavaScript

my-plugin/admin/src/index.js

export default {
  register(app) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';

export default {
  register(app: StrapiApp) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};

bootstrap()

类型: Function

暴露 bootstrap 函数，在所有插件注册之后执行。

🌐 Exposes the bootstrap function, executed after all the plugins are registered.

在 bootstrap() 函数中，插件可以：

🌐 Within the bootstrap() function, a plugin can:

• 使用 getPlugin('plugin-name') 扩展另一个插件,
• 注册钩子（参见 Hooks），
• 添加到设置部分的链接,
• 在内容管理器的列表视图和编辑视图中添加操作和选项（参见 内容管理器 API）。

示例：

JavaScript

my-plugin/admin/src/index.js

export default {
  // ...
  bootstrap(app) {
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';

export default {
  // ...
  bootstrap(app: StrapiApp) {
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};

可用操作

🌐 Available actions

管理面板 API 提供了多个构建模块，用于自定义管理面板的用户界面、用户体验和行为。

🌐 The Admin Panel API provides several building blocks to customize the user interface, user experience, and behavior of the admin panel.

使用下表查找要使用的函数以及在哪里声明它。点击任意函数名称以获取详细信息：

🌐 Use the following table to find which function to use and where to declare it. Click any function name for details:

操作	使用的函数	相关的生命周期函数
在主导航中添加新链接	addMenuLink()	register()
创建一个新的设置部分	addSettingsLink()（带有一个部分对象）	register()
添加一个或多个指向设置部分的链接	addSettingsLink()（带有部分ID）	bootstrap()
在内容管理器的编辑视图和列表视图中添加面板、选项和操作	addEditViewSidePanel() addDocumentAction() addDocumentHeaderAction() addBulkAction()	bootstrap()
声明注入区	registerPlugin()	register()
在注入区域注入组件	injectComponent()	bootstrap()
添加一个 reducer	addReducers()	register()
创建一个钩子	createHook()	register()
注册一个钩子	registerHook()	bootstrap()
为插件管理界面提供翻译	registerTrads()	registerTrads()
发起经过身份验证的 HTTP 请求	useFetchClient() / getFetchClient()	任意
从 React 访问内容管理器编辑视图上下文	unstable_useContentManagerContext	任意

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

导航与设置

为你的插件添加菜单链接并配置设置部分。

内容管理器 API

向内容管理器列表和编辑视图添加面板、操作和选项。

注入区

将 React 组件注入到管理员面板的预定义或自定义区域。

Redux 存储和 reducers

添加自定义 reducers，读取状态，分发动作，并订阅 Redux 仓库中的更改。

钩子

创建并注册钩子，以允许其他插件添加个性化行为。

本地化

使用 registerTrads 和 react-intl 为你的插件管理界面提供翻译。

获取客户端

使用 useFetchClient 和 getFetchClient 从管理面板发起经过身份验证的 HTTP 请求。

Replacing the WYSIWYG

可以通过利用自定义字段来替换所见即所得编辑器，例如使用 CKEditor custom field plugin。

🌐 The WYSIWYG editor can be replaced by taking advantage of custom fields, for instance using the CKEditor custom field plugin.

Info

管理面板支持自托管项目中的 dotenv 变量。

🌐 The admin panel supports dotenv variables in self-hosted projects.

所有在 .env 文件中定义并以 STRAPI_ADMIN_ 为前缀的变量，在通过 process.env 自定义管理面板时都是可用的。

🌐 All variables defined in a .env file and prefixed by STRAPI_ADMIN_ are available while customizing the admin panel through process.env.

此 dotenv 暴露不适用于 Strapi Cloud 项目。

🌐 This dotenv exposure does not apply to Strapi Cloud projects.