去年(2011)初有感於噗浪介面與我的網路生活習慣相當契合，為了提升噗浪生活的回憶與檢索的便利性以及增加雲端資料的保存性，我開始將噗浪資料部落格化。
首先我使用手動列表方式呈現，後來改用手動表格方式呈現。表格模式可以很直觀地呈現日期分界，我很喜歡，可惜無論是手動列表還是手動表格，要將噗浪資料製作成部落格文章都必須要相當費時、費工的動作。
科技始終來自人性，沒多久，去年中「噗浪備份」功能問世。噗浪備份是一套以網站檔案結構組成的資料，包含頁面、小圖、css樣式以及js檔，如果手邊有電腦在做網路伺服，把檔案直接放進網站即可成為相當完美的個人雲端噗浪備份。身為一般網路使用者的我沒有技術和財力架站，於是我複製噗浪備份其中頁面我要的部分直接貼進blogger文章編輯器的所見即所得模式中，製作由系統產生樣式的網路生活記，直接捨棄掉小圖、css樣式和js檔的部分，也就是捨棄了內建表情、生動的回應光箱和精美的介面。所幸文章樣式由blogger文章編輯器自動產生，足勘比擬CSS效果、相當精美，最重要的是相較於手動、使用噗浪備份既能夠更省時又能夠保留更多資料。
然而這樣的做法大量依靠blogger文章編輯器的所見即所得模式提供的轉換功能，噗浪備份頁面轉換成為部落格文章之後總是產生很巨大、很雜亂的HTML結構，維護困難，每次維護只能從頭再做一次轉換，而且每次轉換結果都不會完全一樣，穩定性差。細節上，點擊每噗回應都會導向錯誤連結，而且使用到外部圖庫時總是秀出連結網址，文章不易閱讀，都是不可忽視的問題。
為了改進維護和穩定性的問題並增加細節的掌控，這次我寫了一段JavaScript程式碼，以「噗浪備份原始資料的最小變動」和「通用於每次記錄」為原則撰寫，讓程式碼去完成基本的樣式設定並調整細節。做法上，只需要複製噗浪備份中的原始HTML（純文字）做一些小調整貼進blogger文章編輯器的HTML模式即可，所以HTML是固定的，其他所有的樣式設定和細節調整交給程式碼執行，如此文章的結構明確，維護也容易。這段程式碼因為還沒有使用在正式記錄上，我就隨便叫他pande的噗浪生活記.js beta 1.0。
<script type="text/javascript">var a=document.getElementById("plurk"); //取得噗浪備份a.getElementsByTagName("td")[0].style.display='none'; //不顯示導航var b=a.getElementsByTagName("td")[1].getElementsByTagName("div")[0].getElementsByTagName("div"); //取得每個噗for(i=0;i<b.length;i++){ //設定每噗樣式b[i].style.border='1px';b[i].style.borderBottomStyle='dotted';b[i].style.padding='5px';var bspan1=b[i].getElementsByTagName("span")[0]; //取得每噗動作區段switch(bspan1.className){ //設定動作樣式case 'qualifier q_is': bspan1.style.backgroundColor='#E57C43'; break;case 'qualifier q_says': bspan1.style.backgroundColor='#E2560B'; break;case 'qualifier q_needs': bspan1.style.backgroundColor='#7A9A37'; break;case 'qualifier q_hopes': bspan1.style.backgroundColor='#e05be9'; break;case 'qualifier q_feels': bspan1.style.backgroundColor='#2D83BE'; break;case 'qualifier q_thinks': bspan1.style.backgroundColor='#689CC1'; break;case 'qualifier q_wants': bspan1.style.backgroundColor='#8DB241'; break;case 'qualifier q_wishes': bspan1.style.backgroundColor='#5BB017'; break;case 'qualifier q_has': bspan1.style.backgroundColor='#777'; break;case 'qualifier q_loves': bspan1.style.backgroundColor='#B20C0C'; break;case 'qualifier q_hates': bspan1.style.backgroundColor='#111'; break;case 'qualifier q_asks': bspan1.style.backgroundColor='#8361bc'; break;case 'qualifier q_will': bspan1.style.backgroundColor='#B46DB9'; break;case 'qualifier q_was': bspan1.style.backgroundColor='#525252'; break;case 'qualifier q_had': bspan1.style.backgroundColor='#8C8C8C'; break;case 'qualifier q_likes': bspan1.style.backgroundColor='#CB2728'; break;case 'qualifier q_shares': bspan1.style.backgroundColor='#A74949'; break;case 'qualifier q_replurks': bspan1.style.backgroundColor='#3b8610'; break;case 'qualifier q_gives': bspan1.style.backgroundColor='#620E0E'; break;case 'qualifier q_wonders': bspan1.style.backgroundColor='#2e4e9e'; break;}bspan1.style.border='1px';bspan1.style.padding='2px';bspan1.style.color='white';bspan1.style.fontWeight='bold';}var c=a.getElementsByTagName("a"); //取得每個超連結for(j=0;j<c.length;j++){ //設定超連結樣式if(c[j].href.match("../plurks/")){ //如果有回應c[j].style.float='right';c[j].style.fontWeight='bold';c[j].href=c[j-1].href;c[j].getElementsByTagName("span")[0].innerText="回應";}else if(c[j].innerText.match(/\d{4}(-\d{2}){2}\s\d{2}(:\d{2}){2}/)){ //如果是噗浪定址c[j].style.fontSize='20%';}else if(c[j].className=="ex_link pictureservices"){ //如果是外連圖庫c[j].getElementsByTagName("img")[0].src='http://i.imgur.com/YAf7l.gif';c[j].lastChild.nodeValue='';}}var d=a.getElementsByTagName("img"); //取得每個圖片元素for(k=0;k<d.length;k++){ //設定圖片樣式if(d[k].className=="emoticon"){ //如果是內建表情d[k].style.display='none';d[k].insertAdjacentText("afterEnd",d[k].alt);}}</script>
Beta版只是個起頭，只要續繼做記錄，以後應該還會有很多機會修改內容。
- 用文字編輯器開啟噗浪備份中欲做記錄月份的網頁檔案，複製<body>到</body>的全部內容，貼進blogger文章編輯器的HTML模式中。
- 修改<body>和</body>標籤成為<div id="plurk">和</div>標籤，然後在最未尾貼上JavaScript程式碼，發表文章即可完成噗浪生活記錄。
沒有留言:
張貼留言