全局布局

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

第一步 打开./src/layouts/index.js

import styles from './index.css';
function BasicLayout(props) {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to umi!</h1>
      { props.children }
    </div>
  );
}
export default BasicLayout;

使用create-umi创建的项目，layout文件如上。可以看到，其实layout也是一个组件。 umi会自动使用它包裹页面，并传入props

//props
{
history: {length: 1, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/", search: "", hash: "", query: {…}, state: undefined}
match: {path: "/", url: "/", isExact: true, params: {…}}
route: {path: "/", component: ƒ, routes: Array(2), _title: "hero", _title_default: "hero"}
staticContext: undefined
}

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

第二步 使用antd的layout

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

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

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

import styles from './index.css';
import { Layout } from 'antd';
const { Header, Content, Footer } = Layout;
function BasicLayout(props) {
  return (
    <Layout>
      <Header>
        <div style={{ color: 'white' }}>王者荣耀资料库</div>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        {props.children}
      </Content>
      <Footer style={{ textAlign: 'center' }}>Umi 入门教程 Created by xiaohuoni</Footer>
    </Layout>
  );
}
export default BasicLayout;

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

第三步 增加页面导航

在头部引入antd的menu组件

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

在Header中增加导航

<Header>
- <div style={{ color: 'white' }}>王者荣耀资料库</div>
+ <div className={styles.logo}>王者荣耀资料库 </div>
+    <Menu
+      theme="dark"
+      mode="horizontal"
+      defaultSelectedKeys={['1']}
+      style={{ lineHeight: '64px' }}
+    >
+      <Menu.Item key="1">英雄</Menu.Item>
+      <Menu.Item key="2">局内道具</Menu.Item>
+      <Menu.Item key="3">召唤师技能</Menu.Item>
+    </Menu>
</Header>

在./src/layouts/index.css中增加logo样式

.logo {
  width: 148px;
  color: white;
  margin: 16px 24px 16px 0;
  float: left;
  font-size: 18px;
  line-height: 30px;
}

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

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

最终效果

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