結合發表文章的日曆模組 (Feed Calendar)
一年多前參考國外某些人作法修改，做了一個 Blogger 用的整合日曆模組，針對發表過的文章，其實 Blogger 有內建一個網頁元素叫做「網誌存檔 Archive」，先將其屬性改成每日存檔，系統就會針對每天的文章做出一個靜態的頁面連結，然後用 Javascript 做出日曆、判斷哪些天有文章、把日前和連結整合在一起，再利用 Javascript 做出一些效果，達到還能在不同月份切換。比起當時很多人用外掛、其他網路服務幫忙，這個方法相對先進多了，速度又快，剛開始我還蠻滿意的，不過其中還是有不少差強人意的地方。首先，它利用了 Blogger 內建的 Daily Archive，所以設定和修改比較麻煩，而且系統限制只能用一個 Archive，所以有了日曆之後功能排擠，沒辦法再有其他網誌存檔的功能。第二個問題是原理，原來的辦法要求抓出「所有」的當日文章、產生靜態連結網址，然後再一個個塞進日曆中，雖然讓做出來的日曆在月份切換時反應很快，但看原始碼會看到所有文章的存檔連結，可想而知一旦時間一長文章量爆多，幾百幾千篇的文章都產生靜態連結放在原始檔裡，那應該很恐怖（所以我另一個 Blog 不敢用這個日曆）。最後，用 Daily Archive 做出來的日曆還有個討厭的問題，即使當天只有單篇文章，它不能直接顯示該文章的標題或永久連結，還是只能幫你連結到 Daily Archive 的頁面，等於要多花一個步驟多點一次連結才能看到日曆上當日的全文，感覺還挺不直覺的。結合以上要求，最好是日曆只即時抓要顯示的當月文章連結、與「網誌存檔」拖勾、日曆上還可以顯示該文章的永久連結和標題（當然如果一天有兩篇以上文章，問題也要解決），還能兼顧效能和美觀，這樣才是個功能性好的日曆。
一年多前參考國外某些人作法修改，做了一個 Blogger 用的整合日曆模組，針對發表過的文章，其實 Blogger 有內建一個網頁元素叫做「網誌存檔 Archive」，先將其屬性改成每日存檔，系統就會針對每天的文章做出一個靜態的頁面連結，然後用 Javascript 做出日曆、判斷哪些天有文章、把日前和連結整合在一起，再利用 Javascript 做出一些效果，達到還能在不同月份切換。比起當時很多人用外掛、其他網路服務幫忙，這個方法相對先進多了，速度又快，剛開始我還蠻滿意的，不過其中還是有不少差強人意的地方。首先，它利用了 Blogger 內建的 Daily Archive，所以設定和修改比較麻煩，而且系統限制只能用一個 Archive，所以有了日曆之後功能排擠，沒辦法再有其他網誌存檔的功能。第二個問題是原理，原來的辦法要求抓出「所有」的當日文章、產生靜態連結網址，然後再一個個塞進日曆中，雖然讓做出來的日曆在月份切換時反應很快，但看原始碼會看到所有文章的存檔連結，可想而知一旦時間一長文章量爆多，幾百幾千篇的文章都產生靜態連結放在原始檔裡，那應該很恐怖（所以我另一個 Blog 不敢用這個日曆）。最後，用 Daily Archive 做出來的日曆還有個討厭的問題，即使當天只有單篇文章，它不能直接顯示該文章的標題或永久連結，還是只能幫你連結到 Daily Archive 的頁面，等於要多花一個步驟多點一次連結才能看到日曆上當日的全文，感覺還挺不直覺的。結合以上要求，最好是日曆只即時抓要顯示的當月文章連結、與「網誌存檔」拖勾、日曆上還可以顯示該文章的永久連結和標題（當然如果一天有兩篇以上文章，問題也要解決），還能兼顧效能和美觀，這樣才是個功能性好的日曆。
後來經網友 LVCHEN 的提醒、看到了他做的「日曆文章列表」，哇！原來 Feed 裡新多加能指定時間範圍的參數啊！結合 JSON 的技巧，不就可以輕易地取得特定某個月的當月文章嗎？有了新的資料來源，修改之前的日曆程式，不就可以解決以上的所有問題嗎？知道之後整個寫程式的熱血又來了，花了一兩天測試修改，終於做出這個新的日曆模組。整段程式碼不到 5K（比前個版本更小）、如果搭配前篇文章提到壓縮 Javascript 的技巧，還可以壓到 3K 以下！和之前以網誌存檔當資料來源做出來的 Archive Calendar 原理不同，這次是利用 Feed 來搞，所以就叫它 Feed Calendar 囉！如果你用過之前的程式，記得先手動移除修改的部份、備份完整的原始樣板，然後再開始下面的動作。（修改程式碼還是需要一點程度，也有一定風險，如果你是什麼都不懂的使用者，請直接參考 LVCHEN 的安裝外掛，比較簡單風險又低，效果也差不多～）
第一個步驟，先塞入這個日曆外觀顏色的 CSS 樣式定義。如果你用過之前日曆，那就不用改啦，因為我用了一樣的定義，打開版面配置、修改樣板原始碼的 HTML，放在 <head> 標籤內、定義 CSS 樣版的區段裡：
/* Feed Calendar Styles */
#Calendar {
margin: 0px;
}
#Calendar .act {
color: #fff;
padding: 4px;
}
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 0px;
}
#CalendarTable table th {
padding: 1px;
color: #777;
margin: 0;
}
#CalendarTable table td {
height: 25px;
color: #999;
text-align: center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: #777;
}
#CalendarTable .Today a {
color: #fff;
}
#CalendarTable .Weekend {
color: #997777;
}
如果對顏色、字型大小、靠左靠右有特別需求的，請自行改上面的樣式。第二個步驟是重點，就是抓 Feed、產生日曆主要的 Javascript 程式碼，一樣是貼在 <head> 標籤後面，如果你之前也有 Hack 放過 Javascript，放在一起就好：
<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for generating Feed Calendar: generateCalendar(), collectPost(), BrowsePrev(), BrowseNext(), BackToday() -->
var baseURL = '';
var currentDay = new Date();
var today = new Date();
var monthLabels = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var weekLabels = new Array('一','二','三','四','五','六','日');
function generateCalendar(){
var thisYear = currentDay.getFullYear();
var thisMonth = monthLabels[currentDay.getMonth()];
var thisDay = today.getDate();
var nDays = monthDays[currentDay.getMonth()];
if (currentDay.getMonth() == 1 &&(((thisYear % 4 == 0) && (thisYear % 100 != 0)) || (thisYear % 400 == 0)))
nDays = 29;
var IsitNow = currentDay;
IsitNow.setDate(1);
var startDay = IsitNow.getDay() - 1;
if (startDay < 0)
startDay = 6;
var sCalendarCode = '<table><tr>';
for (var index=0;index<7;index++)
sCalendarCode+='<th style="width:25px;">'+ weekLabels[index]+'</th>';
sCalendarCode+='</tr>';
var nTableCol=0;
for (index=0;index<startDay;index++) {
if (nTableCol == 0)
sCalendarCode += '<tr>';
sCalendarCode+='<td> </td>';
nTableCol++;
}
for (index=1;index<=nDays;index++) {
if (nTableCol==0)
sCalendarCode+='<tr>';
if (index==thisDay && today.getMonth()==currentDay.getMonth() && today.getFullYear()==currentDay.getFullYear())
sCalendarCode+='<td id="Day'+index+'" class="Today">';
else {
if (nTableCol < 5)
sCalendarCode+='<td id="Day'+index+'">';
else
sCalendarCode+='<td id="Day'+index+'" class="Weekend">';
}
sCalendarCode+=index;
sCalendarCode+='</td>';
if (nTableCol==6) {
sCalendarCode+='</tr>';
nTableCol=0;
}
else
nTableCol++;
}
if (nTableCol>0) {
for (index=0;index<(7-nTableCol);index++) {
sCalendarCode+='<td> </td>';
}
sCalendarCode+='</tr>';
}
sCalendarCode+='</table>';
document.getElementById('CalendarTable').innerHTML = sCalendarCode;
var sFeedURL = baseURL + '/feeds/posts/summary?orderby=published&published-min='+thisYear+'-'+thisMonth+'-01T00:00:00&published-max='+thisYear+'-'+thisMonth+'-31T23:59:59&max-results=50&alt=json-in-script&callback=collectPost';
var script = document.createElement('script');
document.getElementById('CalendarCaption').innerHTML = '<span class="loading">Loading <blink>...</blink></span>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
function collectPost(json) {
document.getElementById('CalendarCaption').innerHTML = currentDay.getFullYear()+'-'+monthLabels[currentDay.getMonth()];
var entries = json.feed.entry;
if (entries == undefined)
return;
var nDay = 0, nCount = 0, nActual = 0;
var posts = new Array();
for (var i = 0, post; post = entries[i]; i++) {
nDay = parseInt(post.published.$t.substr(8,2),10);
if (i>0&&nDay==parseInt(entries[i-1].published.$t.substr(8,2),10)) {
var actualDay = post.published.$t.substr(0,10);
var actualTimezone = post.published.$t.substr(23,6);;
posts[nActual-1][1] = posts[nActual-1][1]+', '+post.title.$t;
posts[nActual-1][2] = baseURL +'/search?updated-min='+actualDay+'T00%3A00%3A00'+encodeURIComponent(actualTimezone)+'&updated-max='+actualDay+'T23%3A59%3A59'+encodeURIComponent(actualTimezone);
} else {
posts[nActual] = new Array(3);
posts[nActual][0] = nDay;
posts[nActual][1] = post.title.$t;
var j = 0;
while (j < post.link.length && post.link[j].rel != "alternate")
j++;
posts[nActual][2] = post.link[j].href;
nActual++;
}
}
for (i=0;i<nActual;i++) {
posts[i][1] = posts[i][1].replace('\"', '"').replace('\'', ''');
document.getElementById('Day'+posts[i][0]).innerHTML = '<a title="'+posts[i][1]+'" href="'+posts[i][2]+'" target="blank_">'+posts[i][0]+'</a>';
}
}
function BrowsePrev() {
var thisMonth = currentDay.getMonth()-1;
var thisYear = currentDay.getFullYear();
if (thisMonth<0) {
thisMonth = 11;
thisYear = thisYear-1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}
function BrowseNext() {
var thisMonth = currentDay.getMonth()+1;
var thisYear = currentDay.getFullYear();
if (thisMonth>11) {
thisMonth = 0;
thisYear = thisYear+1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}
function BackToday() {
currentDay = new Date();
generateCalendar();
}
//]]>
</script>
好啦！樣板原始碼的修改到此搞定存檔，接下來安排這個新日曆模組的位置。換到「網頁元素」的設定，在你想塞入日曆的地方新增一個網頁元素、選擇 HTML/JavaScript 類型。接下來給個標題，然後貼入以下的 HTML 程式：
<center>
<table border="0" id="Calendar" cellpadding="0" cellspacing="0">
<caption>
<a href="#" onclick="javascript:BrowsePrev();return false;" title="Previous Month"><<</a>
<a href="#" onclick="javascript:BackToday();return false;" title="Back to Today"> <span id="CalendarCaption"> </span></a>
<a href="#" onclick="javascript:BrowseNext();return false;" title="Next Month">>></a>
</caption>
<tr>
<td id="CalendarTable" class="act"> </td>
</tr>
</table>
<script type="text/javascript">
generateCalendar();
</script>
</center>
儲存搞定！接下來就可以檢查新的日曆模組能不能動囉～當然，根據以上的原理來說，這個新的日曆模組應該沒啥問題（我自己所有的 Blog 也都裝來用啦），不過如同大部份透過 Feed 抓文章的 Hack 一樣，由於要仰賴 Feed 即時連線抓取資料來源，這點會受到網路影響，所以快速猛點連結時切換的反應會比較慢（這是 Feed 的原罪，沒辦法），所以如果日曆有出現、但該日期沒有文章連結，請先檢查 Feed 的內容是不是正常，如果貼完程式發現怎麼只有兩個箭頭，那就是程式貼錯地方或貼漏了，請自己再仔細檢查一下。如果想要調整日曆裡的 Layout 這類「客製化」的問題（像是一週第一天是禮拜天、週末的顏色或標題調整），請先檢查之前那篇文章的回應斟酌修改（如果看不懂、那還是不要以身試法啦）。
BTW，根據前一篇文章提到的瘦身法，步驟二中的那一狗票 Javascript 用 Compresser 一整個壓縮後再塞回去（建議就壓 //<![CDATA[ 和 //]]> 這兩行中間的那些程式碼，處理完再貼回原來的位置），可以讓程式碼更小更節省讀取的時間，缺點當然是變得不可讀、修改不易，所以建議原始 Javascript 套用過沒問題後，再去進行壓縮瘦身。
本文引自 http://abintech.twidv.com/2008/07/feed-calendar.html
沒有留言:
張貼留言