當文章數目為numPosts的倍數時

剛很無聊的又修掉一個小小的小bug。

右邊RecentPost那欄，應該在當總文章數大於目前要顯示的文章數(numPosts)時，顯示"下一頁"的符號提供切換。但根據原本的設計，如果目前的文章數恰好等於numPosts，或是numPosts的倍數，則也同樣會出現"下一頁"的按鈕。

以下以numPosts=10為例。比如目前我的blog上面分類為lyric的文章只有10篇，那當我按下這個label之後，右邊會顯示這10篇文章的標題，以及"下一頁"的按鈕出來。但是實際上並已經沒有下一頁了，所以此時按了下一頁什麼事都不會發生。這就是那個小小的bug所在。這一樣的問題在文章數目為10的倍數時會反覆發生。

這邊其實有點麻煩，因為根據原本的作法，fetchPosts function會去取得10筆文章的資料進來，所以updateLabelPosts這個function裡面，並不知道這個label全部有幾篇文章，所以只能根據目前如果有10筆post時，就顯示出下一頁的按鈕。雖不精確，但也堪用了。

剛剛沒事想到一個小方法，也就是我們可以多設一個參數，讓他每次fetch多一筆資料，也就是11筆，但是每次顯示還是都只show出10筆，也就是說，當只要我有fetch到第11筆時，就顯示"下一頁"出來，這樣應該就符合需求了吧。

作法如下：
1.numPosts參數原本就設定在template裡面，以這邊為例是設定為10。所以我設定一個新的全域變數var fetchNum=11;
2.修改fetchPosts function裡面的feedurl，將原本使用numPosts的地方改為用fetchNum。feedurl = blogurl + 'feeds/posts/default?orderby='+PostOrder+'&start-index=' + startIndex + '&max-results=' + fetchNum + '&alt=json-in-script&callback=updateLabelPosts';記得喔，一樣的地方都要一併改到才行。

