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

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

编写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>

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

博客的通用广告组件开发

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

发表评论

提供最优质的资源集合

立即查看 了解详情