前言

在自己的网站上我们如果想把网页分享出去，只能通过复制链接的方式发给好友。这里将介绍如何使用百度官方提供的分享插件进行分享，在官网里已经找不到文档了，但插件还是能用的。

一、代码结构

分享代码可以分为三个部分：HTML、设置和js加载，具体代码如下

<!-- HTML代码 -->
<div id="share">
    <div class="bdsharebuttonbox" data-tag="share_1">
        <a class="bds_more" data-cmd="more">更多</a>
        <a class="bds_weixin" data-cmd="weixin"></a>
        <a class="bds_qzone" data-cmd="qzone" href="#"></a>
        <a class="bds_tsina" data-cmd="tsina"></a>
        <a class="bds_baidu" data-cmd="baidu"></a>
        <a class="bds_sqq" data-cmd="sqq"></a>
        <a class="bds_tieba" data-cmd="tieba"></a>
    </div>
</div>


<script>
    /* JS加载 */
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    
    /* 设置 */
    window._bd_share_config = {
        "common" : {
            "bdText" : '这是分享的标题',
            "bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',
            "bdPic" : "图片链接"",//分享的图像地址
            "bdStyle" : "1",//按钮样式
            "bdSize" : "32",//按钮大小
            "bdUrl" : 'https://www.baidu.com',//分享的地址
            "bdDesc":'给你的好友留一句话吧',
        },
        "share" : {},
    };
</script>

二、分享的媒体id对应表

通过更改html代码的class和data-cmd可以更改分享媒体，具体媒体id如下

三、效果展示

使用方式就是将这些代码复制到你的网页中，再进行一些设置即可。效果如图

点击图标即可进行分享

想要让图标更加的好看的话可以参考
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

四、Thymeleaf传值到JavaScript中和使用外部JS传值

​ 如果需使用外部引入js可看下方教程。

4.1 Thymeleaf传值到JS

1. js取得thymeleaf中的值首先要在script标签中加上 th:inline="javascript"

​ 2. 变量格式： [[${变量名}]]

<script th:inline="javascript" src="../static/js/share.js" th:src="@{/js/share.js}">
    var id = [[${blog.id}]];
    var img = [[${blog.firstPicture}]];
    var title = [[${blog.title}]];
</script>

4.2 使用外部JS传值

将值传给外部js的方式有很多种，这里就介绍一种。

​ 首先需在script标签中定义变量(如上方代码块)，定义好变量后需在外部js加上如下代码

var script = document.getElementsByTagName("script");
eval(script[script.length-1].innerHTML);

加上去之后就可以使用刚刚传进来的变量了。

share.js完整代码：

var script = document.getElementsByTagName("script");
eval(script[script.length-1].innerHTML);
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
window._bd_share_config = {
    "common" : {
        "bdText" : '安徒生的笔-博客',
        "bdComment" : title,
        "bdPic" : img,//分享的图像地址
        "bdStyle" : "1",//按钮样式
        "bdSize" : "32",//按钮大小
        "bdUrl" : 'http://www.atsdb.cn/blog/'+id,//分享的地址
        "bdDesc":'兄弟，分享一篇干货给你，赶紧领取',
    },
    "share" : {},
};