ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)_在下月亮有何贵干的博客-程序员ITS201_ant design项目

技术标签: umi  react.js  前端框架  前端  react  javascript  

前言

  • 打算做一个个人网站,新建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
    在这里插入图片描述

  6. 创建好之后下载依赖包。

    yarn install
    
  7. 然后启动

    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

在这里插入图片描述

国际化多语言

  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的国际化配置了八种语言。
    在这里插入图片描述

修改自己的网站个性化

图标

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

网站名

  • 网站名的话,浏览器导航默认显示的是Ant Design Pro,在config/defaultSettings.js文件,可以进行修改。
    在这里插入图片描述
    在这里插入图片描述

主题

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

去除水印

  • 注释掉/app.jsx中的水印句。
    在这里插入图片描述

修改加载页

  • 首页进入前的加载页,在document.ejs中修改。
    在这里插入图片描述

路由

路由与导航关系

  1. 项目默认自带了一个导航来显示路由,当然不同的主题中不一样,路由位置也可以在上边。
    在这里插入图片描述

  2. umi路由是约定式的,在pages文件夹中,文件路径就是路由,但是有人会提出疑问:那登录页明明也有路由,怎么不在导航中?,我们知道登录页肯定不应该作为导航的,这是可以配置的,在config/config.js中有一个routes对象,路由都在这里。
    在这里插入图片描述

  3. 我们可以看见不存在于导航的user的配置,layout属性设置为false,而存在于导航的dashboard没有设置这个,而是设置了name和icon。
    在这里插入图片描述
    在这里插入图片描述

  4. 我们尝试把user的layout属性注释掉,并且也设置上name,再借用一下dashboard的图标,这下就出现在导航里了。(ps:登录页肯定还是不要出现在导航中比较好)
    在这里插入图片描述
    在这里插入图片描述

  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重新启动项目即可)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

markdown

默认文档

  1. 项目默认根据md文件生成了文档。
    在这里插入图片描述
    在这里插入图片描述
  2. 除了根目录下的README.md,其他都是根据src文件夹下的md文件生成的,比如组件文档就指向components/index.md,我们可以试着在pages下写一个md文件,自动生成了对应的文档。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在页面中插入文档

  1. 如果想写自己的个人博客网站,必不可少的页面中插入文档,这些项目都封装好了,我们只需要将md文件当作react组件引入

  2. 因为在src下创建md会被带去默认文档,因此我们可以选择在根目录创建一个mds文件夹保存md文件。
    在这里插入图片描述
    在这里插入图片描述

  3. 比如我们将默认的dashboard的analysis页修引入文档展示用于测试。(修改pages/dashboard/analysis/index.jsx

    ...
    
    import TestMd from '@/../mds/test.md'
    
    const Analysis = () => {
          
      ...
      return (
        <GridContent>
          <TestMd/>
        </GridContent>
      );
    };
    
    export default Analysis;
    
  4. 效果
    在这里插入图片描述

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

尾言

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43877799/article/details/123135263

智能推荐

计算机管理储存u盘无法使用,小编教你无法格式化u盘怎么解决_weixin_39603265的博客-程序员ITS201

U盘在我们的生活已经非常普及,不过有时候会遇到u盘无法被格式化的现象,相信大家或多或少都有经历过,一般遇到这种情况往往都有手足无措,下面小编整理以下无法格式化u盘几点原因和解决方案。现在U盘可以说是非常普遍的移动存储设备了,使用的过程就避免不了出现一些小故障,比如无法格式化u盘了?提示如“windows无法完成格式化”之类。难道U盘就这样报废了,不然,接下来小编手把手叫你解决无法格式化u盘的问题,...

关于资源下载里鱼眼图片处理的程序的解释_gaoleikidkidkid的博客-程序员ITS201

发到我的资源里的鱼眼图片处理的程序,好多人反应无法

windows 配置redis的持久化[email protected]清风明月情@的博客-程序员ITS201_redis windows 持久化

redis的持久化配置,简要配置如下配置后发现aof不起作用 查看aof文件

Redis 面试题汇总_头发莫的了呀的博客-程序员ITS201

目录Redis 面试题汇总1. MySQL 里有2000w数据,redis中只存20w的数据,如何保证redis中的数据都是热点数据1.1 Redis提供了8种策略1.2 最大内存设置2. 为什么说 redis 能够快速执行3. Redis中的五种数据结构3.1 string 字符串类型3.2 list 列表3.3 hash 类型3.4 set 无序集合3.5 set 有序4. Redis 的持久化4.1 Redis 的持久化机制4.2 Redis 持久化方案4.3 Redis 持久化方案的优缺点5. 缓存

Liunx 常用命令50个_Zhang.Voi的博客-程序员ITS201

1.find 基本语法参数如下:find [PATH] [option] [action]# 与时间有关的参数:-mtime n : n为数字,意思为在n天之前的“一天内”被更改过的文件;-mtime +n : 列出在n天之前(不含n天本身)被更改过的文件名;-mtime -n : 列出在n天之内(含n天本身)被更改过的文件名;-newer file : 列出比file还要新的文件名# 例如:find /root -mtime 0 # 在当前目录下查找今天之内有改动的文件# 与用.

随便推点

05. Shell 输入与输出_Java 程序源的博客-程序员ITS201

Shell 默认的输入为键盘输入, 默认输出则是终端的Shell 窗口.Shell 脚本中添加合适的输入, 可以让脚本和用户进行交互起来; 合适添加输出语句, 可以让程序运行一目了然.1. 标准输入shell 脚本中使用 read 命令读取用户输入. read命令会读取一个输入行, 遇到换行符终止.1.1 命令格式read [选项] [变量]read 默认读取一行内容, 遇到回车键...

StegBrute:如何在CTF中快速进行隐写爆破_黄一113530的博客-程序员ITS201_ctf爆破工具

StegBruteStegBrute是一款功能强大的隐写术暴力破解工具,该工具基于Rust开发,并且引入了线程机制以提升其性能,可以帮助广大研究人员在CTF比赛中迅速对隐写内容进行暴力破解。工具依赖StegBrute的运行必须依赖于Steghide,因此,我们在使用StegBrute之前需要先安装并运行Steghide:apt-get install -y steghide如果你使用的并不是基于Debian的发行版系统的话,请直接点击【这里】访问Stetghide站点并下载最新版本。工具安装&a

USB 检测外接摄像头_K_Hello的博客-程序员ITS201

USB 检测外接摄像头文章目录USB 检测外接摄像头查找所有的摄像设备两个方法查找所有的摄像设备两个方法1.首先下载个安卓USB检测程序,插入UVC摄像头,在程序中检测看是在/dev/video中新增了节点,还是在/bus/usb下新增了节点。如果没新增video节点,则没有UVC驱动。2.如果可以连电脑,在Dos命令下:AndroidSDK\platform-tools\目录下: ad...

面试题44:扑克牌的顺子_lskyne的博客-程序员ITS201

题目:从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的。2~10为数字本身,A为1,J为11,Q为12,K为13,而大小王可以看成是任意数字。思路:1,首先把数组排序,然后统计数组中0的个数和数组中不连续数之间的距离。如果空缺距离小于或者等于0的个数,则是连续的。否则是非连续的。2,判断条件a,数组为空b,长度《1c,相同数字不连续(重要)代码:#

推荐文章

热门文章

相关标签