如何在strapi中添加多个自定义字段（按钮）

Question

我正在尝试向 Strapi 中的现有按钮添加另一个按钮，但它会引发错误（它只是不会将实体加载到内容管理器中）。可能是什么原因导致了这个问题？ 如果您为按钮指定相同的名称、pluginid 和plugin，那么第二个按钮将简单地重复第一个按钮的操作

插件/自定义按钮/index.ts

register({ strapi }) {
    strapi.customFields.register({
      name: "custom-button-source",
      plugin: "custom-button",
      type: "string",
    },
    {
      name: "custom-button-article",
      plugin: "custom-button",
      type: "string"
    });
  }

src/plugins/custom-button/admin/src/pluginId.js

import pluginPkg from '../../package.json';

const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');

export default pluginId;

package.json 中的自定义插件部分

"name": "custom-button",
  "version": "0.0.0",
  "description": "This is the description of the plugin.",
  "strapi": {
    "name": "custom-button",
    "description": "Description of Custom Button plugin",
    "kind": "plugin",
    "displayName": "Custom Button"

getTrad.js

import pluginId from '../pluginId';

const getTrad = (id) => `${pluginId}.${id}`;

export default getTrad;

插件/自定义按钮/admin/src/index.js

import { prefixPluginTranslations } from "@strapi/helper-plugin";
import pluginPkg from "../../package.json";
import pluginId from "./pluginId";
import Initializer from "./components/Initializer";
import PluginIcon from "./components/PluginIcon";

const name = pluginPkg.strapi.name;

const getTrad = (id) => `${pluginId}.${id}`;

export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      name: "custom-button-source",
      icon: PluginIcon,
      isReady: true,
      isRequired: false,
      translations: {},
    });

    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      name: "custom-button-article",
      icon: PluginIcon,
      isReady: true,
      isRequired: false,
      translations: {},
    });

    app.customFields.register({
      name: "custom-button-source",
      pluginId: pluginId,
      type: "string",
      intlLabel: {
        id: getTrad("custom-button.label"),
        defaultMessage: "Variants",
      },
      intlDescription: {
        id: getTrad("custom-button.description"),
        defaultMessage: "Variants (Cartesian product)",
      },
      icon: PluginIcon,
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/CustomSourceButton"
          ),
      },
      options: {},
    });

    app.customFields.register({
      name: "custom-button-article",
      pluginId: pluginId,
      type: "string",
      intlLabel: {
        id: getTrad("custom-button.label"),
        defaultMessage: "Articles",
      },
      intlDescription: {
        id: getTrad("custom-button.description"),
        defaultMessage: "Articles (Cartesian product)",
      },
      icon: PluginIcon,
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/CustomArticleButton"
          ),
      },
      options: {},
    });
  },


  bootstrap(app) {},
  async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map((locale) => {
        return import(`./translations/${locale}.json`)
          .then(({ default: data }) => {
            return {
              data: prefixPluginTranslations(data, pluginId),
              locale,
            };
          })
          .catch(() => {
            return {
              data: {},
              locale,
            };
          });
      })
    );

    return Promise.resolve(importedTrads);
  },
};

Answer 1

该错误可能是由几个不同的因素引起的，特别是当您尝试注册两个具有相似名称、插件 ID 和类型的按钮时。

确保每个自定义按钮的名称和pluginId是唯一的。如果两个按钮具有相同的名称或插件 ID，Strapi 可能会混淆它们并无法正确注册。稍微修改一下名称以区分它们。

app.customFields.register({
  name: "custom-button-source",
  pluginId: pluginId,
  // other properties
});

app.customFields.register({
  name: "custom-button-article",
  pluginId: pluginId,
  // other properties
});