讓Blogger 的意見回應可以有作者回覆 (by Sean) 的方法教學

※由於 Blogger 的HTML字元跳脫方式改變，本文提供的語法會出現<BR>標籤需要結尾的問題，因此將該語法原作者最新版本的語法放於本文最尾端供大家參考，並比照原文將本功能所使用到的語法用紅色標示以與Blogger原有語法做區隔，以便使用不同範本的朋友修改套用。

最近還算是在使用Blogger的蜜月期，因此很熱衷修改小功能與版面，我目前用的這個是從 WordPress Grid Focus的版面改良而來的，雖然已經很符合我在簡約風格上面的喜好，但是仍舊有可以進步的空間，好比說我今天才又修改了引言的風格，是西式報刊雜誌編排會用到的雙引號，感覺更有一點人文氣息，不過本篇要說的是在Blogger上使用作者回覆的方法，這個方法也是我在Google上找到的，所謂的作者回覆，就是在一篇文章裡面，底下的意見如果是作者本人可以針對某一個特定的意見回覆，並且用不同的外觀強調出來是作者本人，而在Blogger中則沒有內建這個功能。

原文出自All fo Sean. All for You的讓 Blogger 的回應可以有回覆這篇文章，我修改完之後發現，基本上對於我們這種寫原始碼出身的網頁設計師，看一下語法巢狀結構應該都沒難度，可是一般用戶可能就不知道要改哪裡了，因此便萌生寫一篇詳細教學的想法。




首先在Blogger的主控台點選版面配置 > 修改 HTML，並且點選以核取展開小裝置範本項目，如上圖所示。接著有幾種作法，一種是直接在網頁上修改範本的欄位修改原始碼，但是礙於欄位尺寸並不是很大，可能要眼尖一點才好修改，我建議的作法是直接下載完整範本來修改，或是從修改範本的欄位中使用Ctrl+A將原始碼copy到記事本修改，改完以後再貼回來儲存，不管你選擇哪一種方式，最好先下載完整範本來儲存一份正確的備份，以免改壞了。

然後我們要找到需要取代的這一段原始碼：
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
一般來說你可以使用Ctrl+F這個常用快捷鍵來搜尋<dl id='comments-block'>這一段語法，注意要取代的段落是否完整，不要漏掉任何部份，接著拷貝以下這段語法來取代上面那一段語法。

<script type='text/javascript'>
function authorReply(CID) {
var strBody = document.getElementById(CID).innerHTML.replace(/Re:\s*.+\s*&lt;(\d+)&gt;\s*<BR\/?>/i,'');
var strOut = "<div style='background-color: bisque; padding: 4px'><b>作者回覆</b>：<br/>"+strBody+'</div><p/>';
if(RegExp.$1)
document.getElementById('RID'+RegExp.$1).innerHTML = strOut;
else
document.write(strOut);
}
</script>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.author == data:post.author'>
<div expr:id='"CID" + data:comment.id' style='display:none'><data:comment.body/> <span style='font: 7pt Arial; color:#8a8a8a'>(<data:comment.timestamp/>)</span>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<script type='text/javascript'>
authorReply("CID<data:comment.id/>");
</script>
<b:else/>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl + "&postBody=Re%3A%20" + data:comment.author + "%20%3C" + data:comment.id + "%3E"' expr:onclick='data:post.addCommentOnclick' style='font: 9pt Arial; color:#8a8a8a'>回覆</a>
</b:if>
</span>
</dd>
<dd class='comment-reply'>
<span expr:id='"RID" + data:comment.id'/>
</dd>
</b:if>

</b:loop>
</dl>
取代完畢以後，根據你採用的修改方式將修改後的原始碼回存，如果你採用的是下載範本修改，將下載的檔案修改存檔後，在Blogger的主控台點選版面配置 > 修改 HTML，選擇從硬碟的檔案裡上載範本，將剛剛儲存的檔案上載，或是將剛剛在記事本中修改完的原始碼，貼回修改範本的欄位中，請記得還是要勾選展開小裝置範本較為保險。

按下儲存範本，至此，已經完成功能的修改部份，你可以到任何一篇有訪客留下意見的文章中查看，將會看到該篇意見下方的發布時間旁邊，有一個回覆的字樣，點選它即可進行意見回覆。如果你要變更顏色，只要變更語法中background-color: bisque的部份，在上方我已用紅色標示出來，例如：background-color: khaki，或是使用16位元色碼，如：background-color: #cecece即可，查詢色碼可以參考ColorSchemer - Online Color Scheme Generator。

備註：如果使用這個作法，又有用內建的Recent Comments，在Recent Comments列表中則會出現Comments的id值，類似&lt;1996645349791219709&gt;這樣的東西，看起來會有點突兀，原來是要在回覆的時候將類似這樣的字串<1996645349791219709>刪除才不會出現，但是這樣一來只有作者回覆的樣式會保留，回覆的部份就不會跟意見有關聯性了，所以目前還是無解。
<script type='text/javascript'>
function authorReply(CID) {
var strBody = document.getElementById(CID).innerHTML.replace(/Re:\s*.+\s*&lt;(\d+)&gt;\s*<BR\/?>/i,'');
var strOut = "<div style='background-color: bisque; padding: 4px'><b>作者回覆</b>：<br/>"+strBody+'</div><p/>';
if(RegExp.$1)
document.getElementById('RID'+RegExp.$1).innerHTML = strOut;
else
document.write(strOut);
}

function replyEmbedComment(CN,CID) {
var url = document.getElementById('comment-editor-src').href.replace(/-iframe/,'');
url += "&postBody=Re:+"+escape(CN)+"+<"+CID+">%0D%0A";
location.href = url;
}
</script>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.author == data:post.author'>
<div expr:id='"CID" + data:comment.id' style='display:none'><data:comment.body/> <span style='font: 7pt Arial; color:#8a8a8a'>(<data:comment.timestamp/>)</span>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<script type='text/javascript'>
authorReply("CID<data:comment.id/>");
</script>
<b:else/>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>

<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:post.embedCommentForm'>
<a href='#comment-form' expr:onclick='"replyEmbedComment(\"" + data:comment.author + "\",\"" + data:comment.id + "\")"' style='font: 9pt Arial; color:#8a8a8a'>回</a>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl + "&postBody=Re%3A%20" + data:comment.author + "%20%3C" + data:comment.id + "%3E%0D%0A"' expr:onclick='data:post.addCommentOnclick' style='font: 9pt Arial; color:#8a8a8a'>回覆</a>
</b:if>
</b:if>
</span>

</span>
</dd>
<dd class='comment-reply'>
<span expr:id='"RID" + data:comment.id'/>
</dd>
</b:if>

</b:loop>
</dl>Related Link:
All fo Sean. All for You