2016年7月20日 星期三

如何幫Rails Application套版

我在去年曾經寫過一篇幫Rails網站套版的文章(傳送門),基本上那篇文章描述的方法並不算正確(面壁中),而且那個版也有針對Rails開發gem,所以使用的方法並不是一般套版的方式。只是市面上有許多漂亮還免費的bootstrap版可以用,卻又沒有gem可以用的,所以在參考一些文章後補寫一篇贖罪文正確的套版方式。



套版開始

1.首先你要先有一個bootstrap 版,可以在Google上隨便找就可以找到一堆免費的版,真的要精緻一些的可以上wrapbootstrap上面買,折合台幣大約300~500元,也不算貴。本文使用的版是ALMSAEED STUDIO所推荐的10 Free Responsive Bootstrap Templates For 2016中的Photography。
2.接著你也要有一個要套版的Rails Application,如果在開發時就已經有套basic bootstrap,那會省事很多。

3.在把下載回來的版解壓縮後,裡面會包含CSS、Javascript、圖檔跟幾個拿來demo的html,通常我會習慣把原本的Template完整的還原在自己的Web App上,而不是先挑自己想要在實作,這是因為一方面我對Fontend並沒有很熟悉,沒有信心只套部份的樣板,另一方面也可以互相比較原生版與套版後的差異。

4.在原生的rails app/vendor/assets下會有javascripts與stylesheets兩個folder,這裡我針對要套版的template在vendor/assets/下新增了一個custom的folder(這名稱沒有固定,可以隨意指定),然後將素材複製到custom中。

5.因為rails會將/app/assets/與/vendor/assets/的下一層自動納入assets path,所以在上一個步驟建立的custom會被include進來,
可以在console使用Rails.application.config.assets.paths指令來檢視

6.所以接下來只要把css跟javascript引用近來就可以了,在app/assets/javascripts/application.js中添加
//= require gallery/jquery.blueimp-gallery.min.js
//= require mobile/touchSwipe.min
//= require respond/respond
//= require wow/wow.min
//= require script
在app/assets/stylesheets/application.css中添加
@import "animate/animate";
@import "animate/set";
@import "gallery/blueimp-gallery.min";
@import "style";

7.接下來我的作法會把template中的html code貼上來,開始檢視看看哪裡有沒套上來的,大多會是css參考的路徑或是圖片路徑錯誤,修正後在跟原template比對,確認沒問題後就可以開始加工版面了。

套版前

套版後


參考連結


沒有留言: