雖然Neo的優點「快」很深得我心,但以AJAX/JSON技術運作的Neo最大的問題是很多hack都需要特別為Neo度身訂造,而且有很多hack根本無法應用在Neo上。
其實內嵌留言的功能早就在Blogger in Draft開放了,不過問題是使用Neo選擇了新一篇文章後會無法更新「內嵌留言」的網址,導致留言永遠只會針對載入頁面後的第一篇文章。
舉個例子,我進入首頁看到的是A文章,之後我點選B文章後留言,但其實留言的網址還停留在A文章,結果當然是「留錯言」。我花了點時間研究解決的方法,雖然有些小問題仍未解決,不過留言的功能應該是沒有問題的。
首先看看template中「Blog1」的Widget有沒有以下的一段程式碼,沒有的請自行將整段放在適當的地方。
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
之後尋找產生「Post a Comment」的程式碼,它應該是這樣子。
<h3 class='post-comment-link' id='PostCommentLink'>
<a expr:href='data:post.addCommentUrl' target='_blank'>Post a Comment</a>
</h3>
將上面整段換成
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
儲存範本後,應該可以看到原本出現在文章下面的「Post a Commet」現在已經變成內嵌式的iframe。可是我們要再修改neo.js讓我們在選擇文章後更新iframe的網址,找到function updatePost(index)後 ,改成紅色的部份。
function updatePost(index) {
var datediv = document.getElementById("PostDate");
var titlediv = document.getElementById("PostTitle");
var contentdiv = document.getElementById("PostContent");
var tagsdiv = document.getElementById("PostTags");
var editdiv = document.getElementById("PostEditLink");
var commenteditordiv = document.getElementById("comment-editor-src");
var commentdiv = document.getElementById("comment-editor");
在function updatePost(index)的尾段找到if (editdiv)。
if (editdiv)
editdiv.innerHTML = '<a href="http://www2.blogger.com/post-edit.g?blogID=' + blogid + '&postID=' + postId[index] + '"><span class="quick-edit-icon"> </span></a>';
commentdiv.innerHTML = '<a target="_blank" href="http://www2.blogger.com/comment.g?blogID=' + blogid +'&postID=' + postId[index] + '">Post a Comment</a>';
改成
if (editdiv)
editdiv.innerHTML = '<a href="http://www2.blogger.com/post-edit.g?blogID=' + blogid + '&postID=' + postId[index] + '"><span class="quick-edit-icon"> </span></a>';
commenteditordiv.href = 'http://www.blogger.com/comment-iframe.g?blogID=' + blogid + '&postID=' + postId[index] + '';
commentdiv.src = 'http://www.blogger.com/comment-iframe.g?blogID=' + blogid + '&postID=' + postId[index] + '';
現在可以留言試試看,成功的話選舉另一篇文章的時候應該會看到那個iframe會reload(消失後再出現)。
好了,那麼上面提到的小問題是什麼呢?我暫時發現到的,就是Abin提到的,那隻嵌在iframe內的Java,因為neo.js更新的時候並沒有去動到那隻Java。
我用Firebug檢查了一下,那個Java的作用應該是負責將留言的網址write到iframe,仔細看看,上面第一步加的那段程式碼中,iframe的src最初是空白的,但這個問題在neo.js中加入的程式碼「應該」已經解決了。
另一方面,iframe的樣式也是由它去產生,像下面那段紅色的部份,現在用我的方法去hack的話,更新文章後就會消失不見,但這個問題暫時我也不知如何去改,解決方法可能是Call那隻Java,但我不懂。
<a id="comment-editor-src" href="http://www.blogger.com/comment-iframe.g?blogID=6808776370808759167&postID=4684494013317694188"/>
<iframe id="comment-editor" class="blogger-iframe-colorize" height="275" frameborder="0" width="100%" scrolling="no" src="http://www.blogger.com/comment-iframe.g?blogID=6808776370808759167&postID=4684494013317694188#%7B%22color%22%3A%22rgb(51%2C%2051%2C%2051)%22%2C%22backgroundColor%22%3A%22rgb(244%2C%20244%2C%20244)%22%2C%22unvisitedLinkColor%22%3A%22rgb(172%2C%206%2C%204)%22%2C%22fontFamily%22%3A%22Arial%2CTahoma%2CVerdana%2Csans-serif%22%7D" allowtransparency="true"></iframe>
<script src="http://www.blogger.com/static/v1/jsbin/2891533932-iframe_colorizer.js" type="text/javascript">
不過這對留言的功能「暫時」看起來沒有什麼影響,遲點再看看有沒有解決辦法吧。
28-4-2009:現在我連上面紅色那段都硬塞到commenteditordiv,暫時就這樣子吧。未必每個人的Template都跟我的一樣,所以請因應自己Template的樣式去改。
13-5-2009:運用同一個技巧,我們連Star Ratings和Reaction都可以加在Neo裡,方法與內嵌留言大同小異,有人有興趣我才另寫一篇教學吧。
發佈留言