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>

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

博客的通用广告组件开发

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06:博客的通用广告组件开发

发表回复