JS / 在Blogger增加”文章行事曆”功能

嘗試在blogger新增文章行事曆

希望樣式類似triohobby網站

不過不是自己寫程式…利用關鍵字去搜尋

發現blogger似乎在10多年前比較蓬勃發展

因為相關的討論文章都頗具歷史

備註:目前用的佈景主題也是在2015年發布的…

回到主題,在這篇Archive Calendar Widget For Blogger提供的樣式是符合需求

透過網頁的說明,修改程式碼中的必要設定之後,再加入網站之中對應位置

步驟依序如下:

1.先在版面配置新增的網誌存檔小工具,設定:樣式-條列、頻率-每天、取消 -先顯示最舊的文章

在主題>>自訂>>編輯HTML>>取得b:widget的id

2.修改widget calendar的html程式碼b:widget id (這樣js程式碼才能抓到)

3.再依序將js css html程式碼貼到對應的位置

widget calendar js程式碼–>  /head  前

widget calendar css程式碼 –>  ]]></b:skin>前

widget calendar 程式碼.–>取代原本的 網誌存檔小工具的 widget程式碼

備註:由於這個程式碼是在2012年發布的,當時https應該還沒有很廣泛地被使用

所以這個程式碼有1個地方需要將http改成https,不然會發生錯誤

script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';

這個是利用blogger的feeds來動態生成特定時間範圍內的文章資料,會是一個物件,將資料傳送到cReadArchive來處理

備註:這個文章行事曆調用了很多blogger feeds api,是很值得研究的範例

基本上,將程式碼加入網站之後就能夠顯示文章行事曆了

唯一的自訂功能是增加了在行事曆hilight今天日期

一開始是想用滑鼠事件來產生顯示文字的div

但是因為我新增的方式是透過迴圈逐一判斷日期與table td的關係

所以新增的滑鼠滑入事件是無法刪除的

原因是增加滑鼠事件的td其實在網頁重整之後,在記憶體層面而言是不同的物件了,所以刪除的功能無法發揮作用

因此改成在td增加title屬性

我新增的程式碼範例如下

See the Pen
blogger行事曆 highlight today 4使用td的title屬性 合併 V2
by 莊幸諺 (@trico109748007)
on CodePen

 

由於文章行事曆的table是程式進行到cReadArchive這個函數之後才產生的

(接收動態生成文章資料的script所傳遞的資料)

所以我把新增的程式碼寫在這個函數之內

最後呈現的樣式