极智开发 | antd pro 页面基础属性修改

(1)logo修改
BasicLayout.jsx

import logo from '../assets/example.jpg'; // 替换成自己的logo即可
1
(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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
二、title文字和图标
src/pages/document.ejs

<title>试验</title>
<link rel="icon" href="<%= context.config.publicPath +'example.jpg'%>" type="image/x-icon" />
1
2
为了方便大家修改,笔者在此处再插入一些ejs的知识点

标签:<%= 输出数据到模板(输出是转义 HTML 标签)
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;
  • 1


版权声明:本文为CSDN博主「爱吃辣锅的北极海豹」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_44752117/article/details/108018655

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值