3.為了避免RecentPost把11筆post都show出來，所以在updateLabelPosts function裡面找到下面這個地方，加入紅色部份的程式碼，讓他如果loop到第11筆的時候就跳出迴圈，即可。 ...
for (var i = 0; i < json.feed.entry.length; i++) {
if(i==numPosts) //don't list the latest post
break;
var entry = json.feed.entry[i];
...
4.最後在顯示下一頁的選項的部份function updateLabelPosts裡面的if (json.feed.entry.length == numPosts) 改為if (json.feed.entry.length == fetchNum)

如此一來，就只有在文章數超過numPosts的倍數時才會出現"下一頁"的按鈕了。

Posts Order

其實我還蠻常修改文章的，可能會加一些後記，或者做一些修改。這時候就會覺得，如果文章可以照最新修改的時間排序，應該也會不錯的。

進去trace neo.js之後，就可以發現feed的地方其實是可以設定排序依據的。
feedurl = blogurl + 'feeds/posts/default?orderby=published&start-index=' + startIndex + '&max-results=' + numPosts + '&alt=json-in-script&callback=updateLabelPosts';如上面的藍色部份就是設定依照published做排序。

所以我們就可以大膽假設，是否也可以照updated做排序呢？一試之後，果然可以。所以就可以來進行改造工程啦。

首先要設定一個變數，拿來設定這個部份的參數。
feedurl = blogurl + 'feeds/posts/default?orderby='+PostOrder+'&start-index=' + startIndex + '&max-results=' + numPosts + '&alt=json-in-script&callback=updateLabelPosts';很簡單，就把藍色部份換成紅色部份就好啦。整份js一樣的地方都要這樣改，別忘了唷。

記得要在開頭的地方增加一個全域變數叫做var PostOrder='updated';這邊先給他一個初始值。然後我們就可以先測看看了。

如果您只是想把他改成可以用變數設定的話，到這邊就可以了。

如果您跟我一樣，有還不夠好，還要作成可以動態切換的話，就在繼續往下看下去。

接下來就是要寫一個切換的function囉。
照這個貼上去基本上就完成一半了，接下來還得要在template裡面再放上一個id為order的tag，大概就像下面這樣

這樣就可以啦。很簡單吧。其他一些細微修改，應該都不難做到的啦。

Good Luck, and Enjoy~

你也可以看懂neo.js

由於我原本也不會寫JavaScript，一切的一切都是從neo開始的。所以這邊的描述如果有謬誤，還請大家不吝指正。

這一篇跟大家簡單解釋一下neo.js的結構，以及他跟template之間的愛恨情仇緊密關聯。希望您看完這篇文章之後，有什麼想要的功能，都可以隨心所欲的增刪修改囉。

整個neo.js檔案裡面應該是由一個一個的function所組成的，function有function的宣告，然後用大括號刮起來。長得像這樣function a{
//function的內容
}
以及在最一開頭有一群"全域變數"，通常不在function裡面宣告的就叫做"全域變數"。例如下面這些。var postTitle = new Array();
var postContent = new Array();
一般的javascript的語法跟一般的程式語言大同小異，各位可以在網路上找到很多相關資料，就不再這邊贅述了。(真要講起來，大概要寫到天荒地老，各位就饒了我吧。)接下來會為大家解釋幾項常常看到的語法，如果看得懂這幾樣的話，應該差不多都可以改的動了吧。

1.把文字內容show到html的對應位置。
在js裡面需要有放置要輸出的字串的容器var。
var labelposts=document.getElementById("LabelPosts");上面這一行code會去取得template中id=LabelPosts的位置，等到後面執行了labelposts.innerHTML = disp;就會把disp裡面的資料，輸出到對應LabelPosts的位置裡面。至於disp是什麼呢？就是拿來裝要輸出的字串的東西囉。

那在這裡面要怎麼裝呢？就是像下面這樣。
第一行就是直接把disp的內容設成''，第二行就是不清掉disp而是從後面再附加上去。

這樣大家就知道怎麼寫東西出來了吧。看得懂這個，就差不多看的懂一半了。

2.接下來是跟JSON Feed有關的東西。var entry = json.feed.entry[i];
postTitle[i] = entry.title.$t;像這樣的東西，就是從feed得到的資料裡面，擷取一些東西出來。至於要怎麼取呢，就看這篇JSON Feeds下面有一個表格，大家想抓什麼資料就去那邊查囉。

而在template裡面則有兩段code讓瀏覽器會去執行neo這一段在Posts，也就是在sidebar-wrapper裡面，會去產生右邊的RecentPosts。

跟這一段在main-wrapper裡面，會去產生這一頁的comment
其實知道他們的相對位置之後，就大概可以了解為什麼包含第一段code的sidebar必須放在包含第二段code的main wrapper之前。否則comments就會出不來了。

所以這樣好像就差不多啦，應該可以做很多事了。

像之前的本文連結，以及今天還有做了一些修改
1.Post文章的作者，讓他會由js去更改，這樣用demo那篇的時候，文章作者也會是正確的了。
2.文章Post的時間，可以顯示出來，以及跟template產生的頁面的格式一樣。
3.修改Comment時間的格式
4.增加最後修改時間，不過這個不知道template要怎麼寫。XD

就這樣啦。大家加油吧！

本文連結

先前在修改的時候，就發現過一個問題，那就是當頁面第一次load文章是由template產生的，所以會跟neo的js產生的頁面也些許不同。而我的template中的本文連結一直都搞不定。

先前因為一個小bug造成每次打開頁面都會先reload過最新的一篇文章，所以上面這個問題也就不太介意了。不過，今天發現，要是我讓他每次都reload最新一篇文章，會使user無論從哪個link進來都只能看到第一篇文章，這樣就很麻煩啦。解法寫在"選擇Label同時更新文章"這篇。

由於這個問題解決之後，那那個本文連結就感覺有點礙眼了。於是就試了一陣子，終於找到正確的寫法了。

在template裡面需要有一個span的block長得像下面這樣

重點是在他的id=PostPermaLink這個id對照到js裡面updatePost的function裡面需要有下面這樣的code

這樣當updatePost被執行的時候，就會透過permalinkdiv把想要寫的東西寫到id為PostPermaLink的那一塊span裡面了。

此時只要把兩邊的code相互對照，讓他們長得一樣，就不難做到啦。

這種用法也是neo.js裡面最常用來寫頁面的方式。如果看得懂這個，其他其實也就不難啦。

1.template顯示comment會出不來
2.template顯示的日期格式跟neo generate的不同
3.recent post不能更新目前的post
該睡囉~

11:12 am

果然自己惡搞是不對的。comment的問題，在阿倫兄的在您的範本裡安裝Neo一文就有說明了

如果不醬子放的話會如何呢？你可以試看看啊～（保持神袐）好啦，你不必試，答案是＂回應＂會跑不出來。

這個故事告訴我們，教學文章要好好看清楚阿！

日期格式硬改template的改成一樣了。

更新目前post的問題寫在這篇。

在Blogger直接貼上html原始碼

參考自動將貼到Blog的程式碼Code或HTML Code做轉換及編排

原作的code有一點小問題，他會把整個code block的範圍頭尾去掉2行，害我一開始全部都show不出來。XD 這應該是各人寫文章的習慣不同所致，後來拿掉之後就不影響了。至於會show出來的註解符號，就一樣用replace處理掉了。

另外，由於這段code會把一些html的特殊符號relpace成可以正常show出來的碼，好處是我在原文只要寫正常的程式碼，就可以正常show出來，而不會被認為是html語法。

缺點卻是，這樣我就不能在code block裡面標顏色了。這個目前還想不出比較好的解法。不過能夠正常的show出那些'<','>'跟'空白'，而不需要去背一些奇怪的碼，這樣真的是輕鬆多了！

而為了不影響我先前寫的文章(改下去要每篇都去改，很麻煩耶！)，所以我把原本的'code'改為'htm_code'，然後在css裡面給一樣的style設定，這樣就不會影響到先前的文章了。

下面這個例子就是標htm_code所顯示出來的效果。

如果你看不到上面這一塊，表示你也許是使用ie來瀏覽，趕快棄暗投明吧。看，右邊那隻小狐狸是不是很可愛呢？趕快點他下載Firfox，別再用討人厭的IE了！

如果你也是用neo，在neo gen出來的頁面這個功能會失效，只需要把原作的javascript裡面的function codeDisplay()貼到neo.js，然後在reload文章的"function updatePost(index)"最後面再呼叫一次即可。
現在還想要syntax highlight。XD 越搞越複雜了。

09/11後記。

將呼叫codeDisplay();由updatePost()的最後面，改為放在checkFullNeo()的最後面，可以解決頁面第一次load不會執行的問題。btw,將codeDisplay直接放在neo.js就不需要再另外加入codeDisplay的link了。

10/3。
在IE上面沒辦法看到這些code真煩。雖然找到這個，有第三方程式可以幫你轉，但是還是覺得很討厭。先裝作看不見好了，改天有空再說。

Demo

Try it。

http://.blogspot.com

拿這個把自己的Blog變成Blogger Reader。orz

09/20

這個demo功能需要開啟blogger設定/網站提供/允許 blog 資訊提供 為"完整"，才能夠正常看到文章。如果您把自己的blog address打進去，卻看不到任何變化，表示您可能將它設為"無"或是"簡短"，都是沒辦法正常顯示的。

請試用demo正常再將neo套用到自己的blog上面，否則改老半天改不動，會跟我之前一樣頭大。XD

折疊文章的功能

前幾篇neo hack都落落長，搞得版面拉好長，而且我知道這些內容一定有些人一點也不想看的。昨晚在看template的時候，明明就有看到"collapse..."跟"read more..."的字樣，但就是不知道怎麼把他弄出來。

早上又去翻了翻Ramani的blog，終於找到寫法了。參考這一篇。

所以說，如果我們已經使用neo的template的話，只要在我們的文章裡面像下面這樣寫，就可以囉。
Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

本文標籤

今天正當準備下班之時，亂晃又晃到neo原作者的blog上去。一番亂點亂看之際，點入了原作者的neo demo blog。忽然大驚，原來原作的demo上面就有"本文標籤"的功能了。這下怎能放著不把他改過來呢！

首先下載了該demo blog的js比對負責post新文章的functionfunction updatePost(index) 發現裡面跟我手上的版本略有不同。由於那個code裡面有html tag，要貼上來太麻煩了，急的人就先自己比對吧。


step 1

把line113var tagsdiv = document.getElementById("PostTags");
line120~126
這些加到自己的js裡面的相對位置。

step 2

在檔案開頭的全域變數的地方有var postCategory = new Array();
var postNumCategories = new Array();
加到自己的js裡面。

step 3

在line80postCategory[i] = new Array();
if (entry.category) {
  postNumCategories[i] = entry.category.length;
  for (var k = 0; k < entry.category.length; k++) {
    postCategory[i][k] = entry.category[k].term;
    }
  }
else
  postNumCategories[i] = 0;
貼到自己的code的function updateLabelPosts(json)這裡面的相對位置。

這樣都做完以後，如果還是不行，表示你跟我一樣在template裡面沒有一個div叫做PostTags。

解決方法有二。

其一，請自行參考neo demo的template做一個出來。或者你也可以像我一樣，先把div塞進本文內容的最後面。這樣會稍微醜一點，不過今天我也累了。那個post的footer改天再說吧。

作法如下，將剛剛貼過來的var tagsdiv = document.getElementById("PostTags");
跟
tagsdiv.innerHTML = disp;註解掉。
然後將前面的contentdiv.innerHTML = ....+disp;加上後面的+disp以後，挪到註解掉的//tagsdiv.innerHTML = disp;的後面。
這樣就可以把label那段，塞到content後面了。

呼~這樣搞了兩三個小時。應該是ok了啦。

改天再來改template把"本文標籤"跟"本文連結"放到footer裡面吧。

還有，得想辦法讓他可以正常的show一下code，不然這樣寫文章好累阿阿阿阿。

收工下班~

2:00am 後記。

結果回家洗好澡又繼續搞到兩點。

事實證明前面寫的是正確的(如果有PostTags就不需要把他塞到content裡面)，因為我已經把footer找出來，把"本文連結"跟"本文標籤"都弄進去了。順便改了改CSS，看起來頗順眼。不過一開始load本文連結不會出來，不太想理他了。

另外由於一邊改一邊越來越了解template與neo.js之間的關係，於是我把neo.js裡面產生本文連結的code也順手改了一下。讓他不會跟post的文章擠在一起，這樣才不會出現排版不正常的狀況。

anyway, 果然是強迫症阿。趕快關機睡覺吧。

選擇Label同時更新文章

將將～改出來了。

如大家想要的(假設真的有人想要啦)，在右邊按下Label之後，同時更新目前顯示的文章，為目前Label的最新一篇文章。

參考了原作者的script裡面的寫法，終於找到原來是按下Label會call到fetchLatestPosts-fetchPosts->updateLabelPosts的最後面呼叫到updatePost(0);

所以就是這邊啦。如果想做這個功能的就在updateLabelPosts這個function裡面，把updatePost(0);放在function的最後面，就可以囉。

如果照這樣寫的話，在Label的地方按了上一頁或下一頁也同樣會Update文章的部份。如果不想這樣Update可以加上判斷式(如下面藍色)，讓他只有在換Label才會更新。
if(startIndex==1)
  updatePost(0);

09/12 後記。

如果照這樣的作法，可以在每次改label的時候reload目前的post。但是這樣做會有一個問題。就是當user由別人提供的"本文連結"連進來的時候，也會reload第一篇文章。造成不管從哪裡連進來都只會看到最新的一篇文章。這樣就有點麻煩啦。

原因是template在load的時候，會去執行fetchLatestPosts()以產生右邊上面的Recent Posts那一塊。所以如果照原本的寫法，他就會去reload目前的這篇文章，所以使得user不管從哪個文章的link進來都只會看到最新的那篇。

目前我是用一個暫代的方式解決。就是在原先的地方再加入一個判斷式if(startIndex==1&&label!='')
  updatePost(0);
由於第一次load的時候label一定會沒有東西，所以就不會去做updatePost(0)的動作。這樣的結果暫時是可以接受啦，如果將來還有想到更好的作法的話，就再說吧。

9/12 am 9:15
上面這樣做，如果是按了RecentPosts就不會更新現在的post，感覺還是很討厭。於是又做了一點小修改。如果您也有照這篇的作法，修改了label點下去的功能，那麼你就會跟我一樣有一個變數叫做oldlabel。這個變數是用來記錄點了fetchPosts()之前舊的label是哪一個。所以我們就可以用他來判斷，現在點下去是不是有改變label的值。於是我們就可以利用他來決定要不要update目前的post。

作法如下。

Step1 在原本的fetchPosts裡面應該有這樣一段。if(label != oldlabel){
startIndex = 1;
oldlabel = label;
}
由於updateLabelPosts比較晚被呼叫到，所以我們不能再這邊更新oldlabel的值，所以把oldlabel = label;註解掉。

Step2 在updateLabelPosts function的最後面有我們先前改過的這樣的code if(startIndex==1 && label!='')
updatePost(0);
把他改成像下面這樣if(label!=oldlabel){
updatePost(0);
oldlabel=label;
}也就是將oldlabel的更新改到最後這邊。目前為止看起來還蠻正常的。所以，這樣就可以囉。

Highlight Effect

在iNeoogle - New Neo Blogger Template裡面，有一個文章按下去會出現highlight的特效，在effect.js裡面。

經過我無聊的測試之後發現，如果user手賤，連續按好幾下的話，那個highlight的特效會沒辦法恢復到原來的背景顏色。

在trace過neo.js跟effect.js以後，得知該特效是在effect.js裡面的Effect.Highlight裡面。原作者的寫法在邏輯上是ok的。但是沒有考慮到連點的問題。

該function會傳進去effect的startcolor跟endcolor，在function裡面會記錄網頁元件目前的背景色，然後當特效完成，再把背景色改回去。就是因為是在click以後才記錄下目前的背景色，所以造成連擊發生的時候，會記錄到錯的背景色，然後特效結束就還原成了錯的背景色。

所以這邊做了一點小修改，我把原本的目前背景顏色，改為記錄傳進function的特效endcolor。差別就是要自己在neo.js裡面用到特效的時候的endcolor傳背景顏色進去，否則這個效果就會永久改變這一個block的底色。

修改方法如下。
1.在effect.js裡面找到下面這一行。
this.options.restorecolor = this.element.getStyle('background-color');
2.把上面的藍色部份替換成下面紅色部份這樣。
this.options.restorecolor = this.options.endcolor;

記得在使用highlight effect的時候要把結束顏色設成跟背景色一樣喔。

Label function

在原本的template裡面，Label的部份，如果User在"最新文章"那一欄選過下一頁，之後再選擇其他Label的情況時，會出現fetch資料不成功，導致在"最新文章"裡面看到的文章標題都是一樣的東西。

經過檢查.js的程式碼，發現fetch的部份會紀錄一個startIndex作為這一次fetch要開始的地方。因為這是一個全域變數，所以當user按到別的Label之後，startIndex會繼續沿用，所以當某一個Label的文章數沒有那麼多的時候，便沒辦法fetch到資料。

舉個例子說明這個情況。假設現在全部的文章有100篇，Label為blog的文章有5篇。一開始startIndex=1，所以可以正常fetch。如果此時user點了"下一頁"，則會呼叫fetchOlderPosts。這裡面會把startIndex加上numPosts，假設numPosts=10，則此時startIndex=11。然後下一步User點了blog這個Label，所以fetchPosts(blog)，這邊會由startIndex=11開始fetch。但是前面假設Label為blog的文章只有5篇，所以就fetch不到東西，所以這邊畫面上就還是維持在原本的資料的樣子。

這樣應該看得懂吧。

這邊在邏輯上應該是要改成，當user選擇了不同的Label的時候，將startIndex回復到預設值。

所以，下面我將對neochinese.js的內容做一點點小修改。

1.設定一個全域變數，紀錄上一次的Label。
這個加在檔案一開始全域變數的地方
var oldlabel ="";
2.在fetchPosts的時候，檢查Label如果跟先前的不一樣，就把startIndex設為1，並更新紀錄的Label值。
這個加在function fetchPosts(label)裡面的一開始。
if(label != oldlabel){
  startIndex = 1;
  oldlabel = label;
}
這樣就ok啦，把右邊的標籤雲亂玩弄一番，看起來頗正常的。

YA~hack成功。

07.08.24 後記

剛去看了原作者的blog，發現這一個問題，作者的blog是不會發生的。或者也許他之前就已經發現了也說不定。

原作者的作法是，多加一個fetchLatestPosts的function。這個function在我手上的neo.js裡面是有的，只是長得不太一樣。

作者現在用的fetchLatestPosts長得像下面這樣。
function fetchLatestPosts(label) {
  startIndex = 1;
  fetchPosts(label);
}
然後將template裡面label的按鈕原本是call fetchPosts(label);改為call fetchLatestPosts(label);這樣一樣可以解決上面這個問題，不過大家要改兩個檔案就是了。

BTW,我稍早也想要做那個按下label除了改list之外，也把顯示的文章改成該label的最新一篇文章。不過隨便改一下會怪怪的。等我改出來再Post給大家參考吧。

標籤雲

一個晚上重新打造Blogger。@@

標籤雲功能，參考下面。

Abin's Tech Note:增強標籤分類功能: 標籤雲 (Label Cloud)

照樣貼上去就可以了。非常簡單。
不過好像會影響原本Neo Template的運作...

非常專業的Blog。沒辦法，太累了。改天再看吧。

one hour later

眼皮越來越重了。

跟neo可以一起work的標籤雲，看下面這篇。

為Neogadget加上標籤雲與簡單的圓角(Blogger Template)

弄好了。再不睡上班會遲到，早上還要開會的說。orz。

把最新回應摺疊起來。

9/7 後記。

後來又改成參考Neo和標籤雲，這篇的作法感覺比較簡潔，也比較正常。上一篇把code嵌在widget裡面，感覺好怪。XD