码云 React.js教程 2020-12-18

P03：博客首页主体的两栏布局

文章目录隐藏

对公用头部的微调
编写首页的左右两列布局
其他页面的大结构复制

我们的博客主体分为左右两栏布局，左边是主要展示的是文章列表，右边是个人信息和一些广告的东西。并且也是在不同的终端中有不同的表现。本文我们先制作出两栏布局。

对公用头部的微调

上篇完成了公用头部的编写，但是发现公用头部还是不那么的好看，特别是在 2K 屏下，显得太小气了。所以先对公用头部的 CSS 进行调整。打开header.css文件，改成下面，代码的样式。

.header{
    background-color: #fff;
    padding: .4rem;
    overflow: hidden;
    height: 3.2rem;
    border-bottom:1px solid #eee;
}
.header-logo{
    color:#1e90ff;
    font-size: 1.4rem;
    text-align: left;
}
.header-txt{
    font-size: 0.6rem;
    color: #999;
    display: inline-block;
    padding-left: 0.3rem;
}
.ant-meu{
    line-height: 2.8rem;
}
.ant-menu-item{
    font-size:1rem !important;
    padding-left:1rem;
    padding-right:1rem;
}

对屏幕的适配我们也作一下对应的调整，把适配参数配置成如下参数:

logo 部分

xs={24} sm={24} md={10} lg={15} xl={12}

Menu 部分

xs={0} sm={0} md={14} lg={8} xl={6}

编写首页的左右两列布局

可以看到博客是分为左右两列布局的，而且也是适配各终端的，有了上篇文章的经验，我们得知，可以用Row和Col组件来完成。

index.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
          左侧
        </Col>

        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          右侧
        </Col>
      </Row>
    </div>
  )
}

CSS 样式写在公用的comm.css里，代码如下:

.comm-left{
  background-color: #FFF;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;
}
.comm-right{
  background-color: #FFF;
  margin-left: .5rem;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;

}
.comm-main{
  margin-top: .5rem;
}

其他页面的大结构复制

因为博客的列表页、详细页都采用了这种页面的总体形式，所以我们在 Pages 目录新建list.js和detailed.js文件，然后把index.js代码复制到里边，并进行简单的修改。

list.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'
const List = () => (
  <>
    <Head>
      <title>List</title>
    </Head>
    <Header />
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
        左侧
      </Col>

      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
        右侧
      </Col>
    </Row>
 </>
)

export default List

detailed.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'
const Detailed = () => (
  <>
    <Head>
      <title>Detailed</title>
    </Head>
    <Header />
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
        左侧
      </Col>

      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
        右侧
      </Col>
    </Row>
 </>
)

export default Detailed

以上代码就是完成了博客的整体结构，并且是统一的。效果如下