主页
blogger技巧
感谢作者Abin给大家带来的日历模组 (Feed Calendar)。因为我个人不用这个hack，所以懒得测试了……全文转载……大家有问题问作者哈。
另外作者博客被封，可能要用代理才能查看原文和询问作者。
似乎比较近似我以前发的一个HACKblogger:把博客归档变成日历的又一方法(再修正），相对简单的还有利用light box和30box制作出日历的方法，点击这里查看。
作者原文的HACK增加方法：
第一個步骤，先塞入這個日曆外觀顏色的 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;
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;
posts[nActual][2] = post.link[0].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="javascript:;" onclick="BrowsePrev();" title="Previous Month"><<</a>
<a href="javascript:;" onclick="BackToday();" title="Back to Today"> <span id="CalendarCaption"> </span></a>
<a href="javascript:;" onclick="BrowseNext();" 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 的內容是不是正常，如果貼完程式發現怎麼只有兩個箭頭，那就是程式貼錯地方或貼漏了，請自己再仔細檢查一下。
友情链接
博客相关
订阅本站
3 评论:
发那多无聊的东西，一点用也没有……
写点关于杨佳的社会新闻吧！
看这个原理，一般都不需要用了，效率应该很低
我也是，连测试都懒得去做了
Tag Heuer Formula 1 Chronograph is an all in one package. Components from state of the art quality is what makes the watch. It is designed by the creators to go well with both sporty and professional lifestyle of people who are into timepieces. It is mainly prompted by the well known Formula 1 Racing Competition.
发表评论： ☆欢迎灌水☆言论自由☆交流快乐☆