[RoR]Rails套用Bootstrap Template

我用Rails在開發已經夭折的紅利積點系統時，花了不少時間研究Html5+Javascript+Css3，然而東拼西湊做出來的UI果然也不失所望長的很畸形，而且還不時發生一些讓人匪夷所思的問題，因此有了上次的教訓，我決定要先快速搞定前端，然後才能專心研究後端。在網路上google一下Web Theme就可以找到一堆免費或是付費的Web Theme，就算要付費通常也不會很貴(10~30美金)，裏面包含已經設計好的HTML5框架、Javascript、CSS3、Image、Fonts，算是相當的物美價廉，套用到開發中的專案時，會使得整個網站的檔次頓時提升了好幾個Level。

系統實作

• 以在Wrapbootstrap中的Flatty Admin為例，把Web Theme Template下載並解壓縮
• 建立rails project

rails new project_name

• 稍微整理一下rails自動生成的內容，這個步驟看個人的需求，像我曾經吃過Turbolinks的虧，所以會先把Turbolinks有相關的Code移除(Gemfile、application.js、application.html.erb)。
• Flatty Admin這個套件包含了bootstrap2跟3兩個版本，我是採用bootstrap3，所以把bs3/html中的所有檔案(包含Folder)複製到rails_project/public中
• 到這個階段，執行rails server後，應該可以看到完整的頁面了，但是這時看到的是public中的靜態頁面。
• 先把app/views/layouts/application.html.erb中的tag複製下來，然後要把public/index.html中的內容完整覆蓋到app/views/layouts/application.html.erb

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
    <%= csrf_meta_tags %>

• 待覆蓋完成後，再把之前先複製下來的tag貼到＜head＞…＜/head＞之間。
• 修改config/routes，加入路由

get 'home', to: 'application#home'

• 修改app/controllers/application_controller.rb，增加home method

def home
end

• 在app/views/中新增一個application的folder，然後再app/views/application/中新增一個home.html.erb
• 到這個階段，再次執行rails server後，在localhost:3000/home路徑下應該可以看到跟之前一樣的完整的頁面，但是這時看到的已經不是public中的index.html了，而是app/views/layouts/application.html.erb的內容

拆解Partial

• 利用瀏覽器的開發者工具(這裡用的是Chrome)，把會共用到的部份拆出來

• 在app/views/layouts/新增一個_header.html.erb，把application.html.erb中header的部份cut下來貼上，然後在application.html.erb的cut下來處增加

<%= render partial: 'layouts/header' %>

• 接下來依此類推，把navigator也從application.html.erb中也拆出來獨立為app/views/layouts/_nav.html.erb，並且在原位置新增

<%= render partial: 'layouts/nav' %>

• 最後把主要的內容Content拆出來，放在views/application/home.html.erb中，並在原位置新增。

<%= yield %>

• 這樣就完成初步的Web Theme Template套用作業，接下來可以把public/index.html刪除，以免日後link沒改到連到錯誤的Page引發誤會。

參考內容

• Refactor HTML Site Template to Ruby on Rails 1 of 3