2008-07-24

結合發表文章的日曆模組 (Feed Calendar)

一年多前參考國外某些人作法修改,做了一個 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>&nbsp;</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>&nbsp;</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('\"', '&#34').replace('\'', '&#39');
    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">&lt;&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#" onclick="javascript:BackToday();return false;" title="Back to Today"> <span id="CalendarCaption"> </span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#" onclick="javascript:BrowseNext();return false;" title="Next Month">&gt;&gt;</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 套用過沒問題後,再去進行壓縮瘦身。

回應: 53

LVCHEN 提到...

作者已經移除這則留言。

LVCHEN 提到...

sorry 我以為你忘了時區設定,原來是我忘了下拉,原來你早就想到啦。

請直接忽略我的前一則留言(我已經自行了斷了)

我之前也為這個問題苦惱好久,因為美國還有日光節約時間,很容易發生抓錯文章的問題,最後才決定現在的方式,利用抓文章的時區來動態修正,才算是順利解決。

我現在看到的問題是,json feed 應該也有 timezone 的設定,不過你程式裡好像沒有。

比較麻煩的是,JSON feed 一定要使用者當地的 timezone,才不會有問題,而且那時區還必須是真實的時區,因為美國的日光節約,從部落格裡取回的時區有時會不正確,找到的文章有時會有誤差,所以我才要使用者設定自己的真實時區。

我覺得這個問題你應該還是要在文章中提一下,免得非台灣的 blogger 使用者套用後有問題。

LVCHEN 提到...

喔,還有一件事,就是如果一天有兩篇以上的文章會怎麼樣呢?
現在看來好像只能顯示一篇耶!

Abin 提到...

To LVCHEN:
說實話時區的問題我沒好好去處理,因為我自己用不到... (XD),發表的文章裡有一個含時區的標準時間,所以我在 Feed 裡也是直接用該時區去抓文章,那是靜態資料,所以找資料時不是透過 Blog 的系統時間、或是使用者的 local 時間,應該都找得到才是。會不會有問題我也不知從何測起... (XD)
另外一天有兩篇狀況不知道你有實際測到嗎?我有特別處理(用你的辦法),因為我 Blog 大部分都是一天一篇,所以這裡看不到效果。我另一個 Blog 的 4/22 就是一天兩篇,你可以看看效果。

So ist es 提到...

之前已經依照「有練過的叔叔」的指示,一步一步安裝舊日曆,當時已經覺得很讚了...現在又有新功能,真是期待啊!想請教一下,這款 Feed Calender 是不是和最新文章列表一樣,只能安裝於「開放的 Blogger 」呢?因為我的 Blogger 屬於個人記事本用途,目前為止都是鎖上權限的,之前有試過最新文章列表都失敗,不知道還能使用這個新日曆嗎?先致上最誠意的感謝啦!

匿名 提到...

辛苦您了 :-)

LVCHEN 提到...

我突然覺得,你的方法更 make sense 呢!
只有一篇用文章本身,如果有兩篇以上再用search 功能,真是太棒了!

晚點再來修改我的日曆!

Unknown 提到...

非常謝謝你的教學,非常簡單直覺
另外有個小小的疑問,當點選有發表文章的日期,我的會另開新分頁來顯示文章,如果不想要另開分頁顯示,請問該如何修改?

謝謝

Abin 提到...

To Silent Aquarius:
您的問題很好解決,「不想要另開分頁顯示」,只要搜尋 Javascript 中、「target="blank_"」這一句拿掉就行了。

小云 提到...

Abin您好:
真的非常感謝您的教學,非常簡明易懂,模組又好用。
我將您的文章引用到自己的部落格中,同時註明出處與連結,希望您不會介意:P

Abin 提到...

To 小云:
這樣的引用是 OK 的,很高興我的文章能對你有點幫助。

Mandy Wu 提到...

