在上一小节里面我们知道，存在 ./src/layouts/index 时，会自动使用它作为全局布局。

第一步 删除 config/config.ts 中的 routess配置

因为配置式相关的主要是 react-router 的内容，所以这边暂时不多做说明，我们先以 umi 的约定式路由，进行本次的入门学习。

第二步 新建 ./src/layouts/index.tsx

  1. import React from 'react';
  3. function BasicLayout(props) {
  4.   return (
  5.     <div>
  6.       <h1>Yay! Welcome to umi!</h1>
  7.       {props.children}
  8.     </div>
  9.   );
  10. }
  12. export default BasicLayout;

编辑 layout 文件如上。其实 layout 也是一个组件。umi 会自动使用它包裹页面，并传入如下 props：

  1. //props
  2. {
  3.     match?: match<P>;
  4.   location: Location<S>;
  5.   history: History;
  6.   route: IRoute;
  7. }

你可以随意的修改这个文件，但是一定要记得包裹 {props.children} 。

第二步 使用 antd 的 Layout 组件

在文件头部引入 antd 的 Layout 组件,并从 Layout 中取出 Header, Content, Footer

  1. import { Layout } from 'antd';
  2. const { Header, Content, Footer } = Layout;

使用 Header, Content, Footer，包裹children。

  1. import styles from './index.css';
  2. import { Layout } from 'antd';
  4. const { Header, Content, Footer } = Layout;
  6. function BasicLayout(props) {
  7.   return (
  8.     <Layout>
  9.       <Header>
  10.         <div style={{ color: 'white' }}>王者荣耀资料库</div>
  11.       </Header>
  12.       <Content style={{ padding: '0 50px' }}>
  13.         {props.children}
  14.       </Content>
  15.       <Footer style={{ textAlign: 'center' }}>Umi 入门教程 Created by xiaohuoni</Footer>
  16.     </Layout>
  17.   );
  18. }
  20. export default BasicLayout;

image.png

更改完后的效果，看起来不错吧，你可以随意的改改，看看效果。

第三步 增加页面导航

在头部引入 antd 的 menu 组件

  1. - import { Layout } from 'antd';
  2. + import { Layout, Menu } from 'antd';

在 Header 中增加导航

  1. + import styles from './index.less';
  3. <Header>
  4. - <div style={{ color: 'white' }}>王者荣耀资料库</div>
  5. + <div className={styles.logo}>王者荣耀资料库 </div>
  6. +    <Menu
  7. +      theme="dark"
  8. +      mode="horizontal"
  9. +      defaultSelectedKeys={['1']}
  10. +      style={{ lineHeight: '64px' }}
  11. +    >
  12. +      <Menu.Item key="1">英雄</Menu.Item>
  13. +      <Menu.Item key="2">局内道具</Menu.Item>
  14. +      <Menu.Item key="3">召唤师技能</Menu.Item>
  15. +    </Menu>
  16. </Header>

新建 ./src/layouts/index.less 并增加 logo 样式

  1. .logo {
  2.   width: 148px;
  3.   color: white;
  4.   margin: 16px 24px 16px 0;
  5.   float: left;
  6.   font-size: 18px;
  7.   line-height: 30px;
  8. }

为了使得页面更美观，修改 Content

  1. <Content style={{ padding: '0 50px' }}>
  2.     <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
  3.       {props.children}
  4.     </div>
  5. </Content>

最终效果

image.png

代码回顾：这节课的全部代码