目录
前言
打算做一个个人网站，新建umi项目的时候发现了ant-design-pro这个项目模板，打开一看貌似挺有用，记录一下一步步探索的开发攻略，包括如何修改主题内容、添加路由新页面，以及将md文档文件插入页面（用于博客网站制作）。
新建ant-design-pro项目
先确保全局有yarn，全局安装umi依赖，另外可以使用国内源tyarn下载（后面文档中可以自行将yarn改成tyarn进行使用），加快速度。
npm i yarn tyarn -g
yarn global add umi
新建项目并进入项目文件夹，创建项目。
mkdir myapp && cd myapp
yarn create umi
选择项目时选择ant-design-pro。
? Select the boilerplate type (Use arrow keys) > ant-design-pro - Create project with a layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. plugin - Create a umi plugin.
- 然后js和ts按喜好选择，我这边图省事选择js。
- 最后选择complete。
创建好之后下载依赖包。
yarn install
然后启动
yarn start
目录结构
├── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地静态资源 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 │ ├── locales # 国际化资源 │ ├── global.less # 全局样式 │ └── global.ts # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json
国际化多语言
- 登录页在src/user/login/index.jsx，我们点进去会发现，它配置了国际化的语言，利用的是umi封装的useIntl，formatMessage()里面传一个带id的对象即可。
import {useIntl} from 'umi'; ... const intl = useIntl(); ... <LoginForm logo={<img alt="logo" src="/favicon.ico"/>}//可以修改你登录页展示的网站图标 title='可以修改成你登录页展示的网站名' subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title',//Ant Design Pro })} initialValues={{ autoLogin: true, }} ... onFinish={async (values) => { await handleSubmit(values); }} >
这些语言，在国际化locales文件夹，默认显示的是中文的，也就是在locales/zh-CN，例如pages.layouts.userLayout.title在zh-CN的pages.js文件中，第一条就是。
export default { 'pages.layouts.userLayout.title': 'Ant Design 是西湖区最具影响力的 Web 设计规范', 'pages.login.accountLogin.tab': '账户密码登录', 'pages.login.accountLogin.errorMessage': '错误的用户名和密码(admin/ant.design)', 'pages.login.failure': '登录失败，请重试！', ... }
如果我们想要配置国际化，就在这里修改之后，将其他国语言的相应句子写在对应的文件夹文件中，umi的国际化配置了八种语言。
修改自己的网站个性化
图标
- 图标替换掉public文件夹中的favicon.ico文件即可。
网站名
- 网站名的话，浏览器导航默认显示的是Ant Design Pro，在config/defaultSettings.js文件，可以进行修改。
主题
- 修改主题同样也是修改defaultSettings.js文件，而且有一个可以自定义主题的网址：ant Design Pro 主题配置，只要将拷贝来的配置对象与原对象对比修改对应内容即可。
去除水印
- 注释掉/app.jsx中的水印句。
修改加载页
- 首页进入前的加载页，在document.ejs中修改。
路由
路由与导航关系
- 项目默认自带了一个导航来显示路由，当然不同的主题中不一样，路由位置也可以在上边。
umi路由是约定式的，在pages文件夹中，文件路径就是路由，但是有人会提出疑问：那登录页明明也有路由，怎么不在导航中？，我们知道登录页肯定不应该作为导航的，这是可以配置的，在config/config.js中有一个routes对象，路由都在这里。
我们可以看见不存在于导航的user的配置，layout属性设置为false，而存在于导航的dashboard没有设置这个，而是设置了name和icon。
我们尝试把user的layout属性注释掉，并且也设置上name，再借用一下dashboard的图标，这下就出现在导航里了。（ps：登录页肯定还是不要出现在导航中比较好）
这下我们也会添加路由了（去src编写对应文件夹，再编写路由配置），并且可以根据这个页面的作用，选择需不需要添加在导航中，路由配置全属性如下：
name:string 配置菜单的 name，如果配置了国际化，name 为国际化的 key。
icon:string 配置菜单的图标，默认使用 antd 的 icon 名，默认不适用二级菜单的 icon。
access:string 权限配置，需要预先配置权限
hideChildrenInMenu:true 用于隐藏不需要在菜单中展示的子路由。
hideInMenu:true 可以在菜单中不展示这个路由，包括子路由。
hideInBreadcrumb:true 可以在面包屑中不展示这个路由，包括子路由。
headerRender:false 当前路由不展示顶栏
footerRender:false 当前路由不展示页脚
menuRender: false 当前路由不展示菜单
menuHeaderRender: false 当前路由不展示菜单顶栏
flatMenu: ture 子项往上提，只是不展示父菜单
路由导航图标
路由图标修改可以就用Ant Design Icon，使用时不需要加上Outlined即可，比如以下图标，我们直接写Html5即可。（如果未显示出来可能是缓存问题，删除src下的.umi重新启动项目即可）
markdown
默认文档
- 项目默认根据md文件生成了文档。
除了根目录下的README.md，其他都是根据src文件夹下的md文件生成的，比如组件文档就指向components/index.md，我们可以试着在pages下写一个md文件，自动生成了对应的文档。
在页面中插入文档
- 如果想写自己的个人博客网站，必不可少的页面中插入文档，这些项目都封装好了，我们只需要将md文件当作react组件引入。
- 因为在src下创建md会被带去默认文档，因此我们可以选择在根目录创建一个mds文件夹保存md文件。
比如我们将默认的dashboard的analysis页修引入文档展示用于测试。（修改pages/dashboard/analysis/index.jsx）
... import TestMd from '@/../mds/test.md' const Analysis = () => { ... return ( <GridContent> <TestMd/> </GridContent> ); }; export default Analysis;
效果
@映射路径无法快捷跳转问题
- 记录在了另一篇博客：react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件。
尾言
如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
