如何修改Payload CMS中“Publish Changes”按钮的文本？

安全阿岳

2026-7-6

修改Payload CMS的“Publish Changes”按钮文本

要把Payload CMS后台里的“Publish Changes”按钮改成“Publish Data”，不用去翻源码文件，用下面两种方法就能搞定：

方法1：自定义本地化配置（最简单）

Payload的后台文本大多通过本地化系统管理，直接在配置文件里覆盖对应翻译键即可：

打开项目根目录的payload.config.ts（或.js）文件
添加/修改localization配置，指定buttons.publishChanges的新文本：

import { buildConfig } from 'payload/config';

export default buildConfig({
  // 保留原有其他配置
  localization: {
    locales: ['en'],
    defaultLocale: 'en',
    translations: {
      en: {
        buttons: {
          publishChanges: 'Publish Data',
        },
      },
    },
  },
});

重启Payload服务，刷新后台就能看到按钮文本更新。

方法2：自定义组件替换（适合需修改逻辑/样式的场景）

如果还要调整按钮的样式或交互逻辑，可以直接替换默认的发布按钮组件：

创建自定义按钮组件（比如CustomPublishButton.tsx），复制原按钮逻辑并修改文本：

import React from 'react';
import { Button } from '@payloadcms/ui';
import { usePublish } from 'payload/components';

const CustomPublishButton = () => {
  const { publish, saving } = usePublish();

  return (
    <Button
      onClick={publish}
      disabled={saving}
      variant="primary"
    >
      {saving ? 'Publishing...' : 'Publish Data'}
    </Button>
  );
};

export default CustomPublishButton;

在payload.config.ts中配置自定义组件覆盖默认按钮：

import { buildConfig } from 'payload/config';
import CustomPublishButton from './path/to/CustomPublishButton';

export default buildConfig({
  admin: {
    components: {
      buttons: {
        publish: CustomPublishButton,
      },
    },
  },
  // 保留原有其他配置
});