自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛

雖然時間軸的效果看過不少網頁使用，不過倒是很少看到部落格站長放在文章內。這次接到的需求是，案主希望將單車行旅的圖文經歷，版面用時間軸效果串起來。

於是研究了相關的外掛，同時也要顧及手機的 RWD 效果，請見本篇的心得整理。

點此看範例網頁

(圖片出處: eeyellow-Timeline)

一、時間軸外掛

以下這個頁面可看到各式各樣的時間軸效果：

• Free jQuery Timeline Plugins

在挑選上可注意的地方：

• 如果是部落格使用，比較適合挑選垂直方向的外掛
• 有的外掛將時間軸擺中間，讓顯示的項目一左一右依序排列，版面比較好看，適合沒有側邊欄的網站
• 如果有側邊欄的話，由於文章區塊的寬度受限，比較適合只有單邊顯示的時間軸
• 如果要考慮手機上的效果，最好注意外掛有沒有支援 RWD

二、eeyellow.Timeline

1. 外掛官網

本篇介紹的時間軸外掛特點如下：

• 介紹及下載網址：Responsive Timeline Plugin With jQuery And Bootstrap - eeyellow.Timeline
• 支援 RWD 效果
• 支援輪播效果
• 點擊標題可收合內容

標題收合後的效果像下圖這樣。




介紹網頁包含下載、DEMO 連結，也有安裝操作說明。但你需要有網頁空間，才能依照英文說明內容成功安裝。

或是也可依照以下我整理後的中文流程來進行。


2. 安裝方式

由於時間軸多半不會使用輪播，因此我的安裝方式去除了輪播功能。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

安裝方式以 Blogger 為例，請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'></link>

