« 大宝二宝小记搞定微信分享图标问题 »

增加分享功能

        分享功能实现步骤包括去百度分享申请分享条代码和把代码融入进Zblog里,第一步简单,第二步复杂但有意思。
        第一步:分享条有很多网站提供,我选择了百度,网址http://share.baidu.com/,一直认为在互联网企业里,百度做的还是比较专业且经用,很多IT企业运营不了多长时间,稳定且长命应作为首选。申请下来的代码如下,已经经过整理,加入了上下分界提示、在第2段<div>标签里增加了style="float:right;width:200px",这可是经过反复测试后找到一种让div控件右对齐的实现方法。
<!--以下为2014.9.18加入的百度收藏条功能-->
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

<div class="bdsharebuttonbox" style="float:right;width:200px">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
</div>
<!--以上为2014.9.18加入的百度收藏条功能-->
        第二步:接下来就是把上面这段东西加入到Zblog的文件体系里去了,先在blog/POST/里找了一篇HTML文档进行试验,经反复观察发现加进</div>和<ul class="msg trackback">之间最为理想;后面就是把这段东西塞到目标模板文件里了,这个过程就比较麻烦了,先是找到blog/THEMES/default/TEMPLATE/single.html,研究了一会儿,发现要找的不是这个,里面发现了
<div id="divMain">
<#template:article-single#>
</div>
这个提供的信息,遂去找blog/THEMES/default/TEMPLATE/b_article-single.html文件,在这里成功找到了</div>和<ul class="msg trackback">代码段,塞进去之后,测试成功,但在这之前还找到了blog/THEMES/default/TEMPLATE/b_article_trackback,试图把大段代码塞进这个文件的开头,但测试不成功,应该是加载不了的问题,文件间加载并不是把文件里的内容全部拷贝,而是要视里面的标签段情况而定。以上就是此番增加分享功能总结下来的步骤和经验,留存备查。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Walle Build 100427

Copyright 2010-2018 FongPlay Reserved.