博客的头部每个页面都一样，所以可以制作成一个组件。这样就可以保持每个博客的页面头部都是统一的，而且易于上线后的维护。博客头部还要能支持适配大部分终端，比如 PC、手机和平板。适配终端使用Ant Design提供的 24 格栅格化的技术进行布局。
通用 CSS 文件的编写
博客需要一个浅灰背景色，并且每个页面的背景色都是一样的，所以需要一个公共的css样式文件，在/styles文件夹下找到globals.css文件。以后只要每个页面都用到的 CSS 样式，都放入这个文件中。
然后写入下面的 CSS 样式，即把背景设置成浅灰色。
body{
background-color: #f6f6f6;
}
修改/pages/_app.js引入这个 CSS，这个文件引入后，每个页面都会起作用。
import App from 'next/app' import 'antd/dist/antd.css' import '../styles/globals.css' export default App
注意引入时的目录层次，如果引入错了会直接报错。这步完成后，此时你的背景颜色就变成了灰色。
Ant Design 的 24 格栅格化系统
接下来就可以编写公用的头部了，遇到的第一个问题是如何让界面适配各种屏幕。如果自己编写还是挺麻烦的，幸运的是可以直接使用Ant Design的轮子来制作。
Ant Design 做好了栅格化系统，可以适配多种屏幕，简单理解成把页面的分成均等的 24 列，然后进行布局。
需要对适配几个属性熟悉一下：
- xs:
<576px响应式栅格。 - sm：
≥576px响应式栅格. - md:
≥768px响应式栅格. - lg:
≥992px响应式栅格. - xl:
≥1200px响应式栅格. - xxl:
≥1600px响应式栅格.
先在/blog/components/目录下新建一个Header.js文件。 然后在/style/header.css中编写 CSS 文件，并在pages/_app.js中引入。注意：后面的组件 css 我们都在styles文件夹下建立，并在pages/_app.js中引入即可。
import App from 'next/app' import 'antd/dist/antd.css' import '../styles/globals.css' import '../styles/header.css' export default App
Header.js 文件
import React from 'react'
import {HomeOutlined,VideoCameraOutlined,ReadOutlined} from '@ant-design/icons'
import {Row,Col, Menu, Icon} from 'antd'
export default function Header() {
return (
<div className="header">
<Row type="flex" justify="center">
<Col xs={24} sm={24} md={10} lg={15} xl={12}>
<span className="header-logo"></span>
<span className="header-txt">专注前端开发,实战技巧分享。</span>
</Col>
<Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
<Menu mode="horizontal">
<Menu.Item key="home" icon={<HomeOutlined />}>
首页
</Menu.Item>
<Menu.Item key="video" icon={<VideoCameraOutlined />}>
前端教程
</Menu.Item>
<Menu.Item key="life" icon={<ReadOutlined />}>
随笔
</Menu.Item>
</Menu>
</Col>
</Row>
</div>
)
}
header.css 文件
.header{
background-color: #fff;
padding: .4rem;
overflow: hidden;
height: 2.8rem;
border-bottom:1px solid #ccc;
}
.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.6rem;
}
.ant-menu-item{
font-size:.7rem !important;
padding-left:1rem;
padding-right:1rem;
}
写完以后，可以把/Header.js文件引入到首页，看一下效果。
index.js 文件
import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
import Header from '../components/Header'
export default function Home() {
return (
<div>
<Head>
<title>Home</title>
</Head>
<Header />
<div><Button>我是按钮</Button></div>
</div>
)
}
效果如下：
