我一直對blogger原本的留言方式很不習慣,一直在找怎麼樣去改進這樣的留言方式。希望把它變成是可以直接在文章下方就有留言欄。這樣的留言方式就像是目前大家比較常見的BSP所提供的方式。
前幾天看到Josh's Note上有一篇改進Blogger的留言方式 。它是嵌入一個iframe到網頁中,雖然這樣的結果不完全跟其他BSP提供的功能相同,不過也相近不遠。
只是我現在用的是Neo版型,所採用的是Ajax,因此那篇文章並無法直接套用到這個版型。對此,我做了一點修改,以達到Josh那篇的目的。在進行前最好將原始的檔案備份。
首先,進入控制主頁–範本–修改Html,選取「展開小裝置範本」,找下面程式片段:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
將這段程式碼刪除- 接著開啟neo版型的JavaScript檔,如果原本使用的是neo預設的網址的話先將這個JavaScript檔上傳至自己的網路空間,而後到HTML上面更改,在
]]></b:skin>
這行之後。
開啟neo.js,也就是剛剛說得那個JavaScript檔,在上面全域變數的地方新增commentUrl變數
var commentUrl = new Array();
而要先去找到你自己blog的blogid。這個可以隨意連進你的意見頁面,上方的網址中即會有(就是那一長串的數字)。
然後在上方全域變數的地方新增一行
blogid = 你的blogid;
再到fetchComments這個function下加入一行
commentUrl = 'http://www.blogger.com/comment.g?blogID=' + blogid + '&postID=' + postid + '&isPopup=true';
在neo.js中搜尋"commentdiv.innerHTML"
會找到其中一個是
commentdiv.innerHTML = "<center><h2>目前沒有任何回應</h2></center>";
把它改成
commentdiv.innerHTML = "<center>><h2>目前沒有任何回應</h2></center>" + "<div id='comment-parent' style='margin-bottom: 50px;'><div style='border:none; height:600px; width: 400px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO; margin-right: auto;margin-left: auto;'><iframe src='" + commentUrl + "' height='100%' scrolling='yes' style='border:none;' width='100%'/></div></div>";
而在
commentdiv.innerHTML = disp;
的上面一行改成下列程式碼
disp = disp + "<div id='comment-parent' style='margin-bottom: 50px;'>
<div style='border:none; display: block; height:600px; width: 400px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO; margin-right: auto;margin-left: auto;'>
<iframe src='" + commentUrl + "#form' height='100%' scrolling='yes' style='border:none;' width='100%'/>
</div>
</div>";
完成後即可去你的部落格看看結果如何了。
我的部落格目前留言方式就是用這個方法產生的。
你真的好閒…XD