当前位置: 首页 > Web前端 > HTML

如何在网站上快速创建分享按钮?推荐一个JavaScript组件

时间:2023-04-02 16:38:31 HTML

记得以前建站的时候,遇到前端分享按钮,就会去百度分享或者jiathis在线生成一个分享代码。掉线;在github上找了半天,发现没有什么特别合适的,于是想着自己做一个组件。先附上地址https://github.com/slince/social-share.js主题风格考虑到大众的需求,提前制作了五个风格主题;最后两种深色风格更适合冷色或冷色网站;当然你也可以自定义主题,但是自定义主题需要你自己写css样式。默认样式为方形样式,圆形样式为深方形和深圆形。安装接下来说一下安装。考虑到大众的需求,支持以下安装方式:通过npm和yarn安装:推荐这种方式,现在前端工程已经很流行了。与过去混乱的开箱即用时代不同,使用npm可以轻松管理您的前端代码。npm用户执行:$npminstallsocial-share-button.js--saveyarn用户执行$yarnaddsocial-share-button.js通过脚本导入:当然也支持传统脚本标签引入的功能,去https://github从.com/slince/social-share.js/releases接口下载最新版本,将dist目录下的文件复制到你的项目中,然后通过script和link标签导入js和css文件即可使用最简单的用法importSocialSharefrom'social-share-button.js';//如果通过脚本标签导入则不需要这一步newSocialShare('.social-share-container');自定义主题newSocialShare('.social-share-container',{theme:'square'});自定义分享参数newSocialShare('.social-share-container',{//定义常用分享参数title:'百度搜索',url:'http://www.baidu.com',summary:'一个中文搜索网站',image:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',//单独定义微博Share参数,其他同weibo:{title:'网易',url:'http://www.qq.com',摘要:'网易传送门',图片:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',}});关闭指定按钮newSocialShare('.social-share-container',{facebo好的:假的,推特:假的});对于某些情况,可以查看example目录下的例子:希望这个组件能帮到你,欢迎大家pr,欢迎star