如果像我用 Daily Archive 來做日曆的 Hack，會發現一個問題：要怎麼找當月份或是當年份的備份文章呢？之前很多朋友都發現 Archive 其實只有一個能生效，即使手動 Hack 塞了兩個，還是會不大正常。其實目前為止這個問題並沒有好的解法（除非不用那個日曆的 Hack），能夠做的就是在一些小地方加上連結，讓讀者可以看到當年份或是當月份的文章。這裡介紹的 Hack 是文章上方的導覽列（要點進特定文章才會出現），這個導覽列英文叫 Breadcrumbs，是「覆蓋在麵包上的小屑屑」，英文用得其實比中文「導覽列」 (NavBar) 更貼切（我也不知道中文怎麼翻，總不能真的叫麵包屑吧），Hack 完或實際特定文章連結看範例就知道是怎麼回事了。
原作者做的 Hack 是導覽連結列是 首頁 -> 標籤 -> 文章標題，不過眼尖的人會發現兩個問題：第一，如果有多個標籤該怎麼辦？第二，進到單篇文章裡面，文章一開始就有文章標題、最後面會列出該文章所有標籤，這個導覽連結列完全沒有可用性啊！因此有了改良，改成以時間來導覽連結，變成像是 首頁 -> 年份 -> 月份 -> 文章標題，嗯嗯！就樣也算是有了該篇文章當月或當年的 Archive 作用了。但是我發現這份改良還是有問題，作者當月的 Archive 還是借用 Monthly Archive 的連結來做的，像我用 Daily Archive 還是會不正常啊！研究了一下，原來 Archive 是用 Blogger 自己搜尋引擎的語法，帶入時間範圍當變數達成的，所以我就又修改了一下，當月的 Archive 一樣比照辦理，做出來文首的導覽列連結就不受 Archive 的型態和設定影響了！
一樣打開範本->修改 HTML->勾選「展開小裝置範本」，在 Blog 文章的這個 widget 區段內（<b:widget id='Blog1' ....> </b:widget>），找到顯示文章的那一個子區段，應該是下面這一行開始：
<b:includable id='main' var='top'>
這行下面表示的是在產生文章的完整內容，由於我們這個文首的導覽列要放在文章內容的前面，因此在產生的文章迴圈後、產生發表日期和標題前塞入下面紅色那一行：
<b:loop values='data:posts' var='post'>
<b:include data='post' name='breadcrumbs'/>
<b:if cond='data:post.dateHeader'>
而這個新加進來的 include 定義 breadcrumbs，我們也要宣告，因此下面的程式碼請加在 <b:includable id='main' var='top'> 這行的前面：
<b:includable id='breadcrumbs' var='post'>
<!-- Year & Month Breadcrumbs -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
導覽連結: <a expr:href='data:blog.homepageUrl' rel='tag'>首頁</a>
<script type='text/javascript'>
generateBreadcrumbs();
</script>
<b:if cond='data:post.title'>
-> 標題: <data:post.title/>
</b:if>
</p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>
而上面的程式碼裡，有用到一段 Javascript 的函式 generateBreadcrumbs()，因此接著要把這個函式的宣告和定義放到樣版裡面。和之前的 Hack 一樣，把下面的 Javascript 程式放到樣版 </head> 標籤前面，或是自己定義的 Javascript 區段：
<script type='text/javascript'>
//<![CDATA[
<!-- Functions used for generating Year & Month Breadcrumbs: generateBreadcrumbs() -->
function generateBreadcrumbs() {
var strHref = location.href.toLowerCase();
var intWhereAt = strHref.lastIndexOf('/', strHref.indexOf('.html'));
var intYear = parseInt(strHref.substr(intWhereAt - 7, 4),10);
var strCrumbOutput = ' -> 年份: <a href="/search?updated-min=' + intYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + (intYear + 1);
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00">' + intYear + '</a>';
var intMonth = parseInt(strHref.substr(intWhereAt - 2, 2),10);
var intNextMonthYear = intYear;
var intNextMonth = intMonth + 1;
if (intNextMonth > 11) {
intNextMonth = 1;
intNextMonthYear += 1;
}
var strMonth = intMonth;
if (intMonth < 10) strMonth = "0" + intMonth;
var strNextMonth = intNextMonth;
if (intNextMonth < 10) strNextMonth = "0" + intNextMonth;
strCrumbOutput += ' -> 月份: <a href="/search?updated-min=' + intYear;
strCrumbOutput += '-' + strMonth + '-01T00%3A00%3A00-08%3A00&updated-max=' + intNextMonthYear;
strCrumbOutput += '-' + strNextMonth + '-01T00%3A00%3A00-08%3A00">' + strMonth + '</a>';
document.write(strCrumbOutput);
}
//]]>
</script>
最後就是外觀了。原始碼裡面用到了一個新定義的 CSS 變數：breadcrumbs，這是用來顯示這個導覽連結區段的 Style，所以在 CSS 定義的區段 <head> 標籤後面、<style>區段裡加入以下的 CSS （樣式請自行根據自己的樣版調整顏色、字型大小和分隔線）：
/* Style for Year & Month Breadcrumbs */
.breadcrumbs {
color: $sidebarcolor;
letter-spacing: .1em;
font: $postfooterfont;
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}
存檔搞定！檢視首頁的時候好像沒什麼改變，因為顯示這個連結列的條件是：
<b:if cond='data:blog.pageType == "item"'>
也就是要點入單篇文章的時候，效果才會出來，顯示在文章標題的上面，我想在其他地方應該沒有導覽的必要吧～
參考文章：
Adding a Breadcrumb Trail to your Blogger Post
Year & Month Breadcrumbs
註：已修正 8, 9 月文章月份導覽會變成 0 的問題，原因是 Javascript parseInt(08) 的問題，改成 parseInt(08, 10) 就沒事了。
回應: 22