React+Ant.design 从零开始搭建个人博客实战教程02 —— 页面布局公用头部尾部

简介：刚入手一个服务器打算搭个个站，平时工作都是用vue ；为了扩展自己的实战能力来从头开始实战用用react吧；结合ant-design一起开发，然后后台nodejs来写；编写我的第一个教程文章，从头到尾记录整个过程因为是实战项目；部分基础的创建react的和基本语法什么的话各位就自便了如果有需要的话我是可以开篇博客的；需要的留言— —
ღ( ´･ᴗ･` )比心

因为并不是很熟悉这两个框架所以如果有做的不好的请各位大神指导下小弟谢谢了

作者：webmxj
csdn博客名:div_ma
联系方式：[email protected]
微信：webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

上一篇我们搭好了基础的框框然后现在我们开始对内容进行布局

1.我们先给框架搭建一个头部，先引入ant-design的组件

//通过import 引入从ant中想要的组件
import {Menu,Icon} from 'antd'
//然后修改样式

然后根据ant-design的api改造样式
最后的代码如下：
HeadNav.js

import React,{Component} from 'react';
import {Menu,Icon} from 'antd'
import './HeadNav.less'
export default class HeadNav extends Component {
    state = {
        current: 'home',
    }
    render(){
        return (
            <div id="HeadNav">
                <div className="nav-wrap">
                    <div className="nav-logo-wrap">
                        <Icon type="global" className="nav-logo" />
                    </div>
                    <div className="nav-list-wrap">
                        <Menu
                            selectedKeys={[this.state.current]}
                            mode="horizontal"
                        >
                            <Menu.Item key="home">
                                首页
                            </Menu.Item>
                            <Menu.Item key="aboutme">
                                关于我
                            </Menu.Item>
                            <Menu.Item key="article">
                                文章分享
                            </Menu.Item>
                            <Menu.Item key="resource">
                                资源共享
                            </Menu.Item>
                        </Menu>
                    </div>
                </div>
            </div>
        )
    }

}

HeadNav.less代码部分如下：

#HeadNav{
  height: 50px;
  background: #444;
  color: #fff;
  .nav-wrap{
    width:1200px;
    margin:0 auto;
    height:50px;
    box-sizing: border-box;
    .nav-logo-wrap{
      display: inline-block;
      font-size:26px;
      width: 26px;
      //height:50px;
      vertical-align: top;
      margin-left:12px;
      margin-top:4px;
    }
    .nav-list-wrap{
      width:1160px;
      display: inline-block;
      height:50px;
      text-align:right;
      .ant-menu{
        color: #fff;
        background: transparent;
        display: inline-block;
        height:50px;
      }
      .ant-menu-horizontal{
        border-color: transparent;
      }
      .ant-menu-horizontal .ant-menu-item, .ant-menu-horizontal .ant-menu-submenu{
        margin-top:0;
      }
      .ant-menu-horizontal{
        line-height:47px;
      }
    }
  }
}

然后在DefaultLayout.js中引入

/**
 * Created by webmxj on 2018/5/25.
 */
import React,{Component} from 'react';
import HeadNav from '../../common/HeadNav'
import './DefaultLayout.less'
export default class DefaultLayout extends Component{
    render(){
        return (
            <div id="DefaultLayout">
                <HeadNav/>
            </div>
        )
    }
}

最后打开localhost:3000我们就得到了一个想要的头部效果如下
这里写图片描述

头部做好之后再来加一条底部同样的方法新建一个组件
这里写图片描述

React+Ant.design 从零开始搭建个人博客实战教程02 —— 页面布局 公用头部尾部

猜你喜欢

React+Ant.design 从零开始搭建个人博客实战教程02 —— 页面布局公用头部尾部