嘗試在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所傳遞的資料)
所以我把新增的程式碼寫在這個函數之內
最後呈現的樣式