博客園裡大家都分享了很多的有用知識,看到好的代碼,總想拿到手上去試一下,然後慢慢體會!如果是展示一段完整能運行的代碼,若能給讀者提供一個【運行代碼】的按鈕,就方便多了!前兩天開通了博客園的JS許可權(發郵件到[email protected]可以申請開通),今天先拿這個試了一下手,先來體驗一把吧: ...
博客園裡大家都分享了很多的有用知識,看到好的代碼,總想拿到手上去試一下,然後慢慢體會!如果是展示一段完整能運行的代碼,若能給讀者提供一個【運行代碼】的按鈕,就方便多了!前兩天開通了博客園的JS許可權(發郵件到[email protected]可以申請開通),今天先拿這個試了一下手,先來體驗一把吧:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>為行博客園中的代碼添加一個運行代碼按鈕</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
點右上方的按鈕試試看吧!沒錯,在一個新視窗中正確的顯示了Hello, world!下麵來說一下實現的步驟:
【情況分析】
博客園裡正常插入的代碼是由一個這樣的大致結構組成的,如下所示:
<div class="cnblogs_code"> <pre> //這裡是你的代碼 //不過這段代碼是經過cnblogs編輯器重新組織的一段html代碼 </pre> </div>
只要能夠獲得這個cnblogs_code下pre里的內容,並將這一段內容輸出到一個新的視窗中,目標基本就實現了。這個實現的方法很簡單,直接用jQuery就可獲得,代碼如下:
var code = $('.cnblogs_code').text(); //註意這裡不要用html(),否則你得到的將是一段cnblogs編輯器重組後的html代碼
如此,基本的思路便出來了:
1)在每一段代碼區後面自動添加一個按鈕,這樣就不用手動去添加代碼按鈕了。看到有些博客朋友是手動添加按鈕和增加一個textarea來放入代碼實現的,這並不科學。
2)為該按鈕綁定動作,點擊時運行對應的代碼片斷。
3)有些代碼片斷不想添加運行代碼按鈕怎麼辦?我們只要手動為每一個代碼斷片增加一個can_run的className(進入到編輯的html模式下添加給代碼區域一個can_run即可),然後在JS中只獲取can_run里的代碼,而不是cnblogs_code下的代碼。如下圖所示:
【JS代碼的實現】
因為博客園頁面自動引入了jQuery,那麼接下來的實現我全部用jQuery來操作,實現代碼如下:
$(function() { /* 獲得整個頁面可被運行的代碼片斷*/ var code = $('.can_run'); /*為每個can_run的代碼區域添加按鈕並綁定事件*/ code.each(function() { var button = $('<button class="runcode">運行上面的代碼</button>'), //按鈕 p = $('<p style="text-align:right;"></p>'), //按鈕加入到段落中 $this = $(this); //保存當前代碼區域的引用 /*組織結構,併在can_run之後添加這個結構*/ p.append(button); $this.after(p); /*為當前代碼片段對應的按鈕綁定點擊事件*/ button.on('click', function() { var win = window.open('', '_blank', ''); //開啟新視窗 win.document.write( $this.text() ); //向新視窗輸出內容 }); }); });
【這個JS代碼放哪?】
1、直接將這段JS保存到本地,然後上傳到你的博客園後臺。【操作路徑:管理 >> 文件 >> 選擇文件並上傳】
2、在博客設置裡加入對這個JS文件的引用【操作路徑:管理 >> 設置 >> 頁首HTML代碼】
<script src="你上傳的js文件位置"></script>
【接下來做什麼?】
接下來,你只要像往常一樣將代碼插入到文章中即可,如果有需要提供運行的代碼片斷,直接進入HTML模式,給該片斷加一個can_run的className值即可。這個實現並不是複雜的邏輯,但確實能給我們帶來一定的方便性。