# ant-design-pro-layout底部Footer更改
# 快速导航
# 场景
项目中使用ant-design-pro脚手架初始化项目,底部Footer更改
# 方案
https://github.com/ant-design/ant-design-pro-layout/issues/31
github上issues上找到相同问题,但目前还没有看到支持Footer,我目前这样解决的
const footerRender = (_, defaultDom) => {
if (!isAntDesignPro()) {
return React.cloneElement(defaultDom, { links: [], copyright: "2019 created by coco" })
}
return (
<>
{defaultDom}
<div
style={{
padding: '0px 24px 24px',
textAlign: 'center',
}}
>
<a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
width="82px"
alt="netlify logo"
/>
</a>
</div>
</>
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
将文件./utils/utils.js的函数return 改为false,if里的ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION改为自定义的BLOG_ADMIN
export const isAntDesignPro = () => {
if (BLOG_ADMIN === 'site') {
return false;
}
return window.location.hostname === 'preview.pro.ant.design';
};
1
2
3
4
5
6
7
2
3
4
5
6
7