Abin你好,非常感謝你的分享與詳盡的教學,我用在我的Blog上了,效果真的很棒,另外還引用了你的文章出處,再次誠摯的感謝你!

很喜歡Grado耳機的男生 提到...

抱歉.請問個問題
我再Html修改後,再網誌的上面竟然多出了一些英數字,這該怎樣解決呢?
(日曆有成功)
英數字內容如下:* 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; }

Abin 提到...

To 立志考上建中的小男生:
第一個步驟的程式碼,是「放在 <head> 標籤內、定義 CSS 樣版的區段裡」,該區段是在<style>標籤內,請你仔細看完文章再發問。

很喜歡Grado耳機的男生 提到...

喔~
是我做太快了
抱歉....
麻煩您幫我解決問題~

很喜歡Grado耳機的男生 提到...

請問一下
我有榮幸張貼您的文章到我的blog嗎?
這篇使我受益良多
我想讓這篇文章能夠發揚光大
(好像有點誇張= =)
如何?

匿名 提到...

謝謝提供這麼好的日曆︿︿

匿名 提到...

請問怎樣修改才可以將星期的排序變成由星期日開始?
即是「日 一 二 三 四 五 六」這樣。

Abin 提到...

To 立志考上建中的小男生:
我的文章歡迎轉貼,不過記得標明引用的出處(網址)就行了。

Abin 提到...

To PT:
我想你是沒有仔細看我文章倒數第二段說的:「如果想要調整日曆裡的 Layout 這類客製化的問題(像是一週第一天是禮拜天、週末的顏色或標題調整),請先檢查之前那篇文章回應斟酌修改。」

很喜歡Grado耳機的男生 提到...

謝謝啦~

Davin Chao 提到...

這個月曆...
真的很棒!

匿名 提到...

To Abin,

參考過你舊那篇"最新回應"更改週六,日顏色的教學,可是在新的這個語法裡不能更改. 在語法裡我找不到可以改的地方. 我之前是使用你舊的版本,可是換了新的這個就改不到了.

無論如何,還是謝謝你的這個日曆,很棒!
而且現在可以顯示文章標題了,更棒!
謝謝.

Epic 提到...

你好,感謝你的文章讓我可以使用月曆模組。但我發現在使用月曆模組的">>"與"<<"時,它的月份會呈現loading狀態,而我點選您blog上的月曆模組也是,請問該如何排除此狀況呢,謝謝。
附上我的blog,再次感謝
http://epic0629.blogspot.com/

Abin 提到...

