P06：博客的通用广告组件开发

1. 编写 Advert.js 文件
2. 编写 advert.css 文件
3. 引入首页查看样式

本文编写的通用广告组件和上篇博主介绍组件几乎一样，就是写写基本结构，然后形成组件，引入到主页里查看效果。但是这个广告组件和博主自我介绍组件我都准备用静态来作，就是没有后台配置。这样作的好处是节省掉每次和数据库的交互和后台的交互，提高博客性能。因为博客有时候并发是很大的，所以能节省的资源一定要节省。

编写 Advert.js 文件

在/components文件夹下新建立一个Advert.js文件，然后写入下面的代码:

export default function Advert(){
    return (
        <div className="ad-div comm-box">
          <div><img src="https://media.mybj123.com/wp-content/uploads/2020/11/1606374292-ffcccede7d13f6e.jpg" width="100%" /></div>
        </div>
    )
}

编写 advert.css 文件

在/stykes文件夹下建立一个advert.css文件，写入下面的代码:

.ad-div{
    margin-top: .5rem;
}
.ad-div div{
    border-radius: .3rem;
    margin-bottom: .2rem;
    overflow: hidden;
}

引入首页查看样式

写完后在index.js中用import引入Advert组件，并使用就可以了。

import Advert from '../components/Advert'

然后在index.js中使用

<Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
  <Author />
  <Advert />
</Col>

引入后可以在浏览器中进行预览，根据查看效果，进行微调就可以了。实战就是很多东西都是重复的，也是一个从学到会的过程。