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

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

编写 Advert.js 文件

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

export default function Advert(){
    return (
        <div className="ad-div comm-box">
          <div><img src="https://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>

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

以上关于P06：博客的通用广告组件开发的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。