在我編寫文章列表頁代碼的時候，想實現每一條文章都有一個分享按鈕，此處用到百度分享。百度分享官網：http://share.baidu.com/code/advance。
官網給出的完整代碼只適合分享單個頁面，顯然不符合我的需求。仔細閱讀文檔之后，發現在通用設置項的解析里有這么一項：

有了這項設置，我們可以很容易地改變window._bd_share_config 里的設置。
步驟：
1、設置a元素的屬性（data-id,data-title）方便獲取對應鏈接的值。
2、聲明全局變量。
3、為每個.bdsharebuttonbox a綁定mouseover事件，利用該事件來配置id跟title。
4、配置window._bd_share_config的common屬性，利用onBeforeClick來進行動態配置。
5、引入必須要的js。
具體代碼：

//這里是一個for循環 {for ....} <div class="fl ml10 bdsharebuttonbox" data-tag="share_1"><a class="bds_qzone" data-cmd="qzone" href="#" data-id="{$t[itemid]}" data-title="{$t[title]}"></a><a class="bds_tsina" data-cmd="tsina" data-id="{$t[itemid]}" data-title="{$t[title]}"></a> </div> {/for} <script>//聲明全局變量var shareId = "",title='';//全局變量賦值，便于后邊更改配置$(function () {$(".bdsharebuttonbox a").mouseover(function () {shareId = $(this).attr("data-id");title = $(this).attr("data-title");});});function SetConf(cmd, config) { if (ShareId) {config.bdUrl = "https://www.xxx.com/news/" + shareId + '.html';config.bdText = title;}return config;}window._bd_share_config = {common : {onBeforeClick:SetConf},share : [{"bdSize" : 12}],slide : [{bdImg : 0,bdPos : "right",bdTop : 100}],//設置了這一項，頁面右邊會出現一個分享的浮窗，該浮窗只能分享當前設置的bdUrlimage : [{viewType : 'list',viewPos : 'top',viewColor : 'black',viewSize : '12',viewList : ['qzone','tsina','huaban','tqq','renren']}],selectShare : [{"bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']}]}//以下代碼是必須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)]; </script>

為了方便使用，寫了一個簡單的jquery插件：

(function ($) {$.fn.share = function (options) {var settings = {text: '',url:''};if (options) {$.extend(settings, options);}window._bd_share_config = {common : { bdText:settings.text, bdUrl:setting.url },share : [{ "bdSize" : 16 }],} }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)]; })(jQuery)

使用方法

<script type="text/javascript" src="share.js"></script> <script type="text/javascript">$(".bdsharebuttonbox").share({title:'{$title}',url:'{$linkurl}'}); </script>

總結

以上是生活随笔為你收集整理的实现单个页面，多个百度分享（动态修改百度分享链接）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。