css - Rails アプリのテーマ

Question

ユーザーがデータを入力してページのテーマを変更できるようにする Rails アプリを作成したいと考えています。このようにして、選択したテーマに基づいてデータのスタイルを変えることができます。どうすればこれを行うことができますか？

スタイルシートを変更しますか?
異なるクラス/要素を持つ 2 つの別個のビュー?
クラス/ID/セレクターを動的に変更するだけですか?
?

ありがとう

score 14 · Accepted Answer

サイトにテーマを設定する最も簡単な方法は、単に別のスタイルシートにリンクすることです。次のようなものを使用して、これを動的に行うことができます。

# 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

次に、テーマのいくつかのマニフェストを作成できます。たとえば、assets ディレクトリは次のようになります。

アプリ/アセット/スタイルシート
- アプリケーション.css
- ボタン.css
- テーマ1/
  - index.css
  - ボタン.css
- テーマ2/
  - index.css
  - ボタン.css

これにより、純粋な CSS テーマ設定を開始できます。ある時点で、おそらく JavaScript と HTML レイアウトも必要になるでしょう。HTMLで次のようなことをする必要があることに気づき始めたら：

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

次に、より堅牢なテーマフレームワークを実装します。

HTML テンプレートをテーマ (例: app/views/themes/theme1/users/index.html.erb) で名前空間化し、デフォルトの代わりにテーマバージョンをレンダリングします。
テンプレートによるパーシャルのみの名前空間 (例: app/views/themes/theme1/users/_form.html.erb) のようなヘルパーメソッドを追加します。render_themed_partial
上記のアプローチと似ていますが、テーマが非常に大きくなった場合は、それらを独自の gem にレールエンジンとして配置することを検討する必要があります。

注:これはすべて静的テーマ用です。動的なテーマ (たとえば、管理者がログインしてスタイルシートまたは html を編集できる場所) の場合、データベースにテーマ情報を保存する必要があります。アーキテクチャによっては、一連の静的テーマを提供してから、データベースからスタイリングデータを動的に取得する別のテーマを提供できる場合があります。ただし、その時点でCMSを開発しているため、この回答の範囲外です:)

score 10 · Accepted Answer

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

Gemfileを追加します

gem 'sass-rails'

それから

bundle install

次に、cssスタイルを1つのSCSSファイルに含める必要があります。 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で

<%= stylesheet_link_tag "Theme_Blue" %>

basic_styles.scssで指定されたすべてのcssクラスを青色で使用します。

Theme_Blue.scssのような任意の数のテーマファイルを追加できます。そしてに変更します

<%= stylesheet_link_tag current_user.theme %>

このように、変更を加えるには、 basic_styles.scssのみを変更する必要があります。

css - Rails アプリのテーマ

3 に答える 3

Related

Reference