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

Posted 2022-01-10 wgchen~

React Hooks+Laravel 前端博客实战

• 阐述
• 通用CSS文件的编写
• Ant Design 的24格栅格化系统
• • `blog\\pages\\_app.js`
  • `blog\\components\\Header.js`
  • blog\\styles\\header.css
  • `blog\\pages\\index.js`
• 预览效果

阐述

博客的头部每个页面都一样，所以可以制作成一个组件。

这样就可以保持每个博客的页面头部都是统一的，而且易于上线后的维护。

博客头部还要能支持适配大部分终端，比如PC、手机和平板。适配终端使用 Ant Design 提供的24格栅格化的技术进行布局。

通用CSS文件的编写

博客需要一个浅灰背景色，并且每个页面的背景色都是一样的，所以需要一个公共的css样式文件，在 /styles 文件夹下找到 globals.css 文件。

以后只要每个页面都用到的CSS样式，都放入这个文件中。<