博客

Antd Pro V4 样式修改大全

一、左侧菜单的logo和标题

（1）logo修改

BasicLayout.jsx

import logo from '../assets/example.jpg'; // 替换成自己的logo即可

（2）文字标题

defaultSettings.js

const proSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: false,
  },
  title: '试验',  // 在此处修改成自己的标题
  pwa: false,
  iconfontUrl: '',
};
export default proSettings;

二、title文字和图标

src/pages/document.ejs

<title>试验</title>
<link rel="icon" href="<%= context.config.publicPath +'example.jpg'%>" type="image/x-icon" />

为了方便大家修改，笔者在此处再插入一些ejs的知识点

1. 标签：<%= 输出数据到模板（输出是转义 HTML 标签）
2. context 函数执行时的上下文环境

其它内容如果大家感兴趣的话可以自行翻阅：


EJS 模板引擎



Umi JS 开发技巧



此处笔者是将example.jpg放在了cofig文件夹下，大家可以自行更改，换成assets或其它文件夹下


三、页面刷新的时候出现的Pro图标

src/pages/document.ejs

<img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
//对应的是大的Pro图标
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin"
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
            ></span>
          </div>
        </div>
        <div style="display: flex; justify-content: center; align-items: center;">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px;"
          />  //对应蚂蚁金服的Logo
          Ant Design
        </div>


笔者在公司刷新的时候还会跳出来，不知道为毛线在家里就截不到图了，但是修改的话的确就是在这里，大家可以自行修改


四、主题颜色

（1）主题颜色





config/defaultSettings.js

const proSettings = {
  navTheme: 'light',    //只有dark和light两种
 。。。。
};
export default proSettings;

五、更换登录界面背景图片

src/layouts/UserLayout.less

@media (min-width: @screen-md-min) {
  .container {
    background-image: url('../assets/bg.jpg');  //修改成自己的背景图片
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .content {
    padding: 32px 0 24px;
  }
}

六、页脚标注

layouts/BasicLayout.jsx

const defaultFooterDom = (
  <DefaultFooter
    copyright={`自己填写相关公司的信息`}
    links={
      [
      // {
      //   key: 'Ant Design Pro',
      //   title: 'Ant Design Pro',
      //   href: 'https://pro.ant.design',
      //   blankTarget: true,
      // },
      // {
      //   key: 'github',
      //   title: <GithubOutlined />,
      //   href: 'https://github.com/ant-design/ant-design-pro',
      //   blankTarget: true,
      // },
      // {
      //   key: 'Ant Design',
      //   title: 'Ant Design',
      //   href: 'https://ant.design',
      //   blankTarget: true,
      // },
    ]
  }
  />
);

感谢阅读，欢迎批评指正，希望大家能够在追求卓越中不断进步，让优秀成为一种习惯~