页面布局

页面布局

我们来看一下项目的每个页面的布局

Home

Edit

Display

Login

其中Home, Display, Edit都是下面这样的布局

而Login的布局是

所以我们抽离出布局组件，Home，Edit,Display三者的布局抽离为BasicLayout，而Login的布局抽离为LoginLayout组件，注意到他们的Heder都是相同的，所以我们把Header抽离为一个公共的组件。

Header

在src下新建components目录，在其中新建Header文件夹，在其中新建index.jsx和index.module.css。index.jsx的内容如下

import React from 'react'
import styles from './index.module.css'
function Header(props) {
    const toEdit = (e) => {
        e.preventDefault()
    }
    const toHome = (e) => {
        e.preventDefault()
    }
    return (
        <div className={styles.header}>
            <div className={styles.nav}>
                <ul>
                    <li><a href="/home" onClick={toHome}>首页</a></li>
                    <li><a href="/edit" onClick={toEdit}>写博客</a></li>
                </ul>
            </div>
            <div className={styles.desc}>
                Coder
            </div>
        </div>
    )
}
export default Header

index.module.css中的内容为

.nav {
    width: 100%;
    height: 100px;
    position: relative;
}
.nav ul {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
.nav ul li {
    list-style: none;
    float: left;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding-top: 5px;
}
.nav ul li a {
    text-decoration: none;
    color: white;
    font-family: Consolas, "楷体";
}
.nav ul li:hover {
    border-bottom: 1px solid #FFF;
    box-shadow: 0 0 10px #FFF inset;
}
.desc {
    width: 100%;
    height: 100px;
    font-size: 40px;
    line-height: 100px;
    color: white;
    font-family: Consolas, "楷体";
}

上面的内容想必还是很容易理解的，其中Header中的两个a标签的点击事件均没有处理，这两个a标签是用于做路由跳转用的，等用到在回过头来补充。

BasicLayout

在src下新建layouts文件夹，在其中新建文件夹BasicLayout，在BasicLayout中新建index.jsx和index.module.css，其中index.jsx的内容为

import React from 'react'
import styles from './index.module.css'
import Header from './../../components/Header'
function BasicLayout(props) {
    const { children } = props;
    return (
        <div className={styles.box}>
            <div className={styles.container}>
                <Header />
                <div className={styles.main}>
                    <div className={styles.content}>
                        {children}
                    </div>
                    <div className={styles.aside}>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default BasicLayout

其中index.module.css中的内容为

.box {
    width: 100%;
    background: #d8e2eb url(./../../assets/img/bg.jpg) no-repeat top center;
    min-height: 100vh;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}
.main {
    display: flex;
}
.content {
    flex: 3;
    margin-right: 20px;
}
.aside {
    flex: 1;
}

这里要用到背景图片，我们在src下新建assets文件夹，然后新建img，在其中放入背景图片，背景图片在这里

接在src下新建common.css，以消除内外边距，设置字体

* {
    margin: 0;
    padding: 0;
}
div {
    font-family: Consolas, "楷体";
    box-sizing: border-box;
}

现在我们在src/index.js中引用该布局看看效果

import React from 'react';
import ReactDOM from 'react-dom';
import RichText from './pages/RichText';
import BasicLayout from './layouts/BasicLayout'
import './common.css'
ReactDOM.render(<BasicLayout>
                  <RichText />
                </BasicLayout>, 
                document.getElementById("root"));

如下：

LoginLayout

在layouts下新建LoginLayout文件夹，在LoginLayout中新建index.jsx和index.module.css。有了BasicLayout的经验，代码的内容不必解释，直接上代码。index.jsx

import React from 'react'
import styles from './index.module.css'
import Header from './../../components/Header'
function LoginLayout(props) {
    const { children } = props;
    return (
        <div className={styles.box}>
            <div className={styles.container}>
                <Header />
                <div className={styles.main}>
                    {children}
                </div>
            </div>
        </div>
    )
}
export default LoginLayout

index.module.css

.box {
    width: 100%;
    background: #d8e2eb url(./../../assets/img/bg.jpg) no-repeat top center;
    min-height: 100vh;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}
.main {
    width : 300px;
    margin: 0 auto;
}