[Blogger] 回應區分部落格作者及訪客的簡單作法

就目前查到的可以做出在 Blogger 系統下回覆別人的回應功能的，是 Sean 所寫的這篇：Sean's Blog: 讓Blogger 的「意見回應」可以有「作者回覆」 (最終版)，很久之前有試過，但就是弄不出來，後來我大概想了一下我自己需要的東西，大概是讓我回應的區塊可以跟訪客分別出來就可以，加上我訪客留言的人不算多，我只要能即時回覆看起來其實就蠻像回覆在底下的感覺。所以我就用 CSS 和判斷式土法鍊鋼了一下，以後有時間再來研究 Sean 大所實現的功能。

剛好 Steven 大有問到，所以我就在這裡分享一下我的爛招，大家還是應該要去看 Sean 大那一篇才是王道。

一、勾選展開小裝置範本，記得備份你的版型先

二、加一個作者回應的 DIV CSS：因為我想要我回應的框框內縮一點，不然其實不加也沒關係

#comment-header-me{width:525px;border:1px solid #cccccc;padding:5px 10px 5px 10px;margin:5px 0px 5px 30px;background-color:#eeeeee;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

三、找到 <b:loop values='data:post.comments' var='comment'>，我是加了一個判斷式 <b:if cond='data:comment.author == data:post.author'>，然後把作者回應要顯示的東西所需要的語法放在那裡面，你可以從原來的語法裡面先複製一份在判斷式裡頭再慢慢改，原來的語法就是接在 <b:else/> 後面。(紅字是加上去的判斷式，粗字是作者回應的區塊。)

<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div id='comment-header-me'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
  <div id='comment-name-url'>
  <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0u5Wn7BEhQvCtB-wvhT1qkl0Qtab37Wa41t_XwdoPo12PdiHMV9sgIlyvlVxLmzAk8HIJRkHMxnCcZKCwDiNx3eMgsPPc6HYMPcTXQkIUeSdXeojEXtsHi2G0rCYlVBM4J8M61A/s45/n1558631551_185425_2612.jpg'/>
  <a class='comments-autor-name'>吉米回應&#12299;</a> <a class='comment-permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/>
  </div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>
<b:else/>
<div id='comment-header'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
  <div id='comment-name-url'>
     <!-- Fixed for display comment index -->
<div id='countcomment'>
<script type='text/javascript'> ShowCommentIndex(&#39;<data:post.id/>&#39;); </script>
</div>
<b:if cond='data:comment.authorUrl'>
  <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
  <a class='comments-autor-name'><data:comment.author/></a>
</b:if>
於 <a class='comment-permalink'><data:comment.timestamp/></a> <a class='says'>留言說&#65306;</a> <b:include data='comment' name='commentDeleteIcon'/>
</div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>
</b:if>
</b:loop>

參考參考就好，因為這基本上算是很懶惰的改法。

後記：目前已經將 Sean 大的 ar.js 做了一番修改用在弱格成功，還在實驗中，也許之後多測試之後再 Release 出來

先筆記一下目前已知問題：作者回應時若使用 <a> TAG 好像會出錯。