P02:编写博客公用头部并生成组件

博客的头部每个页面都一样,所以可以制作成一个组件。这样就可以保持每个博客的页面头部都是统一的,而且易于上线后的维护。博客头部还要能支持适配大部分终端,比如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>
  )
}

效果如下:

编写博客公用头部并生成组件

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P02:编写博客公用头部并生成组件

发表评论

提供最优质的资源集合

立即查看 了解详情