Esiste un "Rails Way" per piegare un tema di Bootstrap di Twitter in un'applicazione Rails 3?

Question

Ho acquistato un bell'aspetto di Twitter con Bootstrap online che renderà più piccante la mia applicazione Rails 3.2.8. Il pacchetto contiene le seguenti directory:

/css 
/img 
/js 

Naturalmente questi file avranno collegamenti relativi tra loro. Esiste un modo standard per integrare questo tipo di materiale nella pipeline degli asset, oppure è ancora prassi normale metterlo in pubblico?

Answer 1

Si desidera utilizzare la pipeline di asset. Tutto si sta muovendo in quella direzione e in realtà non è più difficile (tranne quando lo è). I tuoi file andranno nella directory /app/assets/.

Per il css, dovresti essere in grado di rilasciarlo a destra in app/assets/stylesheets/, solo assicurati che bootstrap sia incluso per primo. Ci sono diverse gemme che rendono facile includere i file di bootstrap. Io uso bootstrap-sass, ma si potrebbe anche provare twitter-bootstrap-rails (dipende se si desidera il supporto sass o no). Con uno dei due, guarda le letture a cui mi sono collegato dato che includono alcuni dettagli utili che vorrai conoscere per ogni gemma.

Per il javascript, dovrebbe essere più o meno la stessa cosa. Nel file application.js, assicurati che bootstrap includa prima del//= require_tree . nel caso in cui il tema aggiunga qualsiasi javascript personalizzato. Entrambe le gemme che ho elencato prima includono anche i file javascript per il bootstrap. Puoi leggere la loro documentazione per vedere i dettagli (è quasi esattamente la stessa cosa normale per entrambe le gemme).

Per quanto riguarda le immagini, inseriscile nella directory e dovrai modificare leggermente i fogli di stile perché funzioni. Quando un'immagine viene dichiarata nel foglio di stile, ad esempio background: url('./images/bg.jpg');, sarà necessario utilizzare l'helper image_path, quindi sembrerebbe background: url(image_path('bg.jpg'));. Si noti che ho appena incluso il nome dell'immagine. La pipeline delle risorse analizzerà automaticamente questo per il percorso corretto per te.

Se il tema include tutti i font personalizzati, farete la stessa di immagini, ad eccezione utilizzando il asset_path aiuto in questo modo nella tua @ dichiarazione font-face:

url(asset-path('museo700.ttf', font)); 

aiutanti Ci sono anche specifici per tipo voi può usare, come font-path, image-path, ecc. O asset-path con un tipo dichiarato o l'helper specifico del tipo funzionerà, basta essere coerenti con quale si utilizza in modo da non generare confusione.

È possibile posizionare caratteri personalizzati in una directory come app/assets/fonts/. La pipeline degli asset li troverà automaticamente, poiché si trovano nella directory degli asset.