原網址： http://blog.bro.tw/post/2016/02/04/472931

記得一個不錯的比喻提到，給網站包裝就像面試要穿衣服一樣，別裸奔就出去見人啊～所以，要把自己的網站demo給別人看之前，總是要替網站穿個衣服，最好用Landing page來包裝一下啊～ 所以，我就在 網路上挑選了一個喜歡的樣板，把它套到自己的網站上當landing page，順便了解前端的一些操作，包括rails assets的一些使用方法。這篇就是紀錄我整個套板解雷的過程。 正文開始 找到並下載喜歡的樣板

我是到startbootstrap內，挑選到自己喜歡的樣式並下載，而我上圖中是修改自這款Agency。 把它塞進rails view

解壓縮檔案後，我們把index.html的body中整塊複製貼到我們rails的view當中，接下來就要搞定三個部分：stylesheets、javascripts、images。 stylesheets

css 上面截圖link的部分，我們知道它link進來的”順序”。

Bootstrap，這部分用rails gem bootstrap-sass。
agency，要把它放到我們assets/stylesheets的路徑下，還要把它import進來。
font-awesome，這部分有rails gem font-awesome-rails代替。
google-fonts，外部的字型連結就不用管它了。

app/assets/stylesheets/application.css.scss

/* *= require_tree . *= require_self */ @import “bootstrap”;

@import “bootstrap-sprockets”;

@import “landing/agency”;

@import “font-awesome”;

我agency.css放置的路徑在app/assets/stylesheets/landing/， 要注意！這import的順序會有影響，但影響在哪？ 下圖左：把agency擺到bootstrap上面，部分格式就跑掉了。 螢幕快照 2016-02-04 下午1.53.28.png 這部分被順序影響，是因為它們在某些格式的設定有重複的情況，後者會覆蓋掉前者。 這邊弄好，基本上畫面的格式就完成了，只剩動態的畫面以及圖片都找不到。 javascripts

js js file 這邊有load一個jquery-easing，我用rails gem jquery-easing-rails。 把一些要load進來的js全部丟到javascripts的目錄下即可，這邊比較不會有像css有重複定義的問題。 app/assets/javascripts/application.js

//= require jquery //= require bootstrap-sprockets //= require jquery_ujs //= require jquery.easing //= require turbolinks //= require_tree .

images

上面兩個步驟完成後，接著就是把圖片整組複製到assets/images目錄下，最後就是換掉view裡面的連結： 例如使用來替代原本的img tag：<%= image_tag “landing/portfolio/roundicons-free.png”,class: “img-responsive” %>。 img file 這也有一個地方要注意！就是藏在css裡面的圖片路徑也要記得換掉，agency.css當中就有兩個圖片要更改路徑：我把agency.css改成agency.css.erb，讓它也能使用image_tag來更換路徑。 layout

我把landing page與我們一般的頁面分開，並把外部的一些link也都補進來，例如google-fonts的部分。 app/controllers/pages_controller.rb

class PagesController < ApplicationController layout ‘landing’,only: :landing def index end def landing end end

app/views/layouts/landing.html.erb

<!DOCTYPE html>

Bro.tw ｜ <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= yield %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

開始到完成，會發現整個過程不是很難，但其實剛開始解壓縮跑出一堆檔案我有被嚇到。想說它為什麼有這麼多檔案，但開始把它抓進來用，便發現沒有那麼多檔案需要用，檔案中大都是備份的檔案，真正需要的就是css,js,img的部分。在修改assets/stylesheets時，才知道import的順序會有影響，原先都是讓它自己抓根目錄下面的css，但畫面長得不一樣，後來強制使用import來給它順序，結果才正確。最後，在修改圖片路徑的部分，也很容易miss掉放在css檔案中的路徑，透過修改路徑的過程中才知道可以把css改成css.erb用helper給它路徑。