ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)

ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)

 

前言

  • 打算做一个个人网站,新建umi项目的时候发现了ant-design-pro这个项目模板,打开一看貌似挺有用,记录一下一步步探索的开发攻略,包括如何修改主题内容、添加路由新页面,以及将md文档文件插入页面(用于博客网站制作)。

新建ant-design-pro项目

  1. 先确保全局有yarn,全局安装umi依赖,另外可以使用国内源tyarn下载(后面文档中可以自行将yarn改成tyarn进行使用),加快速度。
    npm i yarn tyarn -g
    
    yarn global add umi
    
  2. 新建项目并进入项目文件夹,创建项目。
    mkdir myapp && cd myapp
    
    yarn create umi
    
  3. 选择项目时选择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.
    
  4. 然后jsts按喜好选择,我这边图省事选择js
  5. 最后选择complete
    66d39d4e6b0d40d8ba4420dae59c7bef
  6. 创建好之后下载依赖包。
    yarn install
    
  7. 然后启动
    yarn start
    

    c1f5f66771704ef2b4b04cbe36524557
    53dae6f43e4b43cdbc346fef60659ae5

目录结构

├── 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

9fa0e81a67f140ec8848b3962ae67362

国际化多语言

  1. 登录页在src/user/login/index.jsx,我们点进去会发现,它配置了国际化的语言,利用的是umi封装的useIntlformatMessage()里面传一个带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);
           }}
    >
    
  2. 这些语言,在国际化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': '登录失败,请重试!',
      ...
    }
    
  3. 如果我们想要配置国际化,就在这里修改之后,将其他国语言的相应句子写在对应的文件夹文件中,umi的国际化配置了八种语言。
    57fba9fde22a489ca4c946407600bf3f

修改自己的网站个性化

图标

  • 图标替换掉public文件夹中的favicon.ico文件即可。

网站名

  • 网站名的话,浏览器导航默认显示的是Ant Design Pro,在config/defaultSettings.js文件,可以进行修改。
    42b039ad8e384762a1e44c7ed5e8956f
    56e5e8a9e7a141d7b354844e6397f979

主题

  • 修改主题同样也是修改defaultSettings.js文件,而且有一个可以自定义主题的网址:ant Design Pro 主题配置,只要将拷贝来的配置对象与原对象对比修改对应内容即可。
    820cf64fd35548d896e7ad20f9c1d166

去除水印

  • 注释掉/app.jsx中的水印句。
    14869bf2f1dc4cb190f32944036d99e7

修改加载页

  • 首页进入前的加载页,在document.ejs中修改。
    409d63d2b1af4d818fc479e1773eb4a1

路由

路由与导航关系

  1. 项目默认自带了一个导航来显示路由,当然不同的主题中不一样,路由位置也可以在上边。
    1faeb137f5534dc49f1cefe34d79c183
  2. umi路由是约定式的,在pages文件夹中,文件路径就是路由,但是有人会提出疑问:那登录页明明也有路由,怎么不在导航中?,我们知道登录页肯定不应该作为导航的,这是可以配置的,在config/config.js中有一个routes对象,路由都在这里。
    d1075d1a866246569fa58146aa8f31e6
  3. 我们可以看见不存在于导航的user的配置,layout属性设置为false,而存在于导航的dashboard没有设置这个,而是设置了name和icon。
    0491d5edd75d4fa7a08cc19124ecafc0
    cda0ede2dbc24d5d9a8b52f3c67700ad
  4. 我们尝试把user的layout属性注释掉,并且也设置上name,再借用一下dashboard的图标,这下就出现在导航里了。(ps:登录页肯定还是不要出现在导航中比较好)
    f4f27e6d2c63430790a0cf5b24d7a284
    64ea9a87f7a94f7c834b0d949cff8423
  5. 这下我们也会添加路由了(去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重新启动项目即可)
    f6125cb72ef9417c9e80d2f57f26fd68
    1fd5cd7aa17642969e1ef88279c869cf
    59676bb09d7d478ea5207d1d74a38fa7

markdown

默认文档

  1. 项目默认根据md文件生成了文档。
    b931fd49c956464293e9d5908bab4eb5
    350af06b81994853ba402a82481c3a64
  2. 除了根目录下的README.md,其他都是根据src文件夹下的md文件生成的,比如组件文档就指向components/index.md,我们可以试着在pages下写一个md文件,自动生成了对应的文档。
    fc9ad8261f7f4935973fff96e942a392
    ffd6a269c69a4408bc99855bfa607139
    45815d3a2ac9430dbf7ecee8cbef9cbc

在页面中插入文档

  1. 如果想写自己的个人博客网站,必不可少的页面中插入文档,这些项目都封装好了,我们只需要将md文件当作react组件引入
  2. 因为在src下创建md会被带去默认文档,因此我们可以选择在根目录创建一个mds文件夹保存md文件。
    7e0453acd6be4fad932851bc52cd73a5
    140927721bc4487dacbf421581ede0ad
  3. 比如我们将默认的dashboard的analysis页修引入文档展示用于测试。(修改pages/dashboard/analysis/index.jsx
    ...
    
    import TestMd from '@/../mds/test.md'
    
    const Analysis = () => {
          
      ...
      return (
        <GridContent>
          <TestMd/>
        </GridContent>
      );
    };
    
    export default Analysis;
    
  4. 效果
    acd5286643014423a4f1bf193d7d9198

@映射路径无法快捷跳转问题

尾言

如果觉得文章还不错的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/weixin_43877799/article/details/123135263