在 Strapi 3 的左側菜單中顯示自定義插件（頁面）

Question

Strapi 3.0.0現在是Betaa版本，與之前的版本(Alpha)相比有很大的變化，但是現在在 beta 版本中自定義管理面板不再清晰，結構已經改變，沒有說明如何編輯管理面板並對其進行自定義（即使他們說它是“完全”可自定義的）這不是真的。

所以我的問題是：如何創建一個可以從左側邊欄訪問的插件（在Content Manager ...等旁邊），因為現在看起來如果你將插件的前端放在/plugins/my-plugin/admin/src它被忽略了。

謝謝你。

Answer 1

為了在管理面板中呈現您的插件，有幾個要求：

1.文件結構：

您的插件的管理文件夾需要具有以下結構

./admin
  - src
    - containers
      - App
        index.js
      - Initializer
        index.js
    - translations
      - en.json
      - index.js
    - index.js
    - lifecycles.js
    - pluginId.js

這是每個文件的內容

---

路徑：容器/App/index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { NotFound } from 'strapi-helper-plugin';
// Utils
import pluginId from '../../pluginId';
// Containers
import HomePage from '../HomePage';

const App = () => {
  return (
    <div className={pluginId}>
      <Switch>
        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

export default App;

路徑：容器/Initializer/index.js

import { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import pluginId from '../../pluginId';

const Initializer = ({ updatePlugin }) => {
  const ref = useRef();
  ref.current = updatePlugin;

  useEffect(() => {
    ref.current(pluginId, 'isReady', true);
  }, []);

  return null;
};

Initializer.propTypes = {
  updatePlugin: PropTypes.func.isRequired,
};

export default Initializer;

路徑：翻譯/index.js

import en from './en.json';
import fr from './fr.json';
// import the others translations if needed

const trads = {
  en,
  fr,
};

export default trads;

路徑：index.js

import React from 'react';
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import App from './containers/App';
import Initializer from './containers/Initializer';
import lifecycles from './lifecycles';
import trads from './translations';

const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;

function Comp(props) {
  return <App {...props} />;
}

const plugin = {
  blockerComponent: null,
  blockerComponentProps: {},
  description: pluginDescription,
  icon: pluginPkg.strapi.icon,
  id: pluginId,
  initializer: Initializer,
  injectedComponents: [],
  isReady: false,
  layout: null,
  lifecycles,
  leftMenuLinks: [],
  leftMenuSections: [],
  mainComponent: Comp,
  name: pluginPkg.strapi.name,
  preventComponentRendering: false,
  trads,
};

export default plugin;

路徑：pluginId.js

const pluginPkg = require('../../package.json');
const pluginId = pluginPkg.name.replace(
  /^strapi-plugin-/i,
  ''
);

module.exports = pluginId;

路徑：生命周期.js

function lifecycles() {}

export default lifecycles;

一旦你的插件滿足要求，你可以修改主要的 package 來渲染它

2. 渲染你的插件

創建my-app/admin/src/plugins.js文件

在此文件中，您將需要應用程序的默認插件（node_modules 中的插件）

const injectReducer = require('./utils/injectReducer').default;
const useInjectReducer = require('./utils/injectReducer').useInjectReducer;
const injectSaga = require('./utils/injectSaga').default;
const useInjectSaga = require('./utils/injectSaga').useInjectSaga;
const { languages } = require('./i18n');

window.strapi = Object.assign(window.strapi || {}, {
  node: MODE || 'host',
  env: NODE_ENV,
  backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
  languages,
  currentLanguage:
    window.localStorage.getItem('strapi-admin-language') ||
    window.navigator.language ||
    window.navigator.userLanguage ||
    'en',
  injectReducer,
  injectSaga,
  useInjectReducer,
  useInjectSaga,
});

module.exports = {
  'strapi-plugin-users-permissions': require('../../plugins/strapi-plugin-users-permissions/admin/src')
    .default,
  // Add the other plugins here
  // ...,
  // Add your newly created plugin here (the path is different than the others)
  'my-plugin': require('../../../plugins/my-plugin/admin/src').default,
};

Answer 2

我不知道你是否已經解決了你的問題，但是當我在遷移時遇到同樣的問題時，我做了一個小倉庫來幫助更清楚地了解新插件的工作原理：

https://github.com/lambertkevin/strapi-v3-beta-plugin-poc

希望能幫助到你

編輯：忘了提你需要知道的都在自述文件中解釋了