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>
引入后可以在浏览器中进行预览,根据查看效果,进行微调就可以了。实战就是很多东西都是重复的,也是一个从学到会的过程。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06:博客的通用广告组件开发
码云笔记 » P06:博客的通用广告组件开发