Write the Code. Change the World.

7月 23

ant design pro 版本总是更新,总是没稳定下来。前段时间 v5 也出来了,和 v4 差别蛮大的。就样式来说,我更喜欢宽点的侧边栏,更喜欢将侧边栏伸缩按钮放在顶部。更喜欢暴露更多的 layout,去定义自己想要的。喜欢更简洁,更少的展示的元素。不是专业研究前端的,核心东西还是没深入。从零开始创建项目以及变更项目吧。

安装

yarn create umi

# 选择 ant design pro
# 选择 v5
# 等待下载

# 安装依赖包
yarn 

# 启动,先看看效果(默认样式太丑陋,兼职无语)
yarn start

# git 操作
git init
git add .
git commit -m 'ant-design-pro-v5-initialize'

到此, ant design pro v5 已经安装完成。但页面太丑陋,和曾经的页面完全不是一个样。页面丑陋是由 div 和 css 决定的。下边修改下配置,使得样式稍微好看一点。

修改配置

https://beta-pro.ant.design/index-cn v5 官网,感觉还是 low。做事情做了,却做不完美。现在打开预览页。

https://preview.pro.ant.design/dashboard/analysis

点击右侧的悬浮按钮,设置出自己想要的布局。并复制设置信息。

{
  "navTheme": "dark",
  "primaryColor": "#1890ff",
  "layout": "side",
  "contentWidth": "Fluid",
  "fixedHeader": true,
  "fixSiderbar": true,
  "menu": {
    "locale": true
  },
  "title": "Ant Design Pro",
  "pwa": false,
  "iconfontUrl": "",
  "splitMenus": false
}

将该复制信息,合并到 /config/defaultSettings.ts 中。这个时候,你会发现,以前的颜色布局回来了。

v5 不支持多套模板

v5 不支持多套模板,所以登录注册页面,在路由处加入了 layout:false 来处理模板渲染的问题。我就不要套用模板,我就要单纯的登录注册页面。不过,登录注册页面太丑了,后边会重新写。

修改侧边栏宽度

/config/config.ts 的 layout 下,添加 siderWidth: 256 即可。如:

…
export default defineConfig({
    …
    layout: {
        …
        locale: true,
        siderWidth: 256,
    }
})

修改侧边栏的文字以及 logo

修改 /config/defaultSettings.tstitle 就可以修改文字了。
修改 /config/config.ts 中 layout 下增加 logo 配置就可以了。如果 logo 配置为 false,就不显示 logo,如果 logo 是 cdn url 或相对路径,就会显示对应的 logo。不过,终究只是替换,样式这些没办法更改了。

…
export default defineConfig({
    …
    layout: {
        …
        locale: true,
        siderWidth: 256,
        // 不显示 logo
        logo: false 
        logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K'
    }
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注