博客增加二維碼功能

　　我們經常可以看到博客園，有些博客的界面弄得很炫，還有好多功能的。到底是怎么弄得呢，本次就通過一個簡單實用博客插件，來提升一下博客的逼格。

　　來個引言先

確實現在已經是移動時代了，在移動設備上閱讀慢慢會成為主流，網站如果沒有便捷的方式讓用戶在移動設備閱讀的話還真有點落伍，於是想想就做個“掃碼閱讀”的功能吧。其實很簡單，就是將網址生成二維碼就行了。

　　本次用到的兩個js庫是jquery庫和jquery.qrcode庫。至於這個庫怎么用就不說了，js還是比較簡單的。直接點，開始流程。

0.權限

　　首先，你要有博客園可以添加JS的權限，默認是沒有的，要跟管理員申請。（已經好久了，不知道現在怎么弄了）

1.博客園的設置頁面

　　進入博客園的個人博客的后台編輯界面點擊設置選項。

2.增加代碼

　　下面有四個比較大的代碼填寫框，分別是 頁面定制css代碼，博客側邊欄(支持HTML代碼)，頁首HTML代碼，頁腳HTML代碼，只要有權限，代碼在哪里寫都是可以的。

　　這次我寫在頁腳處，代碼如下

<script src="http://apps.bdimg.com/libs/jquery/1.6.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://apps.bdimg.com/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js" type="text/javascript" ></script>

<script type="text/javascript">
var qr_ok=1;
function Display(){
    document.getElementById("qr_bg").style.display="none";
}
function Show(PositionLeft,PositionTop){
    document.getElementById("qr_bg").style.display="block";
    document.getElementById("qr_bg").style.left=PositionLeft+80;
    document.getElementById("qr_bg").style.top=PositionTop;

    qr();
}
function qr(flag)
{
　　if(qr_ok==0)
   　　return ;
　　qr_ok=0;
　　jQuery.noConflict();
　　jQuery("#qr_bg").qrcode({ 
　　　　render: "canvas", //table方式 
　　　　width: 100, //寬度 
　　　　height:100, //高度 
　　　　text: document.location.href //任意內容 
　　}); 
}
</script>

 　　然后就是那個使用的代碼

<div id="qr_bg" onmouseover="Show()">點擊顯示</div>

　　沒錯就這一句,我把這一句寫在 博客側邊公告 那個對應的代碼框里面就有如下效果了。

　　　

　　這樣就可以實現在左邊顯示一個當前頁面特定的二維碼了，如果你對當前頁面比較感興趣，想在手機瀏覽器中打開，就掃一掃，很方便的。

　　按照一般的思路，這個二維碼放在這里就不太好了。一般我們讀博客，都是往下讀的。讀到末尾，覺得好，要發到手機上的時候，應該是在博客的結尾處，所以我把二維碼寫在了博客的結尾處。注意不是最底邊。

　　我是寫在簽名處。由於博客系統不是自己的，所以增加一個小小的功能都很麻煩。好多都是要通過曲線的方式進行實現的。

　　

　　在簽名處寫上這些，就可以實現效果了。這個框中是不能有JS代碼的，不過在一個標簽里面寫個事件還是可以的。（逃

<table style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微軟雅黑; font-size: 13px;"
    onmousemove="Show(this.offsetLeft,this.offsetTop);" >
    <td >
        作者：<a href="http://www.cnblogs.com/wunaozai/" target="_blank">無腦仔的小明</a> <br>
        出處：<a href="http://www.cnblogs.com/wunaozai/" target="_blank">http://www.cnblogs.com/wunaozai/</a> <br>
        本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 <br>
        如果文中有什么錯誤，歡迎指出。以免更多的人被誤導。 <br>
    </td>
    <td align="right">
        <div id="qr_bg"></div>
    </td>
</table>

　　

　　現在我的每一篇博客文章下方都有生成QR二維碼了，方便博客交流和傳播。

3.說點什么

　　不過現在這個功能不怎么實用了，現在好多瀏覽器都自帶這個功能了，現在實現好像並沒有什么卵用。

　　

　　

　　還有關於兩個庫的引用，這里盡量引用靜態公共庫，一開始我是上傳兩個js文件到博客園中的。

　　但是后來發現每次請求都很慢，應該是博客園的問題，本來我以為里面的JS不能引用外部的js，沒想到是可以的，那就沒話說，直接使用外部的靜態庫了，減少一點博客園的請求也好。這里使用的是百度的靜態庫。具體網址為 http://cdn.code.baidu.com/ 百度的這個東西還是很方便的。

 

　　參考資料:

　　http://blog.csdn.net/smartsmile2012/article/details/17584953
　　http://www.nowamagic.net/librarys/veda/detail/2634

　　本文地址: http://www.cnblogs.com/wunaozai/p/4536817.html