Blogger 貼 HTML 的三個地方：文章底下那個要動主題

Blogger 本來就有留言，先弄清楚你要換掉的是什麼

每個 Blogger 主題都自帶一塊留言區，畫它的是畫你文章的同一個 Blog 小工具。Blogger 的版面配置資料標記把 allowComments、numComments 和 addCommentUrl 和文章標題、內文列在一起，這就說明了內建表單埋得多深：它是主題的一部分，不是後來架上去的功能。想改它的樣子，怎麼走都要動到範本程式碼。

會換掉它的人，理由通常是想在同一個地方管好幾個網站，或者想擺脫一個一看就知道主題是哪一年寫的留言框，又或者想讓網誌和自己發表東西的其他地方共用同一種留言樣式。誰都不該期待搬家：透過 Blogger 表單留下的留言留在 Blogger，新的小工具在每篇文章上都是從空的開始。

有一件事是站在你這邊的。BootSignal 留言請訪客用 Google 登入，而在一個由 Google 經營的網誌平台上，你的讀者多半是登著入進來的。

打開主題編輯器之前，先看一眼討論串

兩條路進得去，各自的代價

Blogger 給你三個貼 HTML 的地方，其中只有一個放得到文章底下。開始點來點去之前，先挑出符合你真正想要的那一列。

這些都沒有被升級擋住：版面配置 > 新增小工具、主題 > 編輯 HTML 和主題 > 備份，在 Blogger 的說明頁面上都沒有掛任何付費方案。Google 沒有發佈 Blogger 的價格頁，所以請把這件事讀成沒有東西擋著你，而不是一句可以拿去引用的承諾；blogger.com 上唯一提到錢的地方，是買一個自訂網域來取代 blogspot.com 的位址。這裡要付費的是 BootSignal，價格寫在下面。

路線 A：小工具，五分鐘弄出一個側邊欄討論串

1. 登記 blogspot 位址，或取代它的那個網域

   一個 Blogger 網誌從建立那天起就住在 yourname.blogspot.com，除非有人在 設定 > 發佈中 > 自訂網域 底下接上自己的網域，之後 blogspot 位址就改成轉向那個網域，不再自己供網誌。Blogger 在那個畫面上的提醒是轉向要一段時間才會生效。所以打開你的 BootSignal 網站設定，把已上線文章的網址列上顯示的那個主機名稱加進去，如果換過去還沒多久、舊連結還會落在 blogspot 上，就把 blogspot 那個也一起加。國碼寫法不必另外登記：yourname.blogspot.co.uk 和它的兄弟們會用轉向把人送到 .com 位址，所以任何國家的讀者最後都落在你登記的主機名稱上。回來的是一組網站 ID，而你要打進 Blogger 的就只有這個；小工具會拿 location.hostname 去對它背後那份清單，別的地方一律不畫。

2. 加一個 HTML/JavaScript 小工具

   登入 Blogger。選好要改的網誌。在左側選單按 版面配置。把游標移到你要動的區域，按 新增小工具。在彈出式視窗中，按「HTML/JavaScript」旁邊的「新增」圖示。這個小工具只有兩個欄位，一個標題、一個內容框。除非你想在討論串上面放一個抬頭，不然標題留空，把下面兩行貼進「內容」，然後按「儲存」。

   程式碼複製

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-tw" defer></script>
   <div data-bootsignal="comments" data-thread-id="blogger-sidebar"></div>

3. 打開已上線的網誌看一眼

   小工具畫在它那個版面區塊所在的地方。放進側邊欄，討論串就在側邊欄，每一頁都有，而且是一場共用的對話，不是一篇一串：你貼上去的 data-thread-id 是一個固定的鍵。這就是這條路老實的上限。它適合做成留言板那樣的東西，而讀者說要在文章底下留言時，指的並不是這個。

路線 B：每篇文章底下一串真正的討論

1. 打開主題編輯器

   登入 Blogger。選好要改的網誌。在左側選單按 主題。在 我的主題 底下按 更多，再按 編輯 HTML。你現在看到的是整份範本擠在一個文字框裡，這就是剛才要你先下載備份的原因。

2. 找到 Blog 小工具和文章內文標記

   找 type='Blog' 的那個 b:widget 標記，慣例上 id='Blog1'。每個 Blogger 小工具都有一個 id='main' 的 includable，而官方主題會把文章的標記拆到第二個 includable（通常是 id='post'），再由 main 用 b:include 拉進來。你不必跟著這條鏈走。在檔案裡搜尋 <data:post.body/>，文件寫的是它代表文章的內容。那個標記就是你的錨點。

3. 把掛載點貼在文章內文正後面

   b:if 標記之間的東西只會畫在單篇文章頁上，因為文件寫著 data:blog.pageType 的值是 'item'、'archive' 或 'index' 其中之一。Blogger 的屬性引號是 XML 跳脫過的，所以條件式寫成 "item"，而那是 Blogger 自己的範例，不是什麼變通寫法。expr: 這個前綴是資料標記進到屬性值、而不是當成內容印出來的方法，data:post.id 則讓每篇文章拿到自己的討論串鍵。data:post.url 也行，代價是：以後改了永久連結，對話就留在舊的鍵底下。

   程式碼複製

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div data-bootsignal='comments' expr:data-thread-id='data:post.id'></div>
   </b:if>