<!--時間軸 js/css, Copyright (c) 2016 eeyellow-->
<style>
.VivaTimeline dl{position:relative;top:0;padding:20px 0;margin:0}.VivaTimeline dl:before{position:absolute;top:0;bottom:0;left:50%;z-index:1;width:2px;margin-left:-1px;content:'';background-color:#ccd1d9}.VivaTimeline dl dt{position:relative;top:30px;z-index:2;width:120px;padding:3px 5px;margin:0 auto 30px;font-weight:400;color:#fff;text-align:center;background-color:#aab2bd;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px}.VivaTimeline dl dd{position:relative;z-index:2}.VivaTimeline dl dd .circ{position:absolute;top:40px;left:50%;z-index:2;width:22px;height:22px;margin-left:-11px;background-color:#4fc1e9;border:4px solid #f5f7fa;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.VivaTimeline dl dd .time{position:absolute;top:31px;left:50%;display:inline-block;width:100px;padding:10px 20px;color:#4fc1e9}.VivaTimeline dl dd .events{position:relative;width:47%;padding:10px 0 0;margin-top:31px;background-color:#CCC;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px}.VivaTimeline dl dd .events:before{position:absolute;top:12px;width:0;height:0;content:'';border-style:solid;border-width:6px}.VivaTimeline dl dd .events .events-object{margin:0 auto}.VivaTimeline dl dd .events .events-header{min-height:30px;line-height:20px;text-align:center;font-size:16px;font-weight:bold;cursor:pointer}.VivaTimeline dl dd .events .events-body{overflow:hidden;zoom:1;background-color:#EEE;padding:10px}.VivaTimeline dl dd .events .events-body .row{display:none}.VivaTimeline dl dd .events .events-body .events-desc{text-indent:2em;padding:0 15px}.VivaTimeline dl dd .events .events-footer{text-align:center}.VivaTimeline dl dd .events .events-footer ol{list-style:none;margin:0 auto;padding:0}.VivaTimeline dl dd .events .events-footer ol li{background:#32b487;border-radius:5px;margin:10px;display:inline-block;width:10px;height:10px;cursor:pointer}.VivaTimeline dl dd .events .events-footer ol .active{transform:scale(2)}.VivaTimeline dl dd.pos-right .time{margin-left:-100px;text-align:right}.VivaTimeline dl dd.pos-right .events{float:right}.VivaTimeline dl dd.pos-right .events:before{left:-12px;border-color:transparent #CCC transparent transparent}.VivaTimeline dl dd.pos-left .time{margin-left:0;text-align:left}.VivaTimeline dl dd.pos-left .events{float:left}.VivaTimeline dl dd.pos-left .events:before{right:-12px;border-color:transparent transparent transparent #CCC}.VivaTimeline .carousel-indicators{bottom:0}@media screen and (max-width:767px){.VivaTimeline dl:before{left:90px}.VivaTimeline dl dt{margin:0 30px 30px}.VivaTimeline dl dd .circ{left:90px}.VivaTimeline dl dd .time{left:20px}.VivaTimeline dl dd.pos-left .time{padding:10px 0;margin-left:0;text-align:left}.VivaTimeline dl dd.pos-left .events{float:right;width:73%;margin-right:4%}.VivaTimeline dl dd.pos-left .events:before{left:-12px;border-color:transparent #CCC transparent transparent}.VivaTimeline dl dd.pos-right .time{padding:10px 0;margin-left:0;text-align:left}.VivaTimeline dl dd.pos-right .events{float:right;width:73%;margin-right:4%}/* .VivaTimeline dl dd .events .events-body{display:none}.VivaTimeline dl dd .events .events-footer{display:none}*/}
@media screen and (max-width:500px){.VivaTimeline dl dd.pos-left .events{float:right;width:63%;margin-right:4%}.VivaTimeline dl dd.pos-right .events{float:right;width:63%;margin-right:4%}}
</style>
<script>
//<![CDATA[
(function(e,b,a,f){var d="vivaTimeline";var c=function(h,g){this.target=h;this.carouselInterval;this.checkImgLoad;this.imgLoad=false;this._init(g);this._event()};c.options={carousel:true,carouselTime:10000};c.prototype={_init:function(h){var g=this;g.options=e.extend(true,{},c.options,h);g.target.find(".events-body").each(function(){var l=e(this).find(".row").length;if(l>1){var k="<ol>";for(var j=0;j<l;j++){k+="<li data-target='"+j+"'></li>"}k+="</ol>";e(this).siblings(".events-footer").html(k).find("li").first().addClass("active")}});g.target.find(".events-body").each(function(){e(this).find(".row").first().show().siblings().hide()});g.target.find("img").on("load",function(){g.target.find(".events-body").each(function(){var i=0;e(this).find(".row").each(function(){if(e(this).height()>i){i=e(this).height()}});e(this).find(".row").height(i)})})},_event:function(){var g=this;g.target.find(".events-header").click(function(){e(this).siblings(".events-body").slideToggle().end().siblings(".events-footer").toggle()});g.target.find(".events-footer li").click(function(){g._carousel(e(this))});if(g.options.carousel){g.carouselInterval=setInterval(function(){g._carousel()},g.options.carouselTime);g.target.find(".events").hover(function(){clearInterval(g.carouselInterval);g.carouselInterval=null},function(){if(g.carouselInterval==f){g.carouselInterval=setInterval(function(){g._carousel()},g.options.carouselTime)}})}},_carousel:function(h){var g=this;if(h==f){g.target.find(".events-footer .active").each(function(){var j;if(e(this).is(":last-child")){j=e(this).siblings().first()}else{j=e(this).next()}g._carousel(j)})}else{var i=h.data().target;h.addClass("active").siblings().removeClass("active");h.closest(".events-footer").siblings(".events-body").find(".row").eq(i).show().siblings().hide()}}};e.fn[d]=function(h,g){var i;this.each(function(){i=new c(e(this),h)});return this}})(jQuery,window,document);
//]]>
</script>
<!--時間軸 js/css-->
前 2 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery、Bootstrap，如果已經安裝過請刪除，以免重複安裝。


3. 執行程式碼

接著在範本中搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script>
//<![CDATA[
/*執行時間軸*/
$(".VivaTimeline").vivaTimeline();
//]]>
</script>
儲存範本即可。

三、時間軸內容 HTML 範例

在文章中或網頁上，要擺放的時間軸內容，請參考以下的 HTML 範例來修改：

<div class="VivaTimeline">
<dl>

<!--月份 1-->
<dt>Feb 2018</dt>

<!--左側文章 start-->
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Feb 20</div><!--填入日期-->
<div class="events">
<div class="events-header">Blogger 官方免費幫自訂網址升級 HTTPS！</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5CvoNvfGlWitRAm1TQiNl9Q6cELjD3Fjz7ZPkxfq36XRwOX96iVntSCJt7zgyCZ5SGcEY-9r_qfvqMuHa5-0JM0I4a8dW9W5voGEU5-e5g7ZVpEw5DPS5JS8X3DZRmNw2T8iwgFhuoEv/s1600/blogger-custom-domain-official-https-upgrade.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">這真的是最好的新年禮物了，過年前夕在「 FB 社團 」 +Vista Cheng 分享了「 Blogger站長看過來：自訂網域的網誌，也可以支援HTTPS囉 」 ，原來官方悄悄開始測試，可以讓自訂網域直接升級 HTTPS，這代表： 不用付錢，Blogger 免費提供我們網...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/02/blogger-custom-domain-official-https-upgrade.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--左側文章 end-->

<!--右側文章 start-->
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Feb 13</div><!--填入日期-->
<div class="events">
<div class="events-header">究竟 Blogger 會不會關閉？從 Google 商業經營的角度分析</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">Blogger 會不會倒閉，是使用者長期以來的擔憂。過去曾在「 Blogger 的未來 」發表過看法，不過曾有讀者看完，一段時間後仍提出相同的問題。我想，這件事除非有官方說詞，否則疑問不會有停止的一天。 然而，Google 官方有可能發佈這樣的聲明嗎？我想不會的，連 Yaho...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/02/blogger-custom-domain-official-https-upgrade.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--右側文章 end-->

<!--月份 2-->
<dt>Jan 2018</dt>

<!--左側文章 start-->
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Jan 30</div><!--填入日期-->
<div class="events">
<div class="events-header">部落格載入速度太慢，要如何判斷哪些外掛可以移除？</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShyphenhyphenl8IYzl9afIKz4Mn9h7yJAlqeQyM9tolYShyHkJlyjlhhYhb3ICuJzwwd2kj4IQEtTFdcy6oFSRRVxkO3LumgsANUjI4HieV2eQBEmT9rHEbCvXmxmI52A7XUeKYZGXYzpNeKdKj3q0/s1600/pagespeed-slow-remove-plugin.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">重視 SEO 的站長自然都會關注網頁的載入速度，因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章，有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高，以往就算請讀者看這些相關文章，一段時間後還是可能回頭問...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/01/pagespeed-slow-remove-plugin.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--左側文章 end-->

<!--右側文章 start-->
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Jan 17</div><!--填入日期-->
<div class="events">
<div class="events-header">從小編到總編之路﹍如何成為部落客中的佼佼者</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s780/how-to-become-top-blog-writer.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">前陣子這篇「 部落格從搜尋引擎而來的流量，是不會有感情的﹍找回經營網站的動力 」寫完後，有位美食部落格客戶，同時也算本站長期讀者，問了一些 SEO 問題。其實滿訝異的，既然是忠實讀者，想必知道我希望讀者將注意力放在 SEO 以外的地方。 瞭解她詢問的原因後，覺得這段對話可以看...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/01/how-to-become-top-blog-writer.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--右側文章 end-->

<!--月份 3-->
<dt>Dec 2017</dt>

<!--月份 4-->
<dt>Nov 2017</dt>
</dl>
</div>
修改說明：

• 需要顯示月份的地方，複製綠色註釋字串「月份」的下一行，並修改內容
• 需要顯示文章的地方，完整複製註釋「文章 start」~「文章 end」區間的 HTML 碼來修改
• 在藍字註釋「填入日期」那一行修改日期
• 在藍字註釋「填入標題」那一行修改標題
• 在藍字註釋「填入圖片網址」那一行修改 src="" 之間的圖片網址
• 在藍字註釋「填入描述」那一行修改描述內容
• 在藍字註釋「底部標題 」那一行修改 HTML 碼
• 不使用底部標題時，保留原本的字串 <div class="events-footer"></div> 即可

以上範例的效果，可前往 DEMO 頁面：

點此看範例網頁

更多 jQuery 相關外掛：