Blogger 側邊欄獨立一頁面，並使用 iframe 引用

王思元 8:30 上午 Blogger

原先的目的是希望 Google 搜尋不要把側邊欄的內容，編列成該頁的索引關鍵字，嘗試過搞錯用法的 googleoff/googleon tags 來標示，也嘗試過使用 Scripts 來產生側邊欄的內容，但 Google 是將執行過 Javascripts 後的 DOM (Document Object Model) 的內容來建置索引，所以 Scripts 產生的內容還是會被建立成關鍵字索引。

網站內部搜尋，認為部分網頁包含不適合的關鍵字索引

最後剩下使用 iframe 導入側邊欄網頁，然後標示側邊欄網頁不可被索引的方式，可以嘗試來達成目的。這篇記錄當初怎麼將側邊欄的內容拉出，讓 Blogger 中的網頁只顯示側邊欄內容，然後再主頁面的引用該網頁。

先講結論，就算設定 iframe 引用側邊欄網頁，單純設定 robots.txt，加入 Disallow: /p/side-content.html，似乎也沒有辦法阻止 Google 對於側邊欄內容進行關鍵字索引……。

所以不再堅持側邊欄被編入關鍵字索引。在後續的閱讀相關文章後，認為若真的不需要被建立索引關鍵字，應該將該內容移除，不再顯示在網頁上。此外 iframe 有顯示上的技術難題，沒有辦法完美的套用在現有的模板 (Template) 上。

分析 Blogger Template

使用之前介紹過的 Bracket 來進行模板編輯，具有關鍵字標示 (Keywords highlight) 以及區域摺疊 (Region folding)，讓分析模板原始碼 (Source code) 較為輕鬆。

由於知道側邊欄的內容標題，經由搜尋，並且檢視 Blogger 原始碼的 Layout Tags，很輕易就可以知道構成側邊欄的原始碼區域，剪下該區段原始碼做準備。

尋找到的側邊欄原始碼

建立側邊欄網頁並修改樣板原始碼

接下來建立一份網頁，並且標題命名為 side-content，它專用來顯示該側邊欄的內容。

回到模板的原始碼編輯，找到 <body> 以及 </body> 網頁內容資料顯示區塊，加入條件判斷，改成像下面的樣子：

<body>
   <b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.pageName == &quot;side-content&quot;'>
      // 放置側邊欄的原始碼
   <b:else/>
      // 原先模板的原始碼
   </b:if>
</body>

Line2: 條件判斷式開始
- 判斷現在是不是網頁型態 (data:blog.pageType = static_page)
- 判斷頁面標題是不是指定名稱 (data:blog.pageName = side-content)
Line4: 條件不滿足則…
Line6: 條件判斷式的結尾

樣板原始碼儲存後，當進到該側邊欄網頁，例如 /p/side-content.html，Blogger 僅僅會處理那段側邊欄原始碼，並不會印出其他東西，因此而達到目的。

引用側邊欄網頁

回到最早剪下側邊欄的地方，加入使用 iframe 顯示側邊欄網頁的原始碼：

<script>
//<![CDATA[
   function resizeIframe(obj) {
      obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   }
//]]>
</script>
<iframe src='/p/side-content.html' style='width: 100%; height:0px' frameborder='0' scrolling='no' id='side-iframe' onload='resizeIframe(this)'></iframe>

其中 /p/side-content.html 應該置換成剛剛建置的側邊欄網頁位置。

該 iframe 一開始是看不見的 (因為高度 = 0px)，當網頁瀏覽器成功載入，會自動調整 iframe 高度成為內容高度，然後正常顯示。

這裡的顯示技術型問題在於，若側邊欄會調整內容大小，iframe 並不會自動調整高度，內容會被截掉……。