2

Strapi 3.0.0现在是版本Betaa，和之前的版本相比有很大的变化(Alpha) 但是现在在测试版中自定义管理面板不再清晰，结构已经改变，没有关于如何编辑的说明管理面板并对其进行自定义（即使他们说它是“完全”可自定义的）这不是真的。

所以我的问题是：如何创建一个可以从左侧边栏（Content Manager...等旁边）访问的插件，因为现在看起来如果你将插件的前端放在里面/plugins/my-plugin/admin/src它被忽略了。

谢谢你。

4

2 回答 2

1

我不知道你是否已经解决了你的问题，但是当我在迁移时遇到同样的问题时，我做了一个小仓库来帮助更清楚地了解新插件的工作原理：

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

希望能帮助到你

编辑：忘了提你需要知道的都在自述文件中解释了

于 2019-10-21T17:01:22.760 回答
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;

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

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,
};
于 2019-10-10T10:03:51.367 回答