2008年11月3日星期一

版面修改筆記

張貼者： 於 下午12:14

最新文章模組
作者：http://abintech.azhai.org/2008/01/blog-post.html

Code
開始修改！在範本、網頁元素裡，請加入一個新的網頁元素 (HTML/Javascript)、或是直接編輯原有模組，直接塞入以下程式碼：
  1. <div id="newPosts">
  2. <noscript>failed!<br/>Javascript not supported here!</noscript>
  3. </div>
  4. <script>
  5. var nPostStartIndex = 6;
  6. var nPostShow = 10;
  7. function showRecentPosts(nIndex) {
  8. if (!nIndex)
  9. nIndex = nPostStartIndex;
  10. var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
  11. var script = document.createElement('script');
  12. document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
  13. script.setAttribute('src', sFeedURL);
  14. script.setAttribute('type', 'text/javascript');
  15. document.documentElement.firstChild.appendChild(script);
  16. }
  17. function generatePosts(json) {
  18. function compareentry(a,b) {
  19. order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
  20. return 0-order;
  21. }
  22. var sHTML = '<ul>';
  23. var sortentry = json.feed.entry.sort(compareentry);
  24. var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  25. var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
  26. for (var i = 0, Post; Post = sortentry[i]; i++) {
  27. if (i >= nPostShow)
  28. break;
  29. var title = Post.title.$t;
  30. var j = 0;
  31. while (j < Post.link.length && Post.link[j].rel != "alternate")
  32. j++;
  33. var link = Post.link[j].href;
  34. var timestamp=Post.published.$t.substr(0,10);
  35. sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  36. }
  37. sHTML += '</ul>';
  38. sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
  39. document.getElementById('newPosts').innerHTML = sHTML;
  40. }
  41. function generatePostLink(nFetch, nIndex, nTotalPost) {
  42. var bOld = (nFetch > nPostShow);
  43. if (bOld) nFetch = nPostShow;
  44. var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'.&nbsp;&nbsp;';
  45. if (nIndex > nPostStartIndex)
  46. sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">&lt;&lt;</a>&nbsp;&nbsp;';
  47. if (bOld)
  48. sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">&gt;&gt;</a>';
  49. sResult += '</p>';
  50. return sResult;
  51. }
  52. </script>
  53. <script language="javascript">showRecentPosts();</script>

要使用本 Hack 前，同樣地請注意以上標紅的那幾行，照個人需求修改。變數PostStartIndex 是此模組要顯示的文章是從「第幾篇」開始，像我首頁顯示五篇文章，起始文章就從 6 開始，要從頭開始請設成 1 （尤其你用來顯示最新回應或其他 Blog 聯播時）。而 nPostShow 是該模組一次顯示「幾篇文章」的數量變數，預設是十篇。另外，在等待讀取的過程，以上範例我是用文字 "Loading" 顯示，如果想和我一樣改成動畫（其實是一個動態的 GIF 圖檔，有興趣可以去這個網站取用，多是免費授權使用的），請把範例程式碼裡第十四行 'Loading ...' 改成你圖檔連結的 HTML 程式碼就行了。同樣的，切換上下頁的連結，範例中是用 << >> 箭頭，當然也可以改成你喜歡的圖片。

-------------------------------

三步驟把blogger的標籤,改造成標籤雲(Tag Cloud)
作者：http://skyvee.net/2007/05/bloggertag-cloud.html

1. 先找到 ]]>
將以下程式碼,貼在 ]]> 之前.


/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0
!important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. 找到 </head>
在 </head> 之前, 貼以下程式碼.


<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 0;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

這一段程式碼是可以用來自己調整顏色, 字體大小等數值...
3. 找到這一列程式碼 (注意, 後面是 /> 結束哦!)


<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>
用以下程式碼取代它.


<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

0 意見:

張貼意見

訂閱： 張貼意見 (Atom)