4. 載入器加一次，放在範本尾端

   載入器放在任何每頁都會跑的地方都行，而同一份檔案裡 </body> 之前是最不讓人意外的位置。明年再加五個掛載點，這裡也還是範本裡唯一的 script 標記。這份檔案是 XML 形狀的，所以 defer 要給明確的值，開了的標記全都要關。

   程式碼複製

   <script src='https://bootsignal.com/bootsignal.js'
           data-site-id='YOUR_SITE_ID' data-lang='zh-tw' defer='defer'></script>

5. 儲存，然後去看一篇已上線的文章

   按「儲存」，在已上線的網誌上打開一篇真的文章，捲過內文。不要用主題的預覽來判斷：那是 Blogger 在自己的編輯器裡畫的，不是你讀者拿到的頁面，而且 Blogger 說明沒有寫第三方指令碼在那裡會怎麼跑。

把 Blogger 自己的留言表單關掉

兩套都開著，每篇文章結尾就會有兩個留言框。讀者隨便挑一個，對話從此分家，你也得在兩個地方回話。新的小工具上線之前，先決定誰留下來。

開關有兩個。全站那一個在 Blogger 的設定畫面上、留言那一組裡；Blogger 說明講文章編輯器的那一篇沒有記下這些標籤的字樣，所以請看你自己螢幕上寫什麼，而不是從別人的教學抄一個標籤過來，包括這一篇。主題那一側的開關才是確定的，而且你人已經在對的檔案裡：Blog 小工具裡的內建留言區是用 b:include 拉進來的。把那個 include 圍進一個永遠不成立的 b:if，或者直接刪掉那一行，表單就離開頁面了。

單篇這一層，主題通常拿 data:post.allowComments 當內建表單的閘門，所以替某一篇關掉留言，只會讓那一篇的表單消失，別篇照舊。不管你動的是哪個開關，被你拿掉的那一塊，正是原本在畫你既有留言的那一塊：留言還存在 Blogger 裡，只是不再出現在頁面上。

Blogger 上真正出錯的地方

混合內容，Google 把它當成硬性失敗

這段話是 Google 的說法：頁面一開始用 HTTPS 安全地下載了 HTML，接著卻用不安全的 HTTP 載入後續內容，於是產生混合內容錯誤，而這 "will degrade both HTTPS security and the user experience of your blog."，它的繁體中文說明頁把同一件事寫成「這些瀏覽器錯誤不僅會降低 HTTPS 的安全性，更會讓瀏覽您網誌的使用者感受不佳。」它開的處方是二分法：先移掉非 Google 的小工具，看網誌的狀況，再一個一個加回來，直到犯人自己現形。BootSignal 的載入器和它抓的每一樣東西都只走 HTTPS，所以你的網誌如果本來就在丟這種警告，先把舊的清乾淨，否則你會花一個下午錯怪新來的小工具。

那個怎樣都存不下去的儲存

Blogger 的主題是它自己那一套 XML 形狀的標記語言：b:section、b:widget、b:includable、b:include、b:if、b:loop，屬性值還是 XML 跳脫過的。實際後果是，貼進去的指令碼只要帶著沒處理過的 <、& 或 &&，整份檔案就可能存不下去。Blogger 說明既沒有記下這個故障，也沒有寫過什麼 CDATA 的要求，所以請把它當成嫌疑犯而不是規則：如果按了儲存被打回來，而編輯器指的位置就在你貼上的地方附近，那幾個字元是最先該看的。這篇裡的兩段程式碼都不含這些字元。

小工具在比對的那個主機名稱

掛載點畫出來了卻沒有討論串載入，或者登入一直被彈回來，先查網域。小工具只在登記到你網站 ID 底下的主機名稱上回應，Google 登入又會檢查頁面的來源，所以 yourname.blogspot.com 和 yourname.com 是兩筆登記，不是一個網誌的兩個名字。也用手機看一次：b:widget 除了 pageType 還帶著 mobile 屬性，主題完全可能在桌機上顯示某個小工具，到了小螢幕就把它丟掉。

某篇文章紅起來的那個月，帳單為什麼不動

BootSignal 是每個已登記網域每月 $20 或每年 $200。目錄裡的每個小工具都含在內，明年新加的那些也是，價格裡沒有一塊綁在瀏覽次數或留言量上。這件事在 Blogger 上比在多數地方更要緊：一篇 blogspot 文章被哪裡轉出去，讀者可以從一天四十人變成一週四萬人，而按流量收費的留言工具，偏偏挑那一週變貴。第二個網誌有自己的位址就是第二筆登記，從控制台加。

目錄目前是 38 個付費小工具，外加 33 個免費的瀏覽器工具，哪個是哪個列在價格頁。跟其他代管留言系統的帶價比較放在替代方案，因為那些數字會動，而過期的數字比沒有還糟。

主題檔案還開著，順手多加一行

你貼下去的那段載入器帶得動其他每一個 BootSignal 小工具，所以第二個的成本就是一個 div。Blogger 文章上最順的搭檔是瀏覽次數，它吃 thread id 的方式一樣，也可以共用文章的那個鍵。

<div data-bootsignal='viewcount' expr:data-thread-id='data:post.id'></div>

關掉編輯器之前，趁著主題備份已經含著你的修改，再下載一次，然後把兩段程式碼和你的網站 ID 丟進一個和網誌筆記放在一起的文字檔。下次換主題時 Blogger 會把 HTML 換掉，兩個掛載點跟著走，而那個檔案開著，貼回去只要兩分鐘，不必花一個晚上重讀這一頁。