2008年1月28日

移植Neo中的Recent Posts及Label Post

有聽過「Neo」嗎?不要跟我說就是駭客任務的Keanu Reeves;Neo是由Ramani所設計的Blogger Template,特色就是利用AJAX和JSON來進行頁面的讀取,而不用進行頁面的轉換,節省讀取的時間,想知道到底有多快的不妨到Hackosphere去試試看。

但是Ramani為了節省讀取的時間,拿掉了很多文章區塊的Tag,這也是我不想直接套用的原因,不過Recent Posts及Label Post到是可以很輕鬆的移植過來,至於文章區塊的移植就必須好好研究一下他的JS。

想要移植Recent Posts及Label Post,必備的就是Neo.js(請按右鍵–另存新檔),因為我只要一小部份的功能,所以修改js是必須的,待有時間好好研究一下這支js,知道如何套用文章區塊後,其他的功能還是能用的到。

首先利用任何編輯器(記事本、Dreamweaver…)開啟所下載的Neo.js,尋找
disp = disp + '<a href="javascript:updatePost(' + i + ');">' + entry.title.$t + '</a><br/><br/>';
以下列程式取代disp = disp + '<a href="' + postPermalink[i] + '">' + postTitle[i] + '</a><br/>';儲存後,將Neo.js傳至網路空間(例如:Google Page Creator),並將下列程式片段加載到Template中的</head>上方:
<script language='javascript' src='http://joshnotepage.googlepages.com/Neo.js'/>
<!-- configurable parameter to control the number of posts in the second column of Neo -->
<script language='javascript'>
var numPosts = 10;
</script>
上方紅色字的程式位址請務必要改,因為上面那是我編的,而“numPosts = 10”則是要在Recent Posts所顯示的文章數,這裡的設定是10篇,可以自行設定。

接著開啟Template(記得展開小裝置範本),尋找:
<a expr:href='data:label.url'><data:label.name/></a>
改為:<a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>
接來將下方程式片段放到任一個</b:widget>標籤之後,<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<DIV id='LabelDisplay'>
<DIV id='LabelTitle'>
</DIV>
<DIV class='widget-content' id='LabelPosts'>
<SCRIPT language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', &#39;&#39;);</SCRIPT>
</DIV>
</DIV>
</b:includable>
</b:widget>
儲存Template後,你就會擁有Neo中的Recent Posts及Label Post功能了。我之所以會想把這二個功能做移植,主要還是看上其中的“文章導覽切換”,當同一Label的文章超過你所設定顯示的篇數,還能以“Newer”和“Older”來做切換,這是一般Recent Posts所沒有的。