Railsアプリのテーマ

Question

ユーザーがデータを入力してページのテーマを変更できるようにするRailsアプリを作りたいと思います。こうして、彼らのデータは彼らが選んだテーマに基づいて異なるスタイルにすることができます。これをどうやってやりますか？

1. スタイルシートを変更しますか？
2. クラス/要素が異なる2つのビューがありますか？
3. クラス/ ids /セレクタを動的に変更するだけですか？
4. ？

おかげ

Answer 1

テーマに最も簡単な方法サイトは単に別のスタイルシートにリンクすることです。

# in app/views/layouts/application.html.erb 
<%= stylesheet_link_tag :application %> 
<%= stylesheet_link_tag #{current_theme} %> 

# in app/helpers/application_helper 
def current_theme 
    # You'll have to implement the logic for a user choosing a theme 
    # and how to record that in the model. 
    # Also, come up with a better name for your default theme, like 'twentyeleven' ;) 
    current_user.theme || 'default' 
end 

次に、いくつかのテーマのマニフェストを作成することができます。たとえば、あなたの資産のディレクトリには、このような何かを見ることができます：

• アプリ/資産/スタイルシート
  • application.css
  • buttons.css
  • テーマ1/
    • index.css
    • buttons.css
  • t
  • buttons.css

index.css heme2/

• これは、あなたが純粋なCSSのテーマを使い始めるだろう。ある時点で、javascriptとhtmlのレイアウトも必要になるでしょう。あなたのhtmlでこのような何かをする必要性を見つける起動すると：テーマ別
  • 名前空間、あなたのHTMLテンプレートを（例えばアプリ/ビュー：

    <% if current_theme == 'theme1' %> 
        <li>... 
    <% elsif current_theme == 'theme2' %> 
        <b>... 
    <% end %> 
    

    それは、より堅牢なテーマフレームワークを実装してみましょう/themes/theme1/users/index.html.erb）、デフォルトの

  • の代わりにテーマバージョンをレンダリングします（例：app/views/themes/theme1/users/_form.html.erb）。 render_themed_partial
  • simiのようなヘルパーメソッドを追加する上記のアプローチにLARが、テーマが非常に大きい取得するときにエンジン

  注レールとして、あなたは自分の宝石にそれらを置くことを検討する必要があります。これは、静的なテーマをすべてですを。動的テーマ（管理者がログインしてスタイルシートやHTMLを編集できる場所など）では、テーマ情報をデータベースに保存する必要があります。アーキテクチャに応じて、静的テーマのセットを提供し、データベースからスタイリングデータを動的に取得する別のテーマを提供することができます。しかし、その時点でCMSを開発しているので、この答えの範囲外です。

Answer 2

テーマごとに異なるスタイルシートを作成し、小さな変更を加えた場合、同じものを作成する必要がありますすべてのスタイルシートを変更します。それは本当に頭痛になるでしょう。別の方法は、SASSの概念（ミックスイン）を使用することです。

ことはあなたのGemfileに

gem 'sass-rails' 

を追加し、その後

bundle install 

は今、あなたは1つのSCSSファイルで、あなたのCSSスタイルを持っている必要があります。 basic_styles.scss

$font_color: #565656; 
$font-size: 13px; 
$success-color: #088A08; 
$error-color: #B40404; 
@mixin basic_styles($dark_color,$light_color,$bullet_image) 
{ 
.footer 
    { 
    background-color: rgba($dark_color,0.9); 
    color: $light_color; 
    text-align: center; 
    position: fixed; 
    bottom:0; 
    left:0; 
    width: 100%; 
    height: 15px; 
    border-top: 1px solid lighten($dark_color, 9%);  
    padding-left: 10px; 
    padding-right: 10px;  
    font-size: $font_size - 2; 
    } 
    h3,hr,a,input 
    { 
    color: $dark_color; 
    } 
    h3 
    { 
    margin-top: 2px; 
    margin-bottom: 2px; 
    } 
    hr { 
    border-color: lighten($dark_color, 30%) -moz-use-text-color #FFFFFF; 
    border-left: 0 none; 
    border-right: 0 none; 
    border-style: solid none; 
    border-width: 1px 0; 
    } 
    .btn 
    { 
    background-color: $dark_color; 
    border-color: darken($dark_color, 15%);  
    border-radius: 4px 4px 4px 4px; 
    border-style: solid; 
    border-width: 1px; 
    color: #FFFFFF; 
    cursor: pointer; 
    display: inline-block; 
    line-height: 18px; 
    padding: 3px 10px 3px 10px; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
    vertical-align: middle; 
    } 
    .btn:hover 
    { 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); 
    -webkit-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); 
    box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); 
    } 
    .success 
    { 
    color: $success-color; 
    } 
    .error 
    { 
    color: $error-color; 
    } 
} 

次にあなたがテーマの任意の数を作成することができます。例Theme_Blue.scss

@import "basic_styles"; 
$dark_color: #08c; 
$light_color: #FFFFFF; 
$bullet_image: 'bullet_blue.png'; 
@include basic_styles($dark_color,$light_color,$bullet_image); 

のために今すぐあなたのhtmlに

​​

は青い色でbasic_styles.scssに指定されているすべてのCSSクラスを使用します。

Theme_Blue.scssのようなテーマファイルをいくつでも追加できます。 そして、このように

<%= stylesheet_link_tag current_user.theme %> 

に変更するには、任意の変更のためにのみbasic_styles.scssを変更する必要があります。

Answer 3

私はChamnapの答えからエッセンスを抽出することができました（それは何らかの理由でうまくいかず、おそらくRailsのバージョンでしょうか？）。あなたがここでそれをよく読んですることができます

class ApplicationController < ActionController::Base 
    layout :layout_selector 

    def layout_selector 
    # puts "*** layout_selector #{session.to_json}" 
    name = ['bootstrap', 'mytheme'][session[:theme].to_i] 
    # puts "*** loading theme #{name}" 
    prepend_view_path "app/themes/#{name}/views" 
    name 
    end 

：

• http://guides.rubyonrails.org/layouts_and_rendering.html#finding-layouts
• http://apidock.com/rails/AbstractController/Layouts/ClassMethods/layout

をあなたはおそらく、資産パスとプリコンパイルリストに追加する必要があります（または、他themeメソッドを使用せずにgemを使用してください）。

Dir.glob("#{Rails.root}/app/themes/*/assets/*").each do |dir| 
    config.assets.paths << dir 
    end 

    config.assets.precompile += [ Proc.new { |path, fn| fn =~ /app\/themes/ && !%w(.js .css).include?(File.extname(path)) } ] 
    config.assets.precompile += Dir["app/themes/*"].map { |path| "#{path.split('/').last}/all.js" } 
    config.assets.precompile += Dir["app/themes/*"].map { |path| "#{path.split('/').last}/all.css" } 

テーマ名がサブディレクトリにあるJSとイメージを覚えておいてください。これらはサーバ上では別々のブラウザとキャッシュになるかもしれませんが、/images/logo.pngは両方のテーマで同じように見えます。したがって、/images/theme1/logo.pngと/images/theme2/logo.pngを使用する必要があります。