插件的管理面板 API：概览

页面摘要： 管理面板 API 暴露 register、bootstrap 和 registerTrads 等 hook，用于将 React 组件和翻译注入到 Strapi 的 UI 中。菜单、设置、注入区、reducer 和 hook API 让插件能够添加导航、配置面板或自定义操作。

一个 Strapi 插件可以同时与 Strapi 应用的前端和后端交互。管理面板 API 涵盖前端部分：它允许插件自定义 Strapi 的 管理面板。管理面板是一个 React 应用，每个插件都向其中贡献自己的 React 应用。自定义的方式是编辑一个 入口文件 以导出所需的接口，并选择要执行哪些 操作。

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

入口文件

管理面板 API 的入口文件是 [plugin-name]/admin/src/index.js。该文件导出所需的接口，其中包含以下可用函数：

从技术上讲，所有管理面板代码都可以放在单个入口文件中，但强烈建议按照 strapi generate plugin CLI 命令生成的结构，将每个关注点拆分到各自的文件夹中。本文档中的示例遵循该结构。

register() {#register}

类型： Function

该函数在插件加载时调用，甚至在应用实际 引导 之前。它以正在运行的 Strapi 应用作为参数（app）。

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

• 使用 registerPlugin() 注册自身，使其可在管理面板中可用
• 向主导航添加新链接（见 管理面板导航与设置）
• 创建新的设置板块
• 定义 注入区
• 添加 reducer

示例：

JavaScript

import pluginId from './pluginId';

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

TypeScript

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

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

registerPlugin() {#registerplugin}

类型： Function

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

示例：

JavaScript

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

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() {#bootstrap}

类型：Function

暴露引导（bootstrap）函数，在所有插件都 注册 之后执行。

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

• 使用 getPlugin('plugin-name') 扩展另一个插件，
• 注册 hooks（见 Hooks），
• 向设置板块添加链接，
• 向内容管理器的列表视图和编辑视图添加操作和选项（见 内容管理器 API）。

示例：

JavaScript

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

TypeScript

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

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

可用操作

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

使用下表查找应使用哪个函数以及在哪里声明它。点击任意函数名查看详情：

• addEditViewSidePanel()
• addDocumentAction()
• addDocumentHeaderAction()
• addBulkAction() | bootstrap() | | Declare an injection zone | registerPlugin() | register() | | Inject a component in an injection zone | injectComponent() | bootstrap() | | Add a reducer | addReducers() | register() | | Create a hook | createHook() | register() | | Register a hook | registerHook() | bootstrap() | | Provide translations for the plugin admin interface | registerTrads() | registerTrads() | | Make authenticated HTTP requests | useFetchClient() / getFetchClient() | Any | | Access Content Manager Edit View context from React | unstable_useContentManagerContext | Any |

点击以下任意卡片以获取特定主题的更多详情：

• Navigation & settings — Add menu links and configure settings sections for your plugin.
• Content Manager APIs — Add panels, actions, and options to the Content Manager List and Edit views.
• Injection zones — Inject React components into predefined or custom areas of the admin panel.
• Redux store & reducers — Add custom reducers, read state, dispatch actions, and subscribe to changes in the Redux store.
• Hooks — Create and register hooks to let other plugins add personalized behavior.
• Localization — Provide translations for your plugin's admin interface using registerTrads and react-intl.
• Fetch client — Make authenticated HTTP requests from the admin panel using useFetchClient and getFetchClient.