網頁

星期二, 7月 08, 2008

嘗試一個新的外掛-日曆文章列表

很久以前,我曾經嘗試在部落格放上日曆的外掛,就是類似無名的那種行事曆,可惜最後以失敗告終。

當時就是參考 「在Blogger上安插月曆( Calendar) - IE 修正版」,可是千試萬試,就是沒有辦法把個日曆給弄出來。

一直我就覺得奇怪,這麼幾年下來,為甚麼從來沒有人寫出容易安裝的日曆外掛呢?

經過一年的磨練,不上不下的我也寫了幾個自認為還不錯的 blogger 外掛,功力雖然還是半吊子,但總算是可以輕易的把 JS code 看懂,於是乎前幾天心血來潮,就把壩子的那篇教學仔細了研究一番,總算讓我有了一些初步的成果。

Calendar.jpg

整個外掛還在待修的階段,因為我這次試著完全不用 jQuery 寫,果然遇到很多問題,例如 DOM ready 的載入,在 IE 好像會不正常(已修正),FF 就完全正常。

其實放棄 jQuery 對於個業餘的程式寫作家真不是個好主意,不但浪費寫程式的時間,自己寫出的替代功能又沒有人家精心寫出的 framework 來的漂亮,不過會這麼做當然是有理由的,可以說是一次小小的嘗試,關鍵就是希望能多瞭解一些 Javascript 真正的內涵,而整隻外掛寫完,真的讓我受益很大。

當然,也更能體會 jQuery 或是 prototype 等 JS Library 的強大與可貴之處,這些前輩們的心血真是造福了我們這些小朋友啊!

這個外掛本來我是想要當作新的標籤選台器的附加功能之一,現在還在評估這個可能性,但無論如何,應該會先以單獨的外掛形式發表。

現階段遇到的主要問題是用 IE 在我的部落格上會看不到,但是在我的測試部落格上,IE 卻完全沒有問題,其他的問題還有 CSS 的格式設定,我還搞不清楚怎麼調整比較恰當(問題已修正,請重新安裝,並參考最後的格式設定),如果對這個外掛有興趣的朋友,或是看過壩子那篇文章,卻搞不出個所以然的朋友,也請拿去試試,順便提供我一些設計上的意見,感恩啊!

安裝方式比壩子的方法簡單個...100 倍而已,請依照下列步驟:

  1. 將以下程式碼貼入任何一個 「HTML/Javascript」 網頁元素

    <div id="blogCalendar"></div>
    <script src="
    http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    Calendar.base='YourBlogName.blogspot.com';
    Calendar.timeZone='-05'; //美國時間
    Calendar.drawTable();
    </script>


    大功告成

咦,好像只有一個步驟,應該夠簡單了吧!

記得要把紅色的部份改成自己的部落格喔!

喔還有,時區也要設定,台灣不用改(預設+08),其他國家請自己改成相對應的時區。

OK,就先這樣吧,希望你們會喜歡囉!

更詳細的請看 7/11 更新

附註:

要得到比較好的外觀,可以參考下面的 CSS 設定,只要把下面的程式碼加到外掛後面即可:

<style>
#blogCalendar {
margin-left:15px;
display:block;
text-algin:center;
border:2px dotted #ccc;
}
#CalendarCaption a
{
text-decoration:none;
}
#CalendarCaption{
border-bottom:1px solid #999;
width:80%;
margin:auto;
}
#CalendarTable a{
font-weight:bold;
color: blue;
}
.Today{
background: #ddd;
text-decoration:none;
}
#CalendarFooter{
padding-left:25px;
}
.yearInput{
background:yellow;
}
#monthTable{
color:black;
background:#eee;
}

</style>

