微調在 blogger 上的月曆

Tags: blogger-tips

接續上次的文章：在Blogger上安插月曆( Calendar)，順利的話應該已經在你的blog上安插好月曆了。那我們就來談談這個這個程式的運作與該微調吧。

我還沒有幫她取名字，就先叫 Calendar 好了，目前版本是 0.3 ，歡迎任何人拿去修改與使用。先前提到在blog上安插月曆並不難，很多 DHTML 都會拿此來作為教學範例。包夾在 script 標籤內的 javascript 就是負責繪出月曆的程式碼，裡面包含了全域變數的定義，幾個直接執行的敘述以及六七個副程式。雖然已經把blog的存檔頻率設定為每日，但是我們並不一定每天都有文章。下面這段程式碼

<BloggerArchives>
blogarchivename.push("<$BlogArchiveName$>");
blogarchiveurl.push("<$BlogArchiveURL$>");
</BloggerArchives>
for (var x in blogarchivename)
{
blogarchivename[x] = blogarchivename[x].slice(0,4) +
blogarchivename[x].slice(5,7) +blogarchivename[x].slice(8);
}

就是為了取得這些blogger系統的存檔資訊。BlogArchiveName是blogger存檔的名稱，格式取決於你設定的存檔頻率與日期。BlogArchiveURL則是每個存檔的URL位址。有關於這幾個標記的使用與介紹可以參考blogger系統的線上說明。實際在網頁顯示時會是這樣的結果。

blogarchivename.push("2006-04-01");
blogarchiveurl.push("http://bartstalk.blogspot.com/2006_04_01_bartstalk_archive.html");

blogarchivename.push("2006-06-15");
blogarchiveurl.push("http://bartstalk.blogspot.com/2006_06_15_bartstalk_archive.html");

這幾行程式碼的目的是逐一將Archive的名稱與Archive的網址放入blogarchivename與blogarchiveurl這兩個陣列當中。而接下來的for迴圈則是為了將2006-06-21中間的dash移除成為20060621這個更精簡的格式以供後續的程式碼使用。

取得這些必要的資訊之後就可以來繪製月曆了。第一個副程式 YearMonth 是用來處理月曆最上方年月的顯示狀況。搭配NextMonth與PrevMonth這兩組副程式來切換不同的月份並重新繪製月曆。副程式Calendar就是建立月曆的核心。閏年是第一個要處理的問題，在確定該年份二月的天數之後就要開始月曆的繪製。這實際上是一個 7 x 5 或 7 x 6 的表格，大略的處理流程為先確定該月份一號是星期幾後，在前面補上相對應的空白表格以湊滿第一週的七行，然後才依序填入日期。藉由檢查 blogarchivename 確認該日期是否有存檔的文章，有的話就建立一個連接到該文章的link，最後在補上空白表格以湊齊七行。這些html碼都會存入out變數中，透過 refreshTable 副程式輸出到網頁中就大功告成了。

看不太懂嗎？反正程式能夠正常運作就好了。現在來談談大部分然較為關切的畫面微調吧。為了要讓這個月曆融入你的blog，可能會需要調整畫面的大小與色彩。月曆最上方的today字串與年月的顯示切換是屬於表格caption標記，可藉由修改 CSS 中 #Calendar caption區段內相關的設定來變更顯示的效果。javascript中week_label陣列記錄了星期的顯示格式，預設是採英文簡寫。要變更為中文「日」、「一」、「二」的形式去修改此陣列即可。若想要變更月曆內每個日期格子的大小、背景甚至是文字的色彩，可以修改

#CalendarTable table td {
font-family:Arial;
font-size:12px;
width:25px;
height:25px;
border: 1px solid #444;
color:#777;
text-align:center;
padding: 1px;
margin: 0;
}

目前的設定是每個格子為 25px X 25px 的正方形表格，可自行變更只要能夠容納得下數字即可。為了搭配 Minima Black 這款範本我將文字色彩設定得較為黯淡，如果你blog是較為明亮的風格將color改為較高亮度的色彩應該會較為合適。對於有存檔文章的日期，由於會置入URL連結所以是藉由這組CSS

#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{
text-decoration:none;
//background: #444;
font-weight:bold;
Text-decoration:underline;
color: #fff;
}

來控制，預設是將字體加上底線以高亮度的色彩來顯示，顯示的色彩在某些高亮度範本上可能會很不明顯，有需要可改用較為黯淡的色彩(如黑色或灰色)來突顯。

依據慣例月曆會將今天的日期做特別顯著的標識，所以會製表格的時候會在今日這個格子內套用 Today 這組CSS 類別。目前的設定為

#CalendarTable .Today {
background: #444;
color: #fff;
}

採灰底白字，同樣的藉由調整這一系列的屬性來決定今天這個日期在畫面上的呈現以配合不同的模板。大致到此應該就可以讓這組月曆融入你的blog內了。

並沒有完美的程式，這個月曆當然也存在部分限制，但大都是來自於blogger的系統本身。首先我已經稍為將程式碼精簡過了，可以直接將程式碼放入blogger系統的模板而不必再另外找網頁空間放置js檔案。不過整個程式碼(包括CSS)還是佔了約250行左右，且開頭讀取blogger存檔檔案網址與名稱的區段更可能會隨著發佈文章的多寡而增加。blogger系統對於每個html檔有1mb的限制，u以單純的文字角度來看這意味了上百萬字的容量，但很謹慎的來說你依舊有可能會碰到這個限制(雖然機會不大)。假如你決定要在blog上重新改寫金庸小說，那建議你可以適當的將文字切割為多篇文章以免blogger系統無法順利的發佈。另外blogger系統最多只能顯示999篇存檔在主網頁上(你可以到blogger系統內的[設定]->[顯示]去變更)。以一個相當多產量的blogger而言以每日一篇的速度可以容納約近三年的文章，超過的話主頁上就不會顯示這些老文章呢。這其實是系統的限制所以目前是無解的，對於blog的新鮮人或許還沒有影響(誰知道你的blog能不能撐上個三年呢？)，但對於老blogger這問題可就大了。若這些老文章依舊有相當的價值還是可以透過tags等技巧解決，只是若想要在月曆上標示出這些老文章就沒有辦法囉。目前也可以期待三年之後blogger能夠來個大改版，順便加上許多網友引頸期盼的tag與月曆功能吧。(如果還能夠一併整合 Google Calendar那就更完美了。)