Timeline JS 入門,用 Google 試算表做網頁時間軸

無意間發現 Timeline JS 這個利用 Google 試算表製作時間軸的工具,不僅簡單又令人驚艷,還支援 Twitter、Flickr、Google Maps、YouTube、以及 Wikipedia 等媒體。這篇是給有興趣的朋友參考的入門文章。

Timeline and Spreadsheet

上圖的上半部分是時間軸成品,下半部分則是編輯用的試算表;試算表首列標題上的各顏色區塊,分別對應時間軸上的區塊。這邊是用官方提供的試算表範本下去改的。

有幾個欄位需要特別提一下。首先,Text(內容)是支援 html 碼的,因此可以寫連結、放圖片等。第二,Type(類型)有 title 和 era 兩種選擇,title 就是第一張投影片、類似封面,而 era 看簡介是不會顯示媒體、可是這邊試過的結果是整個事件都不會顯示;只是普遍來說不會用到 era,一般事件也不用選 Type。第三,Tag(標籤)會對應到時間軸上,一個時間軸最多支援到六個標籤。

發佈試算表

試算表編輯完成後,點選「檔案>發佈到網路…」按下「開始發佈」即會出現上圖的視窗,我們要用的就是反白的那串網址。

編輯選項

我們只要將網址貼到 Timelime JS 網站內、第三步驟的 Google Spreadsheet URL 區塊內,再選擇編輯上圖中的選項即可。關於 Map Type(地圖的顯示樣式),可以參考 maps.stamen.com。Hash Bookmarks 則是會在頁面網址上加上號碼,方便閱覽者書籤,例如時間軸是放在 http://example.com/ 這個頁面上,切到第三張投影片時,網址就會變成 http://example.com/#3。另外必須提醒,勾選 WordPress Plugin 有個 bug,就是時間軸程式碼的「高度」會變成「寬度」、「寬度」則不會顯示,要自己手動修改。

總之,下面就是這邊做出來的時間軸了。有興趣看看其他時間軸工具的,可以參考 Inside 硬塞的網路趨勢觀察「時間軸網站大集合與網頁製作元件」這篇文章。至於 WordPress 用的外掛,請到 Knight Lab Timeline 的頁面下載安裝囉!

分類:網站網誌