54 則留言:

  1. 正!太正了!

    我很需要這個呢......

    黨與國家感謝您orz

    回覆刪除
  2. 這個如何?雖然說檔案很大,也蠻麻煩的..

    Blogger Calendar Archive:

    http://yggomelprup.googlepages.com/calendar_instructions.html

    回覆刪除
  3. Hi, LVCHEN:

    小婆就蠻佩服你們這些會寫些外掛程式來嘉惠我們這些不會寫程式的使用者,感謝!

    這兩天我是在這家挖寶,好像也看到有關日曆文章列表的文章,不過哩有看沒有懂,因為我沒啥慧根。看你要不要去晃晃,說不定你一看就明白。

    等一會兒,我也去霸子那裡瞧瞧,湊個熱鬧!

    >.^

    回覆刪除
  4. 感謝大家提供的資訊, nekki 提到的那個外掛的外觀正是我需要的,讓我來研究一下該如何改進,至於 Annie 提到的,正是我自行研究出來的部份之一,原來已經有人提過那些問題,不過 LVCHEN 的研究更先進喔!
    可能到最後還是得改回用 jQuery 寫比較好,初步實驗果然是 IE 在 DOM 載入的問題...唉...
    白天沒空,等我晚上再改吧。

    回覆刪除
  5. 哈....裝好了!...不到30秒搞定阿
    真棒!!
    (可以自定 星期一二三四五六日變成別的字嗎...? ....貪心不足蛇吞象...:b)
    (即使不行我還是會忠實地使用的...呵~~)

    回覆刪除
  6. 謝謝熱心的 LVCHEN 到我的部落格幫我回答我的問題, 我最近在寫別的東東, 等告一段落再來'翻舊帳'...

    回覆刪除
  7. To liuph, 不不不,貪心正是進步的原動力,請儘量吞...

    只要加入兩行參數就可變中文:
    Calendar.week_label = [" 日 "," 一 "," 二 "," 三 "," 四 "," 五 "," 六 "];
    Calendar.month_label_real = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

    簡單吧!

    To Boy39, 別客氣,大家互相研究才會進步嘛!

    回覆刪除
  8. Hi, LVCHEN:

    很開心你專程到 BOY39 家回答他的問題
    就如你所說的
    大夥兒互相切磋才能讓咱們的部落格圈使用上更方便

    我的文章產生率太低了
    目前暫不打算用
    不過我會記得的
    人呀是善變的
    說不定哪一天又想要用了再來你家挖寶囉~

    很謝謝你提供這個程式碼
    就如我之前就說過的~

    你真好!

    >.^

    回覆刪除
  9. 首先感謝製作一個這般簡便的月曆程式,比我先前那個簡單好用多了。其餘跟背景顏色問題我應該會慢慢調整。
    只有一個問題向您報告:那就是當一日有多篇文章時只能顯示最後一篇,並不能全部顯現。
    再次感謝^^

    回覆刪除
  10. To Randy, 謝謝你幫我測試。
    可是我試了幾次,同一天的文章都有出來啊??
    不知道哪裡有問題,可以請你告訴我是您站上幾月幾號的文章,方便我除錯嗎?

    回覆刪除
  11. Hi, LVCHEN:

    我試著拷貝貼入了你的外掛檔
    但是為什麼往前走(June, May, April, ...)之後
    再往後五月份六月份七月份跑的時候
    每次走到六月份就不走了

    給了一個訊息:

    行:2
    字元:1
    錯誤:'undefined' is null or not an object
    程式碼:0
    URL:http://anniechg.blogspot.com/

    FYI.

    回覆刪除
  12. Hi, LVCHEN:

    我一月十八日有發表兩篇文章
    利用你的外掛月曆文章列表程式
    兩篇都可以 show 出來

    FYI.

    我暫先將你的月曆放在右側欄東方黃曆下方
    你可以幫我看一下「June」問題嗎?
    謝謝!

    至於 Today 未能居中放置
    我要再測試一下你所放的 style 指令
    看看到底為什麼會這樣子

    >.^

    回覆刪除
  13. Hi, LVCHEN:

    我又發現了一個奇怪的現象

    2007 July 開始往前的月份竟都只有廿八天
    i.e. June, May, April, March, ... 2007

    FYI.

    回覆刪除
  14. 謝謝 Annie 幫我抓蟲,我已經修正了。
    至於 today 無法置中,這是為了整體版面的問題,如果一定要調整它的位置,請使用 padding-left(最好不要用 margin)

    回覆刪除
  15. Hi, LVCHEN:

    padding-left 要加在 Style 的 Today 裡嗎?

    像你目前用的 Today 空一格就很好
    還有你的 Calendar 虛線寬度也正好

    >.^

    回覆刪除
  16. To Annie, 是加在 style 沒錯。不過應該要加在 #CalendarFooter裡比較好。

    回覆刪除
  17. Hi, LVCHEN:

    OK.

    已改好了。

    如果外框能是圓弧角,那就太好了。

    我得去 Google 一下~

    謝謝!

    >.^

    回覆刪除
  18. 我可以請問你說要複製在html的哪裡呀?
    我複製了之後按預覽,出來的是窗說:你目前的頁面將關閉,因為我是第一次改這個,可以告訴我要貼在什麼位置嗎??
    謝謝你

    回覆刪除
  19. To 胖胖, 試試我這個安裝程式

    基本上只要安裝在HTML/Javascript 的網頁元素裡,就可以搞定了!

    回覆刪除
  20. 很棒耶~拿來用了喔!!
    謝謝~

    回覆刪除
  21. 真好 不過可以把下面Today 09/16/2008 刪掉嗎

    回覆刪除
  22. To Lizy,

    沒問題啊!請在 css 裡加上

    #CalendarFooter{
    display:none;
    }

    回覆刪除
  23. LVCHEN大,謝謝你
    這個日曆很好用!!
    而且一下子就裝上去了

    但是我有個BLOG是私人使用
    也想要使用此功能
    但它裝上後似乎讀不到
    會開始一直跑一直跑,不會停下來。

    想請問有辦法可以解決嗎?
    謝謝!!

    回覆刪除
  24. LVCHEN大你好
    我今天有空就在尋找如何讓權限未對外開放的BLOG可以使用各種外掛。

    目前有想說,無法正常使用外掛是因為外部處理資料的程試無法讀取自已的BLOG內文所致,接著有查到這些外掛程式似乎是掛在GOOGLE的網路程式平台上面執行,所以我如果開放了權限給網路程式平台的擁有人,以供讀取我BLOG的內容,這樣子就可以正常使用外掛了嗎?

    但我對網頁程式的相關知識有限,在短時間內除了到處找方法外不太可能自已寫個什麼來解決,如果在有設定私人權限的BLOG上面完全無法解決此類問題的話,請跟我說完全辦不到~不然我會一直尋找無法解決的東西~~呵


    總之謝謝你們寫很多好用又好裝的外掛造福大家

    回覆刪除
  25. To Alderis,
    使用這些外掛的最重要條件之一,就是必須能夠讀取 blogger 饋送的資料,通過使用 Google 提供的 API,加以處理組合後,才能達到我們想要得效果,如果無法讀取 API,就無解了!

    私人的格就是有這一樣的問題,因為權限沒有開放,無法讀取到資料,不過反過來說,如果資料可以被一般人讀取到,那還有隱私嗎?

    其實要在私人的部落格做到如日曆+文章列表的類似的方法不是沒有,但是限制很多,而且無法讀到所有的資料,我記得還是有人做出來,您可以仔細搜尋看看。

    回覆刪除
  26. 感謝! 很喜歡LVCHEN大所製作的一系列外掛
    安裝或移除都很方便 乾淨無負擔 XD

    另外想請問一下
    是否能將六日變色呢? 就是標題跟日期都改顏色
    畢竟,這樣才有週末的fu~嘛 :p

    回覆刪除
  27. To Tongki,
    簡單啊!
    請在安裝完成後,修改 Calendar.week_label 這個參數:
    Calendar.week_label = ['&nbsp;<span style="color:red">日</span>&nbsp;','&nbsp;一&nbsp;','&nbsp;二&nbsp;','&nbsp;三&nbsp;','&nbsp;四&nbsp;','&nbsp;五&nbsp;','&nbsp;<span style="color:red">六</span>&nbsp;'];

    這樣就行啦!

    回覆刪除
  28. 嗯...好像沒有回答完整...

    要整排都變色的話,還要在 <style></style><style></style> 裡加上兩行

    #CalendarTable table tr td:first-child{color:red;}
    #CalendarTable table tr td:last-child{color:red;}

    呵呵,這樣應該沒問題了吧!

    回覆刪除
  29. 太強大了! 真感謝!!

    thetransporati.blogspot.com

    回覆刪除
  30. 能夠自訂"today"這個字的顯示文字嗎?我想改成"今日"或"今天",或是"現在",另外不知道為甚麼,我的年份總是抓不到2007年跟2006年~

    回覆刪除
  31. Emi,

    謝謝你的提醒。
    我會放上一個修正的版本,並公告教大家怎麼修改那個 today 成中文或其他訊息。
    請稍等幾天喔!

    回覆刪除
  32. Hi LVCHEN,

    我很開心終於在網路上閱讀到你的文,
    不過我將程式碼貼入(上+下在同一篇)後,網誌有顯現出日曆了,但是它一直跑,滑鼠點到的日期也未顯示出文章,可以請你幫我確認一下嘛?

    謝謝你唷!

    回覆刪除
  33. To Little-butterball

    嗯...一直跑是什麼意思啊??
    可以請你先暫時先掛上去,讓我測試看看嗎?

    回覆刪除
  34. 超感謝~~讓我BLOG豐富不少唷!!

    回覆刪除
  35. 好用全面。一看到留言,什麽問題都沒了。

    回覆刪除
  36. 很高興認識你LVCHEN
    謝謝你不吝嗇與我們分享你寫的外掛,
    讓我的格子開始變得有趣

    回覆刪除
  37. 親愛的LVCHEN:

    感謝您所提供的月曆外掛,嘉惠了像我這種不懂程式語法的朋友。

    我用您提供的程式碼為基礎,改成了類似網友Annie的外觀,不過我發現了一個問題,就是每個月的前面幾天的文章會顯示到前一個月,比如說我6/1發表的文章,在月曆上卻顯示到5/1去了。

    不曉得其他朋友有沒有這類問題,我很想解決卻不得其門而入,希望LVCHEN或其他朋友能提供意見,感謝。

    回覆刪除
  38. 不好意思,剛剛仔細看了一遍,只要是每個月1號的文章,在月曆上都會顯示到前一個月的1號,謝謝。

    回覆刪除
  39. 我這邊是台灣,所以要改成+08嗎?
    剛剛試著改過就解決了,
    不過我很好奇怎麼只有1號是錯誤的?

    回覆刪除
  40. To yishane,

    這是因為 blogger blog 是有時區的設定,以因應不同時區的人發表文章時不會錯亂,但是當我向google伺服器要資料的時候,伺服器雖然有你的時區設定,但在我向伺服器要資料前我是不知道的,所以若是使用了錯誤的時區,就會要到錯誤的資料。

    其實是可以多要一次資料來確定時區,但因為環保因素(!?哈),當初的設定是直接向 google 要一個月份的資料,然後我就加上使用者必須設定時區的規定來避過資料錯誤的問題,也許下一版我會想出比較好的方法,不會再因為時區造成困擾。

    回覆刪除
  41. Dear LVCHEN,
    Calendar.base='YourBlogName.blogspot.com'
    以'joygene-life.blogspot.com'無法順利完成
    但以'joygenelife.blogspot.com'即可順利完成
    請問YourBlogName是否不可帶有"-"符號?
    再請問有無補救辦法?

    回覆刪除
  42. To joygene,

    我剛剛去測試,好像都可以啊?
    請問您有安裝成功了嗎?

    回覆刪除
  43. 真的很好用喔~謝謝你~~

    回覆刪除
  44. hello

    我想在我的blogger顯示以下網內的東西
    http://www.uniqlo.com/calendar

    不知你可以幫幫我嗎?

    回覆刪除
  45. 你好,感謝您的分享.讓我可以那麼簡單就有個美麗的月曆.我安裝之後,發現在星期幾那一行,中間空隙都不見了,黏在一起,可以麻煩您幫我看一下是哪裡出了問題嗎?感謝你~

    回覆刪除
  46. To Frank,

    空隙不見是因為你的字剛好填滿了空格。
    要加大空格可以修改 CSS:#CalendarTable table th
    例如
    #CalendarTable table th{padding:3px;}

    回覆刪除
  47. 謝謝你以開放的心, 提供給我種學不會程式語言的人,一個好用的程式.
    找了好久!找了好久!

    回覆刪除
  48. 簡潔、漂亮,適合龜毛的blogger用戶!

    回覆刪除
  49. 好像有個小bug ,
    單月文章太多的話 ,
    會從單月的頭開始找不到文章 ,
    例如2/1有寫文章 ,
    最後日曆上會變黑色的

    回覆刪除
  50. 謝謝 RueiLong 你的意見,雖然下一版的開發時程並未決定,但下一版時我一定會特別注意這個問題。

    回覆刪除