[Blogger] 在索引頁面只顯示文摘

在預設範本之下，Blogger不像Pixnet這類國內的BSP，並沒有純粹的標題模式可以用。這在想要快速瀏覽網誌，找尋有興趣的文章時，會造成一定的不便。雖然繼續閱讀的功能在一定程度上有解決這樣的狀況，但每篇文章設定的長度並不固定，效果不能說很好。

最近看到WFU曾經發過的文章有讓首頁只顯示類似行動版縮圖及文章摘要的方法，稍微修改一下，也可以達到快速瀏覽的需求，算是折衷的解決辦法。畢竟若只顯示標題，並不見得能清楚了解文章的概要。

以下以Hei Notes所發表同时缩小 Blogger 缩略图尺寸和大小內的程式碼為基礎進行調整，以便達到標題所提及的效果。

首先，先用文字編輯器開啟範本，搜尋<data:post.body/>，理論上會找到三項結果。
將後二項取代為

<b:if cond='data:blog.pageType == "index"'><!--判別目前網頁類型是否為索引-->
  <b:if cond='data:blog.url != data:blog.homepageUrl'><!--不為首頁時，顯示縮圖及文摘 -->
    <div class='index-thumbnail'><!--縮圖區塊-->
      <b:if cond='data:post.thumbnailUrl'><!--檢測文章內是否有縮圖-->
        <script type='text/javascript'>
          (function() {
            var pic = "<data:post.thumbnailUrl/>";
            pic = pic.replace("s72-c","s120-c"); //縮圖大小變更為120px
            document.write("<img src='"+ pic +"' style='float:left; margin:0 1em .75em 0'/>");
          })()
        </script>
        <noscript><img expr:src='data:post.thumbnailUrl' style='float:left; margin:0 1em .75em 0'/></noscript>
      </b:if>
    </div>
    <div class='index-snippet'><!--文摘區塊-->
      <data:post.snippet/>
    </div>
  <b:else/><!--位於首頁時，顯示正文 -->
    <data:post.body/>
  </b:if>
<b:else/><!--網頁類型不屬索引時，顯示正文 -->
  <data:post.body/>
</b:if>

修改後，除了首頁之外的索引頁(即標籤、較舊的文章、網誌存檔中的年份與搜尋結果)，將不再顯現正文，而會變成顯示正方形縮圖和系統自動截取的文摘，每篇文章的長度會縮減很多，相對地要迅速瀏覽文章就快上不少。

▲變更前範例

▲變更後範例

由前二張截圖的對比，可以明顯看到後者的文章區塊變小，內文也只顯示一部分，不像第一張因為會顯示到繼續閱讀為止，在畫面中沒法完全顯示出來。同時，二張圖中右方捲軸的大小變化，也很清楚地表明了每篇文章在頁面所占的比例大大降低，若要概略掃過一遍Blog，這會是比較好的呈現方式。

在看了這篇之後，也許你會希望除了本文和首頁以外的頁面都只顯示文摘，那麼把上方程式碼區塊的

<b:if cond='data:blog.pageType == "index"'>

改為

<b:if cond='data:blog.url != data:post.url'>

就可以達成需求了。