Blogger 文章下方內嵌意見回應

目前 Blogger 已經內建該功能，這 Hack 已不需要囉！

以前（絕不是上個世紀），

Blogger 只有「整頁」跟「彈出」兩種回應張貼的模式，
「習慣使然」的我，覺得這樣很不方便，
於是乎，接受了 DISQUS 釋出的善意，
還因此生出了這篇Blogger 單篇文章直接回應功能，不用再另開視窗之《不痛教學》，
阿啦生性比較「隨性」，不會勤奮的更新文章，慢了好幾拍才知道這消息，
原來～Blogger已經可以把回應內嵌在文章裡了…
ok，那我們開始吧！

A》如果您是使用官方的佈景主題，只需要做下列設定：
     登入 Blogger 更改設定，更改完畢記得「儲存設定」。
    


B》如果使用的是非官方的 theme ，或者曾經修改過範本的程式碼，
      那麼做了上面的設定還不夠，還需要再修改一下程式碼才行喔！

1. 記得備份範本。
2. 記得「展開小裝置範本」（或使用 Notepad++ 軟體有利修改）。
3. 以下這段是官方 include 模組的原始程式碼 <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>
4. 接著，找「內嵌意見欄」的 code ，基本上如下段，但每個人 theme 不同，重點是橘色那段，若搜尋出來有多筆，請自行判斷
   多數人似乎是這段
   <p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
   阿啦的則是長這樣
   <h4 id='respond'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</h4>
5. 將上面那段的橘色取代成綠色那段如下，兩者差別在於藍色粗體字的部份，差別在於：用兩個條件式的 if 判斷句來決定 respond 介面要變成哪一種，預防後台的設定有所變更。
   <h4 id='respond'> <b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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></h4>

6. 接著，請找到
   <b:includable id='comment-form' var='post'>
   檢查是否為以下語法，若有異，請整段取代如下，<!—XXXXXXX -->為個人備註： <b:includable id='comment-form' var='post'>
<div class='comment-form'>       <!--讓你可以直接跳到填寫回覆的地方-->
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>  <!--即「張貼意見」標題字，不喜歡可更改-->
<p><data:blogCommentMessage/></p><!--後台做設定，基本設定/意見/意見表單訊息-->
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>
以上，大抵就ok了！如果還想要多兩個小變化，請繼續往下爬文～～

C》解決回應的意見很多時，不需要一直滾捲軸才能回應，

      配合上方所述的 comment-form
        找到下面這段，並加入橘色那行即可。
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:<br/>
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:<br/>
</b:if>
</h4>
<a href='#comment-form'>直接回覆,暫且略過其他人的意見</a> <!-- 加入此行節省滾捲軸時間 -->

D》若覺得「張貼回應」的區塊預設的寬度大小不順眼，請參考以下語法
在 CSS 區段內搜尋下面語法，紅色部分即為寬度修改處。
若搜尋無果，直接將下面語法貼在 <b:skin> 之後的任一位置，並修改成你要的寬度。
/* 改變張貼回應的寬度 The comment-form width */
.comment-form {
  max-width: 580px !important;
  width: 580px !important;
}


以上，筆記整理完畢！呼～整理到眼花撩亂了 ＠＠

筆記出處： ABIN’S TECH NOTE / 白花花

原文連結：1內嵌的文章留言(Embedded Comment Form)

               2將Blogger的回應介面內嵌在文章下方

⇩　分　享　本　文　⇩