javascript - 在 Strapi 3 的左侧菜单中显示自定义插件(页面)

Question

Strapi 3.0.0 现在是 Betaa 版本，与之前的版本 (Alpha) 相比，它们发生了很大变化但现在自定义管理面板在测试版中不再明确，结构已更改，没有关于如何编辑管理面板和自定义它的说明(即使他们说它是“完全”可自定义的)这不是真的。

所以我的问题是:如何创建一个可以从左侧边栏访问的插件(在 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

这里是每个文件的内容

---

路径:containers/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;

路径:containers/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;

路径:translations/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;

路径:lifecycles.js

function lifecycles() {}

export default lifecycles;

一旦你的插件满足要求，你就可以修改主包来渲染它

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,
};