架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

帝国CMS集成百度分享,内容页添加分享功能

架构师小跟班 2020-06-24 前端别闹
先看看效果:1、将static文件夹放到网站根目录2、图标图片上传到样式目录,例如,/skin/menhu/images/3、添加css样式表到base.css文件中/www/wwwroot/upload/skin/menhu/css代码

先看看效果:

1、将static文件夹放到网站根目录

2、图标图片上传到样式目录,例如,/skin/menhu/images/

3、添加css样式表到base.css文件中

/www/wwwroot/upload/skin/menhu/css

代码如下:

/*分享share*/
.share {
    width: 331px;
    margin: 20px 0;
    text-align: center;
}

.share span {
    float: left;
    line-height: 44px;
    font-size: 16px;
    color: #828282;
}

.share b {
    margin-top: 20px;
}

.bdshare-button-style0-16 a {
    width: 36px;
    height: 44px !important;
    padding-left: 0 !important;
    display: inline-block;
    margin: 0 2px !important;
    cursor: pointer !important;
    background-size: 36px !important;
}

.share a.bds_sqq {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -130px;
}

.share a.bds_weixin {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -41px;
}

.share a.bds_qzone {
    background: url(../images/share.png) no-repeat;
    background-position: 0px -309px;
}

.share a.bds_tsina {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -220px;
}

.share a.bds_sqq:hover {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -86px;
}

.share a.bds_weixin:hover {
    background: url(../images/share.png) no-repeat;
    background-position: 0 3px;
}

.share a.bds_qzone:hover {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -265px;
}

.share a.bds_tsina:hover {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -176px;
}

.share a.bds_more {
    background: url(../images/share.png) no-repeat;
    background-position: 0 -487px;
    margin: 0;
    padding: 0;
    width: 44px;
}

4、修改内容页模板,模板中插入html代码,至于插在什么位置,看个人喜好。

比如我喜欢放到页首位置:

内容如下:

<!--内容页分享 样式base.css,其他文件:/www/wwwroot/upload/static-->
<div class="share">
	<span>分享到:</span>
	<span class="bdsharebuttonbox">
		<a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a>
		<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
		<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
		<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
		<a href="#" class="bds_more" data-cmd="more"></a>
	</span>
	<script>window._bd_share_config = {
		"common": {
			"bdSnsKey": {"tsina": ""},
			"bdText": "",
			"bdMini": "2",
			"bdMiniList": ["qzone", "tsina", "weixin", "tqq", "tieba", "douban"],
			"bdPic": "",
			"bdStyle": "0",
			"bdSize": "16"
		}, "share": {}
	};
	with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://www.jiagou1216.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
</div>

其中:

with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://www.jiagou1216.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>

这行代码中的域名需要改成你自己的。


网盘链接:

链接:https://pan.baidu.com/s/1BWq7YOahSHmJPwLqmAFdCw 

提取码:d2av

文章评论