[Blogger] 每篇文章前皆顯示日期標題

從Pixnet等國內BSP搬到Blogger上之後，很容易對這種同日文章只在第一篇顯示日期的狀況感到不適應。這狀況也困擾了我很久，直到最近才完全解決。

在網路上可以搜到的做法，多半是使用文章的時間戳記來取代日期標題。不過這種方式並不算完善，會使得文章腳注所顯示的時間變得沒有意義。而前幾天測試成功的解法應該能完全避免掉這種狀況。

文章前必定顯示日期

首先開啟範本，並找到下列程式碼

<b:if cond='data:post.isDateStart'>
  <div class=&quot;date-outer&quot;>
</b:if>
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

接著取代為下列程式碼

<b:if cond='data:post.isDateStart'>
  <div class=&quot;date-outer&quot;>
</b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><!--位於靜態網頁時，不顯示日期-->
  <h2 class='date-header'><span><data:post.date/></span></h2>
</b:if>

將判斷式由data:post.dateHeader改為data:blog.pageType != "static_page"，是為了在每篇文章前都顯示日期的同時，避免在靜態網頁前也出現發佈日期。

若以上操作有順利完成，在同一日發佈的文章前，應該都能看見日期了。

文章HTML結構調整

經過上一步驟，可能會出現版面位置錯亂的問題，因此需要順便修改一下範本的結構，來排除這樣的狀況。

在前一步的修改後，應可見程式碼如下

<b:if cond='data:post.isDateStart'>
  <div class=&quot;date-outer&quot;>
</b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><!--位於靜態網頁時，不顯示日期-->
<h2 class='date-header'><span><data:post.date/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
  <div class=&quot;date-posts&quot;>
</b:if>

再以下列程式碼替換

<b:if cond='data:post.isDateStart'>
  <div class=&quot;date-outer&quot;>
  <div class=&quot;date-posts&quot;>
</b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><!--位於靜態網頁時，不顯示日期-->
<h2 class='date-header'><span><data:post.date/></span></h2>
</b:if>

行動版

若要連行動版範本一起修改的話，則需要多加一步驟。
搜尋下列內容：

<div class='mobile-date-outer date-outer'>
  <b:if cond='data:post.dateHeader'>
    <div class='date-header'>
      <span><data:post.dateHeader/></span>
    </div>
  </b:if>

並取代為

<div class='mobile-date-outer date-outer'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'><!--位於靜態網頁時，不顯示日期-->
    <div class='date-header'>
      <span><data:post.date/></span>
    </div>
  </b:if>

以上幾步若都確實做到的話，應該就能順利排除日期不顯示的問題了。只不過顯示出來的效果因人而異。因各人使用的範本的樣式不同，可能還是會造成修改前和修改後的版面位移的情況，這點還請見諒。