ユーザーがデータを入力してページのテーマを変更できるようにする Rails アプリを作成したいと考えています。このようにして、選択したテーマに基づいてデータのスタイルを変えることができます。どうすればこれを行うことができますか?
- スタイルシートを変更しますか?
- 異なるクラス/要素を持つ 2 つの別個のビュー?
- クラス/ID/セレクターを動的に変更するだけですか?
- ?
ありがとう
ユーザーがデータを入力してページのテーマを変更できるようにする Rails アプリを作成したいと考えています。このようにして、選択したテーマに基づいてデータのスタイルを変えることができます。どうすればこれを行うことができますか?
ありがとう
サイトにテーマを設定する最も簡単な方法は、単に別のスタイルシートにリンクすることです。次のようなものを使用して、これを動的に行うことができます。
# 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 テーマ設定を開始できます。ある時点で、おそらく JavaScript と HTML レイアウトも必要になるでしょう。HTMLで次のようなことをする必要があることに気づき始めたら:
<% if current_theme == 'theme1' %>
<li>...
<% elsif current_theme == 'theme2' %>
<b>...
<% end %>
次に、より堅牢なテーマ フレームワークを実装します。
render_themed_partial
注:これはすべて静的テーマ用です。動的なテーマ (たとえば、管理者がログインしてスタイルシートまたは html を編集できる場所) の場合、データベースにテーマ情報を保存する必要があります。アーキテクチャによっては、一連の静的テーマを提供してから、データベースからスタイリング データを動的に取得する別のテーマを提供できる場合があります。ただし、その時点でCMSを開発しているため、この回答の範囲外です:)
テーマごとに異なるスタイルシートを作成し、小さな変更を加える場合は、すべてのスタイルシートに同じ変更を加える必要があります。それは本当に頭痛の種になるでしょう。別の方法は、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のみを変更する必要があります。