Rails 앱의 테마

Question

사용자가 데이터를 입력하고 페이지의 테마를 변경할 수있게 해주는 Rails 앱을 만들고 싶습니다. 이렇게하면 자신이 선택한 주제에 따라 데이터의 스타일을 다르게 지정할 수 있습니다. 이 일을 어떻게 하죠?

1. 스타일 시트를 변경 하시겠습니까?
2. 클래스/요소가 다른 두 개의 개별 뷰가 있습니까?
3. 동적으로 클래스/ID/선택기를 변경 하시겠습니까?
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
  • THEME1/
    • index.css
    • buttons.css
  • t heme2/
    • index.css
    • buttons.css

이것은 당신이 순수 CSS를 테마로 시작하는 것입니다. 어느 시점에서 당신은 아마 그들에게 자바 스크립트와 HTML 레이아웃을 원할 것입니다. 당신은 당신의 HTML에서 같은 것을 할 필요가 찾기 시작하는 경우 :

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

다음은보다 강력한 테마 프레임 워크를 구현하는 시간 :

• 네임 스페이스 테마하여 HTML 템플릿 (예 : 응용 프로그램/전망
  /themes/theme1/users/index.html.erb) 기본이 아닌
• 대신 테마 버전을 렌더링합니다 (예 : app/views/themes/theme1/users/_form.html.erb). render_themed_partial
• simi와 같은 도우미 메서드를 추가하십시오. 위의 방법 고맙다,하지만 테마가 매우 큰 얻을 때 엔진

주 레일, 당신은 자신의 보석에 넣어 고려해야한다 : 이것은 정적 테마에 대한 모든 것입니다합니다. 관리자가 로그인하여 스타일 시트 또는 HTML을 수정할 수있는 동적 테마의 경우 데이터베이스에 테마 정보를 저장해야합니다. 아키텍처에 따라 정적 테마 세트를 제공 한 다음 데이터베이스에서 스타일 데이터를 동적으로 가져 오는 또 다른 테마를 제공 할 수 있습니다.이 시점에서, 당신은 CMS를 개발하고 있으므로이 답변의 범위를 벗어납니다.

Answer 2

각 테마마다 다른 스타일 시트를 만들고 작은 변화를 만들면 같은 것을 만들 필요가 있습니다 모든 스타일 시트를 변경하십시오. 그것은 정말로 아프다. 다른 방법은 SASS 개념 (mixins)을 사용하는 것입니다.

는

bundle install 

는 이제 하나 개의 SCSS 파일에 CSS 스타일을 가질 필요가

gem 'sass-rails' 

당신의 Gemfile

에 추가합니다. 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; 
    } 
} 

은 그럼 당신은 테마의 수를 만들 수 있습니다. 당신의 HTML에서 지금 예 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); 

를 들어

<%= stylesheet_link_tag "Theme_Blue" %> 

는 블루 색상으로 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 방법을 사용하지 않고 보석 사용).

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을 사용해야합니다.