To J:
如果只是更改週末的顏色,只要改 CSS 中關於週末顏色的定義即可。像是下面這段:
#CalendarTable .Weekend {
color: #997777;
}
其中顏色代碼 (RGB:#997777) 就是顏色的設定值,可以依照你喜歡的顏色調整。

Abin 提到...

To epic:
會顯示 Loading 是正常的,這段時間代表正在抓資料、重新調整日曆的內容。
如果一直停留在 Loading、沒有切換到正確的月份,內容也沒更新,那可能是網路的問題、更新資料一直沒能正確完成。
你的 Blog 和我的日曆我目前使用看起來都是正常的,出了問題的應該是你的網路環境有狀況。

匿名 提到...

to abin,

我的意思是,照你舊的那篇文章,更改六,日兩天和它的顏色,也需要改這個語法:{if (tab_col < 5),改成 if (tab_col > 0 && tab_col < 6}可是我在新的這一個語法裡面,找不到可以改的地方. 還是我自己看錯了? 因為舊的版本我是成功改到的.

謝謝.

Unknown 提到...

一 二 三 四 五 六 日
和下方的1 2 3 4 5 ....出現對齊上的問題
找您之前文章中所提到的out+=
發現您新的語法中並沒有此部份,請問我該修改那部份,才能對齊呢?

Abin 提到...

To J:
新的語法我只不過有改「變數名稱」,位置是一樣的。原來變數叫 tab_col,新的叫 nTableCol,不要只是 search & replace,看一下程式碼很容易就找到了。
所以,請找 if (nTableCol < 5),改成 if (nTableCol > 0 && nTableCol < 6)

Abin 提到...

To ned:
你和上篇回應一樣,只會 search & replace,根本也沒看程式碼,新版程式裡我換了變數名稱,本來是 out,我改成 sCalendarCode,因此你「找不到]...
同樣的,請把 var sCalendarCode = '<table><tr>'; 取代成 var sCalendarCode = '<table style="text-align:center;"><tr>'; 就可以解決對齊的問題了。

匿名 提到...

to abin,
謝謝你,因為真的不熟悉這些語法,也看過很多次都找不到問題,所以才請教的...無論如何,謝謝回覆和指教.

楊楊 提到...

你好:
請問,我的 Blogger 中,用IE看都是靠左,我該如何置中?
我之前有在用無名:http://www.wretch.cc/blog/joshua7532


我想弄得跟它一樣,但把欄位都靠到中間我不太清楚,請問我該怎麼做比較好?
順便補問一個,我的"文章標籤"沒辦法顯示,在sidebar裡面,是為什麼呢?文章內文裡面也找不到,我很困擾.. > <"

::: Pinggis's Works ::: 提到...

好棒的分享
我的小格也用上了.
http://pinggis.blogspot.com/
謝謝分享!!

Unknown 提到...

var posts = new Array();
for (var i = 0, post; post = entries[i]; i++) {

你好,以上代码会报错。
包括作者你的,还有以上朋友的部落格都会有同样的情况

匿名 提到...

你好,代码会报错。
包括作者你的,还有以上朋友的部落格都会有同样的情况.

var posts = new Array();
for (var i = 0, post; post = entries[i]; i++) {

Unknown 提到...

网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; IE7Pro; CIBA; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
时间戳: Sat, 2 May 2009 03:12:33 UTC


消息: 'undefined' 为空或不是对象
行: 924
字符: 29
代码: 0
URI: http://abintech.azhai.org/2008/07/feed-calendar.html?showComment=1241145060000

Abin 提到...

To Leonardo:
我非常肯定是你個人的問題,不知道是瀏覽器還是系統的狀況。
我的文章,在我自己的數台電腦上、不同的瀏覽器 (IE6,IE7,FF3),都沒有什麼代碼會報錯的情況,從上面其他人的部落格都引用並且也沒回報錯誤來看,大家也都沒問題。如果你是用 IE8、那種我不會用的瀏覽器,遇到不相容的狀況,請你換掉瀏覽器,畢竟我用的語法,是符合大部分瀏覽器的標準,IE8 不相容的問題,目前短時間內也沒什麼解決的辦法(我暫時也不會修正)。

Abin 提到...

To Leonardo:
原來是要在 IE 下、而且 Calendar 裡面沒有文章的時候,這個錯誤才會顯現~我每個月都少說會灌一篇文章,所以不容易檢視到這個錯誤發生。不過,我的感覺是,即使有這個錯誤發生,應該也不影響瀏覽、還有其他模組作用,只不過左下角出現「發生錯誤」看起來很礙眼罷了~
Anyway,問題已經解決了,癥結是因為當該月份沒有文章,所以去取回當月文章的陣列變數 entries 變成空的(或未定義),當另一個變數 post 要去抓 entries 這個陣列裡的某個變數時,自然會指定不到、跳出變數為空的錯誤。所以要解決這個問題,只要在函式 collectPost() 裡面加兩行檢查(上文內的程式碼也已經同步修正好了):
if (entries == undefined)
return;
發現變數為空就跳出函式,錯誤就不會發生了。這個是 IE 檢查嚴格、我寫程式又不夠嚴謹所致,感謝您細心找出這個問題~

Watersky 提到...

To Abin:
  感謝你的這篇文章,讓完全不懂css文法的我照著做也有了自己的行事曆。更甚者,你在回應裡的教學也讓我能輕鬆更改成自己喜歡的格式,謝謝你。

Steven 提到...

您好,
已成功完成設置,效果很好,
感謝您的辛苦成果與大方分享。

HumanBean 提到...

請問如想改為西式的:日一二三四五六
並把六日的顏色分開指定
要怎麼改呢?
再次感謝 Abin 大

Abin 提到...

To HumanBean:
你的問題上面的留言回應裡都已經討論過,類似的問題我不想一再回答了。請參考我之前文章裡回應的修改方法來改,不過我換了變數名稱,原來變數叫 tab_col,新的叫 nTableCol。至於六日要分開,我是單純用一個 CSS 變數 weekend 來定義這兩天的顏色,如果要分開就要分別定義這兩天的樣式變數,不然只好 hard-code 了。

Singrecorder Music 提到...

您好!
您的文章行事曆設計得很漂亮,我已成功地安裝,非常感激您的教學與分享!

徐小牛 提到...

你好,不好意思打擾了,
我試著把第一段語法貼在head的標籤內,
要嘛不是出現了和立志考上建中的小男生一樣的問題(blog打開最上面一行都是語法),
不然就是系統說我語法錯物不給儲存,
(我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The content of elements must consist of well-formed character data or markup)

請問問題出在哪呢?謝謝你Q_Q~

這個應該和我用blogger沒有關係吧~"~

Abin 提到...

To 徐小牛:
這個訊息意思是你的原始碼有問題,可能是你在改範本時,部份標籤沒有正確關閉(也有是有< >標籤開始,就一定要有 </ >結尾)。你可以把範本另存新檔(副檔名 .xml),用瀏覽器 (firefox) 或工具檢查語法,就知道你的範本哪裡結構出了問題。

Allen Fung 提到...

您好,我是個來自澳門的初學者,也成功安裝了這個行事曆,感謝您的無私分享,特此留言致意。

朱哈 提到...

感謝您的教學 上一篇 我自砍啦
本來是要問您說 為什麼 我用了之後
在IE8和Opera上面 都不能正常使用
IE8 是會掉字 就譬如說 18日 有發表 那18 就會不見
Opera 則是變成
<a title="Under star, Inner Light, Danger Zone, msn之死不更新" href="/search?updated-min=2009-12-07T00%3A00%3A00%2B08%3A00&updated-max=2009-12-07T23%3A59%3A59%2B08

但是後來發現 ㄟ 開您的 就一切正常
不知道 是否是我哪裡 出錯

Abin 提到...

To 朱哈:
應該是樣板原始碼某個樣式或定義出錯了吧,不然怎麼會每個瀏覽器顯示都不一樣?你提供的訊息不足以判斷原因,沒頭沒腦,好歹要有個網頁或圖片才能知道原因吧...

朱哈 提到...

sorry 提供一下圖
ps.用ie5.5~ie6都是正常的

IE8 http://lh4.ggpht.com/_BGlrQajE0JY/Sysrcp1yhTI/AAAAAAAAAKk/q-7_jiIiVLw/IE8.JPG

Opera http://lh5.ggpht.com/_BGlrQajE0JY/SysrcieTYyI/AAAAAAAAAKo/XryXW7EDTTM/Opera.JPG

我的 blog http://quartersection.blogspot.com/

ps.我主要是以Firefox為主 看都正常

st 提到...

謝謝你的教學
很實用

creadeer 提到...

作者已經移除這則留言。

Tiffany 提到...

謝謝Abin的教學~~ 雖然我就整個給他複製過去了,然後稍微修改一下他的CSS@@

大感謝。

鳳小Mo 提到...

好棒!用了大大的方法成功將日曆安裝了!不過有一個小小的疑問,過去文章的顯示不夠明顯,不知道要去哪邊更改顏色?謝謝 >"<

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!