September 12, 2007

你也可以看懂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


就這樣啦。大家加油吧!

11 Comments:

好倫 said...

GJ

BBoy Yentz 燕子 said...

水大

我blogger自訂網址為flyyan.com
我套用neo之後 最新文章出不來
我檢查不出問題...
另一個測試用bolg
flyyanbeta.blogspot.com就沒問題

Unknown said...

您好,看來問題已經解決囉?

BBoy Yentz 燕子 said...

解決了 謝謝你
問題出在 發佈設定不是 "完整"

BBoy Yentz 燕子 said...

我看過幾個使用neo的部落格
一進去可能有顯示"星期幾"
像是"星期六, 十二月 02, 2006"
但是只要一選取文章
日期顯示就會改變"星期幾"消失
像是"十一月 05, 2006"
是不是Json feed沒辦法取得"星期幾"
有其他方法可以解決"星期幾"會消失的問題嗎

另外
若把日期顯示格式改成
2008年3月09日
如何把09的0去掉呢?

Unknown said...

關於星期幾的資訊,我也沒有仔細研究過。剛看了一下我reference的那篇JSON的文章並沒有寫到星期幾的資訊。也許您可以google看看是否有相關訊息。
我只是很單純而懶惰的修改blogger的設定,讓他跟我的js上面顯示的一樣而已。

另外要去掉0這件事,應該可以透過修改js做到。只要判斷數字所在區間去決定要顯示一個碼或是兩個碼就可以了。
btw,我好像也沒特別處理,也沒有0跑出來阿...

Unknown said...

oh~錯了,原來我也有0。XD
判斷再處理應該是可行的,不過再我這邊看不太出來,而且最近比較忙,大概也沒時間改吧。
有興趣您可以自行動手改看看。就在dateString裡面的day變數而已。
good luck~

BBoy Yentz 燕子 said...

水大

向你求救一下><
我的outbrain(星號評價)不會隨著點選文章轉變而更新outbrain
造成不管點哪篇文章
都是同一個outbrain...

後來想想要點文章更新的話應該要改neo.js
結果換成最新文章欄位內容消失..
求助一下正確的neo.js改法

http://www.outbrain.com

MY BLOG:http://bboy.tw

BBoy Yentz 燕子 said...

後來我利用outbrain的feedfare功能

在neo.js
function updatePost(index) {}
裡面增加下面code
expr:src='"http://feeds.feedburner.com/~s/bboytw?i=" + data:post.url'
又回到原點
還是不會依文章不同而更新outbrain

我在想是不是這段
expr:src='"http://feeds.feedburner.com/~s/bboytw?i=" + data:post.url'
需要改成neo能接受的形式
因為我看不懂...也沒辦法改

Unknown said...

Dear bboy,
neo的作用是在於利用rss feed與java script達到直接動態切換所顯示的文章內容的功能。
所以其中能夠用來顯示的部份,需要是rss feed就能夠閱讀的部份。比如說,使用另外一個rss reader能夠讀到什麼資訊,就可以利用neo來顯示。
至於您想要的那個功能,看來似乎並不是blogger原本就提供的功能(?) 所以如果要做到的話,可能需要更多的程式技巧才有辦法把他融入到neo裡面。
由於在這些方面(java script/rss feed)我涉獵並不多,所以大概僅能夠做到對原本的neo做一些些修改。
至於您想做的這個功能,可能得要另尋高人協助了。真是不好意思,沒能幫上忙... ^^;
Good Luck~

BBoy Yentz 燕子 said...

好吧 還是謝謝你

高人高人你在哪