土曜日, 8月 25, 2007

為 Blogger 加入整合日曆 Archive Calendar

原作者:Abin
原始文章:http://abintech.azhai.org/2007/02/blogger-archive-calendar.html

先把存檔頻率改成「每日」,勾選「先顯示最舊的文章」,樣式設成「Flat 清單」。

建議先進行備份。然後把以下定義放入的標籤內。
/* Archive Calendar Styles */
#Calendar {
margin: 0px;
}
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 0px;
}
#CalendarTable table th {
padding: 1px;
color: $sidebarcolor;
margin: 0;
}
#CalendarTable table td {
height: 25px;
color: $sidebartextcolor;
text-align: center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: $sidebarcolor;
}
#CalendarTable .Today a {
color: #fff;
}
#CalendarTable .Weekend {
color: #997777;
}
#Calendar .act {
color: #fff;
padding: 4px;
}

接着是Javascript函示,也請放入<head>裏。
<script type="text/javascript">
//<![CDATA[ <!-- Script functions for generating Archive Calendar: ArchiveCalendar(), archiveurl(), YearMonth(), Calendar(), PrevMonth(), NextMonth(), function GoToday(), refreshTable() -->
function ArchiveCalendar() {
this.PrevMonth = PrevMonth;
this.NextMonth = NextMonth;
this.GoToday = GoToday;
this.refreshTable = refreshTable;
this.YearMonth = YearMonth;
this.Calendar = Calendar;
this.archiveurl = archiveurl;
this.week_label = new Array("一","二","三","四","五","六","日");
this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.today = new Date();
this.cur_day = new Date();
this.blogarchivename = new Array ();
this.thisarchive = 0;
this.base = '';
}

function archiveurl(idx) {
url = this.base;
url += this.blogarchivename[idx].slice(0, 4) + '_' + this.blogarchivename[idx].slice(4, 6) + '_' + this.blogarchivename[idx].slice(6) + '_archive.html';
return url;
}

function YearMonth(date_obj) {
year = date_obj.getFullYear();
thisMonth = this.month_label[date_obj.getMonth()];
out = year+'-'+thisMonth;
return out;
}

function Calendar(date_obj)
{
year = date_obj.getFullYear();
thisDay = this.today.getDate();
thisMonth = this.month_label[date_obj.getMonth()];
nDays = this.month_days[date_obj.getMonth()];
if (date_obj.getMonth() == 1 &&(((year % 4 == 0) && (year % 100 != 0)) (year % 400 == 0)))
nDays = 29;
IsitNow = date_obj;
IsitNow.setDate(1);
startDay = IsitNow.getDay() - 1;
if (startDay < startday =" 6;" out="'';">';
out+='<tr>';
for (var index=0;index<7;index++) style="width:25px;">'+ this.week_label[index]+'</th>';
out+='</tr>';
thisarchive=0;
while (thisarchive <= this.blogarchivename.length -1) { if(this.blogarchivename[thisarchive].slice(0,4) == year && this.blogarchivename[thisarchive].slice(4,6) == thisMonth) break; else thisarchive++; } var tab_col=0; for (index=0;index<startday;index++) tab_col="=">';
out+='<td> </td>';
tab_col++;
}
var archiveday;
for (index=1;index<=nDays;index++) { if (index<10) index_day =" new" archiveday =" '0'" index_day =" new" archiveday =" index;" tab_col="=">';
if (index==thisDay && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear()) {
out+='<td class="Today">';
if (thisarchive < href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
out+=index;
out+='</td>';
}
else {
if (tab_col <>';
else
out+='<td class="Weekend">';
if (thisarchive < href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
out+=index;
out+='</td>';
}
if (tab_col==6) {
out+='</tr>';
tab_col=0;
}
else
tab_col++;
}
if (tab_col>0) {
for (var si=0;si<(7-tab_col);si++) { out+='<td> </td>';
}
out+='</tr>';
}
out+='</table>';
return out;
}

function PrevMonth() {
thisMonth = this.cur_day.getMonth()-1;
year = this.cur_day.getFullYear();
if (thisMonth<0) thismonth =" 11;" year =" year-1;" thismonth =" this.month_label[thisMonth];" cur_day =" new" thismonth =" this.cur_day.getMonth()+1;" year =" this.cur_day.getFullYear();">11) {
thisMonth = 0;
year = year+1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}

function GoToday() {
this.cur_day = new Date();
this.refreshTable();
}

function refreshTable() {
document.getElementById('CalendarMonth').innerHTML = this.YearMonth(this.cur_day);
document.getElementById('CalendarTable').innerHTML = this.Calendar(this.cur_day);
}
//]]>
</script>

之後請尋找以下一段…
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>

然後整個取代改成下面這一段…
<b:includable id='flat' var='data'>
<!-- Generate Archive Calendar -->
<center>
<table border='0' cellpadding='0' cellspacing='0' id='Calendar'>
<caption>
<a href='javascript:;' onclick='Calendar.PrevMonth();' title='Previous Month'><< </a>
<a href='javascript:;' onclick='Calendar.GoToday();' title='Back to Today'> <span id='CalendarMonth'/> </a>
<a href='javascript:;' onclick='Calendar.NextMonth();' title='Next Month'> >></a>
</caption>
<tr>
<td class='act' id='CalendarTable'> </td>
</tr>
</table>
<script type='text/javascript'>
Calendar = new ArchiveCalendar();
Calendar.base = 'http://angelagain.blogspot.com/';
var offset = Calendar.base.length;
<b:loop values='data:data' var='i'>
archUrl = '<data:i.url/>'.slice(offset);
Calendar.blogarchivename.push(archUrl.slice(0,4) + archUrl.slice(5,7) + archUrl.slice(8,10));
</b:loop>
Calendar.refreshTable();
</script>
</center>
</b:includable>

黑色的地方請自行更改。

這個日歷的時間排序為「一、二、三、四、五、六、日」,而我的根據個人喜好排序為「日、一、二、三、四、五、六」,星期六、日的顏色改成紅色。有興趣修改的話請看看原作者的留言和自己多多加油。

0 件のコメント: