2009-03-18

增加文章更新時間 (Show Post Update Time)

我的 Blog 大多都是一些個人筆記,有參考性的筆記除了分享給大家看,連自己有需要時三不五時也要來回顧和參考一番。不過因時制宜,有些東西總會因為時間變化而些要作調整,尤其像之前關於 LinkStation 的改機資訊,也因為機器變動、軟體和參考下載的網址有更新,所以在閱讀筆記的時候,不時也會一併更新已經失效和變更的部份。Blogger 顯示的文章時間,用的是「發表時間」,也就是說文章一旦公開,發表的日期和時間就不會變了(除非手動修改發表時間),這樣方便文章排列時依發表前後順序來整理,但也因為這樣,哪天如果有修改過這篇文章、想標示文章最後更新的時間,只好手動在文章裡告知了!(因為 Blogger 的樣板變數,Post 裡只有發表的 timestamp,並沒有更新的時間..)

不過之前在處理 Feed 內容的時候,有注意到 Feed Content 裡除了有文章的發表時間 (published),也還有更新時間 (updated) 啊,所以只要能透過該篇文章的 Feed 內容,就可以找出該篇文章最後的更新時間,把它抓出來用不就能達到目的了嗎?從 Feed 透過 JSON 抓資料顯示是小事,但遇到的障礙有兩個,首先,現在有的 Feed 標準是「全部文章」、或「全部留言」的資訊,我要的只是單篇文章的 Feed 內容,不會要我從全部文章的 Feed 來搜尋吧?其次,就算找到單篇文章的 Feed 資料,裡面的格式又為何(會這麼說,是因為和 Google 公告的格式不大一樣)?經過幾天的奮鬥,終於讓我解決問題做出這個 Hack,由於部份用法都不在官方的說明文件裡,所以格外花時間(在確定資料內容)。

顯示文章最後的更新時間

首先是單篇文章的 Feed 網址格式。之前找到的資料,Feed 的種類有 Posts Feed (所有文章)、Comments Feed (所有留言)、Labels Feed、還有 Post Comment Feed (單篇文章的所有留言),單純一篇文章的 Feed 其實沒什麼用(而且需要先找出 Post ID),找半天好不容易被我 try 出來,單篇文章的 Feed 網址是:

http://xxx.blogspot.com/feeds/posts/default/POST-ID

有了 Feed 就簡單啦,接下來用 JSON 來抓 Post 的 Update Time。根據 JSON 的 Parse 規則,Update Time 的變數是 json.feed.entry[i].updated.$t,不過我是單篇文章啊,沒有一堆 Feed Entry,所以資料結構和一般的 Feed 又不一樣啊!後來透過直接解讀該 Feed 的內容、並用 JSON 的規格來判斷,才知道該變數應該是 json.entry.updated.$t 啊!解決這兩個關鍵的問題,要顯示文章更新時間就一如反掌了!看不懂的人沒關係,一樣複製、貼上、修改就能用這個功能了。打開管理介面、版面配置、修改 HTML 樣板原始碼(一樣要展開小程式範本),在程式碼 <head> 區段內(</b:skin> 標籤後、</head> 標籤前),塞入 Javascript 程式:

<script type='text/javascript'>
//<![CDATA[
<!-- Function used for generating the last update time for each post: showPostUpdateTime() -->
function showPostUpdateTime(json) {
  var updateTime = json.entry.updated.$t;
  var publishTime = json.entry.published.$t;
  if (updateTime.substr(0,10) != publishTime.substr(0,10))
    document.write(' | 更新於 '+updateTime.substr(0,10)+' '+updateTime.substr(11,5));
}
//]]>
</script>

說明一下,這段 Javascript 的工作原理是:先取得該文章的「發表時間」和「更新時間」,如果「日期」一模一樣,那麼就不顯示更新時間(因為我覺得,在發表文章的同一天內對內容做一點修改無可厚非,可能只是打錯字)。如果日期不一樣,那麼就顯示該文章最後更新的日期和時間。(如果要改顯示格式、內容和判斷規則的,自己修改這段 Javascript,不要再來找我客制化了!)

接下來,要把觸發以上 Javascript 的函式呼叫塞到原始碼裡,這裡主要也是決定這段更新時間要顯示的位置。以這的範例來看,我把最後更新時間放在「發表時間」的後面,而且,只有在顯示該篇文章全文的時候,才會顯示出來(所以首頁看不到,判斷規則可以參考這篇文章)。所以先找到顯示發表時間 (<data:post.timestamp/>) 的區段,插入紅色的那個程式:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
      <!-- Fixed for display post update time -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=showPostUpdateTime&quot;' type='text/javascript'/>
      </b:if>
    </b:if>
  </b:if>
</span>

那個 if 的判斷句就是檢查是不是「顯示文章全文」的狀態,如果到處都想看到「更新時間」,那麼把該 if 判斷拿掉就行了。

會想加這項資訊,主要也是想標示文章最後的更新時間,自己在整理筆記時,才知道上次更新的時間,閱讀時也能知道這篇是不是 Po 完就沒動過的舊文章,對於值得一看再看或會修改的文章,這項資訊很有參考價值,對於愛 Po 流水帳、或是 Po 完連自己都不一定會再看的 Blog 來說,這項功能就完全用不到囉~

回應: 23

Unknown 提到...

很實用的blogger hack 謝謝 Abin大大,小弟也來嘗試看看 ^^

Unknown 提到...

小弟按照Abin大大的教學已經成功修改好了,想再請教一下,如果想把修改時間highlight出來(加上顏色)的話,應該從哪邊著手修改呢?不好意思,又得麻煩您賜教了

通達人 提到...

請問一下:
我也是按照這個設定,沒想到我竟然發現我原本的時間就不會顯示了。
可是我實在找不出來到底是那裏設定有誤,可以請你幫忙一下嗎?
http://prudentman.idv.tw

Abin 提到...

To Acedia:
這一行是在顯示時間:
document.write(' | 更新於 '+updateTime.substr(0,10)+' '+updateTime.substr(11,5));
要 Highlight 時間,請自己決定樣式,在這個函式裡塞入標籤,例如時間要「變紅色」,那就:
document.write(' | 更新於 <span style="color: rgb(255, 0, 0);">'+updateTime.substr(0,10)+' '+updateTime.substr(11,5)+'</span>');

Abin 提到...

To 通達人:
我現在看到你的 Blog,原始碼裡有 Javascript、但沒有呼叫,而現在的狀況,就已經沒有顯示時間啊(原來有嗎?)!
上面提到的程式碼,要塞入樣板的只有「紅色」的部份,其他應該是本來就在那的,那些就是顯示發表時間的資料。
如果程式碼也在,請到設定裡,版面配置->網頁元素->編輯「網誌文章」模組,檢查裡面選取項目第三項「發表時間」有沒有被勾選。

Unknown 提到...

成功囉 ^^ 再次感謝Abin大大的指導 ~~

水瓶尤加利 / Eucaly61 提到...

感謝Abin大大的分享,
不過我的模版不大一樣, 發表時間之後還跟著:『意見數』 ,『此文章的連結』 等, 但稍微調整之後, 也成功囉~~

成果如下, 貼上來給和我有類似模版的人參考一下:

張貼者: xxx 位於 下午 12:54 0 意見 此文章的連結 mail
更新於:2009-03-15 13:01
標籤: xxx

水瓶尤加利 / Eucaly61 提到...

剛才看了一下自己 2007 的舊文, 有幾篇的更新時間顯示 2009-02-22 01:18, 但今年應該沒有更新這些文章...,
不確定是否在 Blogger 後台改標籤 或 是 feedburner 換網址等 ... 也會影響『更新時間』

Abin 提到...

To 水瓶尤加利:
只要動到 feed 內容的動作,更新時間就一定會變。像你說的改標籤,甚至是換作者、改標題、更新網址,這裡都算得上被更新,不單純只有「內容」更新才算。
至於 feedburner 換網址,你可以注意到我文章內抓更新時間是用 blogger 的內建 feed,不是被轉過的,所以更新 feedburner 是不受影響的。

Mochi 提到...

相當好用喔!感謝Abin的hacks。:) Blog內的Hacks幾乎都來自這裡呀!

Unknown 提到...

很棒的hack ^^

匿名 提到...

不好意思!
請問,只想顯示日期,不想顯示時間
要怎麼做?
另外,留言中,如果一般留言顯示時間
但作者留言只顯示日期,不顯示時間
要怎麼做?謝謝!

Abin 提到...

To 烏衣行:
文章更新時間的格式定義是在函式 showPostUpdateTime() 裡面 document.write 那一行產生的,第一個 updateTime.substr() 是日期,第二個 updateTime.substr() 就是時間了,拿掉就不顯示了。
留言只有作者不顯示時間比較麻煩,可以先參考這篇文章,在判斷是作者後,再對顯示的時間動手腳(<data:comment.timestamp/>)。

匿名 提到...

您真的很好心!

Frances 提到...

感謝Abin的分享...我想請問要是我想再sidebar新增一個如同[最新文章]feed的最近更新文章feed 要怎麼做呢? 不知Abin有沒想過?!

Abin 提到...

To Frances:
你的問題有點複雜,你應該先參考我這篇文章裡面的一些討論。首先是一個以上的 feed 模組要放在 sidebar 上,如果你用同一份程式碼,要做兩個模組,那麼可能會有函式和變數錯亂的狀況,建議你可以用一樣的程式碼,換掉函式名稱和變數名稱,那麼要跑兩個模組會比較沒問題。
第二個問題是「最近更新文章」,一般我們的 RSS feed 排列順序都是以 published time 來做,所以我在過濾「最新文章」時,時間都是用 timestamp=Post.published...,這時候就要改用 Post.updated... 了。

阿達瑪醫生 提到...

雖然不花俏,但是非常實用的功能;感謝您~

Peeress♥ 提到...

這功能真的很棒!!
我也成功的用在blog上,非常感謝哦^^

阿飛 提到...

To Abins:我也跟着做呢~ 但還沒有顯示呢,請指出錯在那裡,
先謝了!!!!!!!!!!

http://feiarfei.web.fc2.com/ "iframe了" http://fei-ar-fei.blogspot.com/

可以隱藏意見嗎??

阿飛 提到...

可以了可以了!!!
原來我測試了未更新過的文章...
謝謝你!!

Apple 提到...

TO Abin 您好!先跟您說聲謝謝,我是Blogger的新手,很多版面設計的學習都是來自於您這個網站,
我很想要有這個更新時間的功能,我的步驟是把您的那2段程式依您的位置說明複製貼上到我的文章網頁元素之HTML修改上,日期時間也確定有顯示(網誌文章的編輯中日期時間確定有勾選),可是我修改了文章後,還是沒有顯示更新時間,一直都只有發表的時間顯示而已,請問是因為我的 Javascript沒有呼叫出來嗎??還是跟文章的張貼選項的勾選有關?或者我貼的程式位置有錯誤? 麻煩您教導一下,因為我真的很想要有這個好用的功能,麻煩您了!謝謝~萬分感激

Unknown 提到...

426 直接偷了 Abin 大的文章:

http://hi.baidu.com/kiddvon/blog/item/69315866a8638f2caa184c2e.html

連結、圖片一起偷,大概是網頁程式碼直接複製吧~

髮客 提到...

感謝您!已安裝成功
想請教一下,如果我希望在特定一篇文章中指定位置加入此功能,我可以怎麼加入?
我嘗試過把"觸發Javascript 的函式"放到文章欲顯示的位置,也刪除判斷式,結果不行。
後來我將Javascript 程式及觸發Javascript 的函式放到文章,也是不行
麻煩Abin大解惑,謝謝您

張貼留言

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