前言

在自己的網站上我們如果想把網頁分享出去，只能通過複製鏈接的方式發給好友。這裡將介紹如何使用百度官方提供的分享插件進行分享，在官網裡已經找不到文檔了，但插件還是能用的。

一、代碼結構

分享代碼可以分為三個部分：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" : {},
};