自定义Antd Pro 默认元素

  • 概要
  • 通用元素
  • 修改的方式
    • 主页面
      • 标签上的图标
      • logo 和 系统名称
      • footer 的配置
    • loading 页面
  • 最终效果

概要

使用 Antd Pro 来开发前端项目时, 生成的项目模板中, 一些基本的元素都是和 Antd Pro 项目相关的. 比如, 系统 title, 图标, logo, footer 等等.

这些基本的元素在实际的项目都需要替换. Antd Pro 由于大部分元素都基于配置, 想要替换这些通用的元素并不是那么直观, 这里把替换这些通用元素的方法做个总结.

通用元素

通用元素有 2 个地方, 一个是主页面, 一个是 loading 的页面

自定义Antd Pro 默认元素_第1张图片

如上图, 3 个地方希望切换成自己的元素, 从而和具体项目想匹配

  1. 标签页上的图标
  2. logo 和 系统名称
  3. footer 上的版权声明

还有 loading 页面也是 Antd Pro 的相关信息

自定义Antd Pro 默认元素_第2张图片

修改的方式

主页面

标签上的图标

标签上的图标在 /public/favicon.png , 只要替换这个图片即可.

调整的位置在 /src/pages/document.ejs 中:

1  xxx系统
2  

这里的 xxx 系统 是在页面加载时, 显示在 标签上 的名字

logo 和 系统名称

logo 图片的位置在 /src/assets/logo.svg, 替换这个文件就可以改变 logo

系统名称调整位置在 /config/defaultSettings.js

1  export default {
2    navTheme: 'dark',
3    // 省略部分...
4    title: 'xxx 系统', // 这里配置系统名称
5    // 省略部分...
6  };

footer 的配置在 /src/layouts/BasicLayout.jsx

1  const defaultFooterDom = ;

删除 links 中的内容, 就不会有 github 之类的信息了

loading 页面

loading 页面的配置比较隐蔽, 在 /src/pages/document.ejs 中:

 1  logo
 2  
3
4 8
9
10
11 12 文字文字文字 13

上面 loading 页面截图上红框内的 Pro 文字其实是图片, 这里我将其替换成 logo.svg 文件了, 可以根据情况换成其他文件也行

这里需要将 logo.svg 文件在 /src/public 下也放一份

最终效果

自定义Antd Pro 默认元素_第3张图片

自定义Antd Pro 默认元素_第4张图片

你可能感兴趣的:(自定义Antd Pro 默认元素)