当前位置：码云笔记 > 前端 > React.js教程 > P02：编写博客公用头部并生成组件
码云码云 React.js教程

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

AI 概述
博客的头部每个页面都一样，所以可以制作成一个组件。这样就可以保持每个博客的页面头部都是统一的，而且易于上线后的维护。博客头部还要能支持适配大部分终端，比如 PC、手机和平板。适配终端使用Ant Design提供的 24 格栅格化的技术进行布局。 通用 CSS 文件的编写 博客需要一个浅灰背景色，并且每个页面的背景色都是...

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

效果如下：

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

以上关于P02：编写博客公用头部并生成组件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P02：编写博客公用头部并生成组件

码云 SVIP

分享到：

相关推荐

发表回复