插件结构
¥Plugin structure
当 使用插件 SDK 创建插件 时,Strapi 会在 /src/plugins/my-plugin
文件夹中为你生成以下样板结构:
¥When creating a plugin with Plugin SDK, Strapi generates the following boilerplate structure for you in the /src/plugins/my-plugin
folder:
- TypeScript-based plugins
- JavaScript-based plugins
The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation section.
. # root of the plugin folder (e.g., /src/plugins/my-plugin)
├── admin # Admin panel part of your plugin.
│ ├── src
│ │ ├── components # Contains your front-end components
│ │ │ ├── Initializer.tsx # Plugin initializer
│ │ │ └── PluginIcon.tsx # Contains the icon of your plugin in the main navigation
│ │ ├── pages # Contains the pages of your plugin
│ │ │ ├── App.tsx # Skeleton around the actual pages
│ │ │ └── HomePage.tsx # Homepage of your plugin
│ │ ├── translations # Translations files to make your plugin i18n-friendly
│ │ │ ├── en.json
│ │ ├── utils
│ │ │ └── getTranslations.ts # getTranslations function to return the corresponding plugin translations
│ │ ├── index.ts # Main setup of your plugin, used to register elements in the admin panel
│ │ └── pluginId.ts # pluginId variable computed from package.tsxon name
│ ├── custom.d.ts # Generated types
│ ├── tsconfig.build.json
│ └── tsconfig.json # TypeScript compiler options for the admin panel part
├── dist # Build of the plugin (front end and back end)
├── node_modules
├── server # Back-end part of your plugin
│ ├── src
│ │ ├── config
│ │ │ └── index.ts # Contains the default server configuration
│ │ ├── content-types # Content-types specific to your plugin
│ │ │ └── index.ts # Loads all the plugin's content-types
│ │ ├── controllers # Controllers specific to your plugin
│ │ │ ├── index.ts # Loads all the plugin's controllers
│ │ │ └── controller.ts # Custom controller example. You can rename it or delete it.
│ │ ├── middlewares # Middlewares specific to your plugin
│ │ │ └── index.ts # Loads all the plugin's middlewares
│ │ ├── policies # Policies specific to your plugin
│ │ │ └── index.ts # Loads all the plugin's policies
│ │ ├── routes # Routes specific to your plugin
│ │ │ └── index.ts # Contains an example route for the my-controller custom controller example
│ │ ├── services # Services specific to your plugin
│ │ │ ├── index.ts # Loads all the plugin's services
│ │ │ └── service.ts # Custom service example. You can rename it or delete it.
│ │ ├── bootstrap.ts # Function that is called right after the plugin has registered
│ │ ├── destroy.ts # Function that is called to clean up the plugin after Strapi instance is destroyed
│ │ ├── index.ts # Entrypoint for the server (back end)
│ │ └── register.ts # Function that is called to load the plugin, before bootstrap.
│ ├── tsconfig.build.json
│ └── tsconfig.json # TypeScript compiler options for the server part
├── .editorconfig
├── .eslintignore
├── .gitignore
├── .prettierignore
├── .prettierrc
├── package-lock.json
├── package.json
└── README.md
The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation section.
. # root of the plugin folder (e.g., /src/plugins/my-plugin)
├── admin # Admin panel part of your plugin.
│ ├── src
│ │ ├── components # Contains your front-end components
│ │ │ ├── Initializer.jsx # Plugin initializer
│ │ │ └── PluginIcon.jsx # Contains the icon of your plugin in the main navigation
│ │ ├── pages # Contains the pages of your plugin
│ │ │ ├── App.jsx # Skeleton around the actual pages
│ │ │ └── HomePage.jsx # Homepage of your plugin
│ │ ├── translations # Translations files to make your plugin i18n-friendly
│ │ │ ├── en.json
│ │ ├── utils
│ │ │ └── getTranslations.js # getTranslations function to return the corresponding plugin translations
│ │ ├── index.js # Main setup of your plugin, used to register elements in the admin panel
│ │ └── pluginId.js # pluginId variable computed from package.json name
│ └── jsconfig.json
├── dist # Build of the plugin (front end and back end)
├── node_modules
├── server # Back-end part of your plugin
│ ├── src
│ │ ├── config
│ │ │ └── index.js # Contains the default server configuration
│ │ ├── content-types # Content-types specific to your plugin
│ │ │ └── index.js # Loads all the plugin's content-types
│ │ ├── controllers # Controllers specific to your plugin
│ │ │ ├── index.js # Loads all the plugin's controllers
│ │ │ └── controller.js # Custom controller example. You can rename it or delete it.
│ │ ├── middlewares # Middlewares specific to your plugin
│ │ │ └── index.js # Loads all the plugin's middlewares
│ │ ├── policies # Policies specific to your plugin
│ │ │ └── index.js # Loads all the plugin's policies
│ │ ├── routes # Routes specific to your plugin
│ │ │ └── index.js # Contains an example route for the my-controller custom controller example
│ │ ├── services # Services specific to your plugin
│ │ │ ├── index.js # Loads all the plugin's services
│ │ │ └── service.js # Custom service example. You can rename it or delete it.
│ │ ├── bootstrap.js # Function that is called right after the plugin has registered
│ │ ├── destroy.js # Function that is called to clean up the plugin after Strapi instance is destroyed
│ │ ├── index.js # Entrypoint for the server (back end)
│ │ └── register.js # Function that is called to load the plugin, before bootstrap.
├── .editorconfig
├── .eslintignore
├── .gitignore
├── .prettierignore
├── .prettierrc
├── package-lock.json
├── package.json
└── README.md
Strapi 插件分为 2 部分,每个部分位于不同的文件夹中并提供不同的 API:
¥A Strapi plugin is divided into 2 parts, each living in a different folder and offering a different API:
插件部分 | 描述 | 文件夹 | API |
---|---|---|---|
管理面板 | 包括 管理面板 中可见的内容(组件、导航、设置等) | admin/ | 管理面板 API |
后端服务器 | 包括与 后端服务器 相关的内容(内容类型、控制器、中间件等) | server/ | 服务器 API |
关于不同部分对于你的特定用例的有用性的说明