I. Code structure

Sharing code can be divided into three parts: HTML, settings and js loading. The specific code is as follows

<!-- HTML Code -->
<div id="share">
    <div class="bdsharebuttonbox" data-tag="share_1">
        <a class="bds_more" data-cmd="more">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 Load */
    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)];
    
    /* Set up */
    window._bd_share_config = {
        "common" : {
            "bdText" : 'This is the title of sharing.',
            "bdComment" : 'I'm General Sharing Settings,It appears to be sent to QQ Description in Friends',
            "bdPic" : "pictures linking"",//Shared image addresses
            "bdStyle" : "1",//Button style
            "bdSize" : "32",//Button size
            "bdUrl" : 'https://www.baidu.com', //Shared Address
            "bdDesc":'Leave a message for your friend',
        },
        "share" : {},
    };
</script>

II. Shared Media id Correspondence Table

Shared media can be changed by changing the class and data-cmd of html code. The specific media id is as follows

3. Effect demonstration

The way to use it is to copy the code into your web page, and then make some settings. The effect is as follows

Click on the icon to share.

If you want to make the icon look better, you can refer to it.
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

IV. Thymeleaf Passing Values to JavaScript and Using External JS Passing Values

4.1 Thymeleaf to JS

1. js gets the value in thymeleaf by first adding th:inline="javascript" to the script tag

2. Variable format: [${variable name}]

<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 Passing Values Using External JS

There are many ways to pass values to external js, and here's one.

First, you need to define variables in the script tag (such as the code block above). After defining variables, you need to add the following code to the external js

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

Add in and you can use the variable you just passed in.

share.js complete code:

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" : 'Andersen's Pen-Blog',
        "bdComment" : title,
        "bdPic" : img,//Shared image addresses
        "bdStyle" : "1",//Button style
        "bdSize" : "32",//Button size
        "bdUrl" : 'http://www.atsdb.cn/blog/'+id,//shared address
        "bdDesc":'Brother, share a dry article with you and get it right away.',
    },
    "share" : {},
};