Ant Design Pro v5 修改Footer、标题和Logo

1、修改Footer

（1）修改模板组件

路径：\src\components\Footer\index.jsx

需要修改links下的列表，以及defaultMessage

import { useIntl } from 'umi';
import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-layout';

const Footer = () => {
  const intl = useIntl();
  const defaultMessage = intl.formatMessage({
    id: 'app.copyright.produced',
    defaultMessage: '你的Copyright',
  });
  const currentYear = new Date().getFullYear();
  return (
    <DefaultFooter
      copyright={`${currentYear} ${defaultMessage}`}
      links={null}
    />
  );
};

export default Footer;

（2）修改国际化文件

路径：\src\locales\zh-CN.js

需要修改app.copyright.produced为你的Copyright

import component from './zh-CN/component';
import globalHeader from './zh-CN/globalHeader';
import menu from './zh-CN/menu';
import pwa from './zh-CN/pwa';
import settingDrawer from './zh-CN/settingDrawer';
import settings from './zh-CN/settings';
import pages from './zh-CN/pages';
export default {
  'navBar.lang': '语言',
  'layout.user.link.help': '帮助',
  'layout.user.link.privacy': '隐私',
  'layout.user.link.terms': '条款',
  'app.copyright.produced': '你的Copyright',
  'app.preview.down.block': '下载此页面到本地项目',
  'app.welcome.link.fetch-blocks': '获取全部区块',
  'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面',
  ...pages,
  ...globalHeader,
  ...menu,
  ...settingDrawer,
  ...settings,
  ...pwa,
  ...component,
};

修改结果如下

2、修改标题

（1）先找到config\defaultSettings.js，添加title字段，可以修改最终页面的标题

const Settings = {
  navTheme: 'dark',
  primaryColor: '#722ED1',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  headerHeight: 48,
  splitMenus: false,
  menu: {
    locale: false, //关闭国际化
  },
  title: 'your title', // 修改标题
};
export default Settings;

（2）再找到src\pages\document.ejs页面模板，修改中间页标题

<title>your title</title>

3、修改Logo

（1）在src\pages\document.ejs中修改引用的logo链接（有多处），默认是放在public文件夹下

<link rel="icon" href="<%= context.config.publicPath +'logo-g.svg'%>" type="image/x-icon" />

（2）删除config\defaultSettings.js中的logo，根据官方文档这里无法引入本地logo文件，因此我们从src\app.jsx中下手，引入public中的logo并返回

import logo from '../public/logo-g.svg';

export const layout = ({ initialState, setInitialState }) => {
  return {
    logo: logo,
    ...
  }
}

至此标题和Logo都修改完成