Rails应用程序中的主题

Question

我想创建一个Rails应用程序,让用户输入数据,然后允许他们更改页面的主题.这样,他们的数据可以根据他们选择的主题进行不同的样式设置.我该怎么做呢？

1. 更改样式表？
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
  • THEME1 /
    • index.css
    • buttons.css
  • THEME2 /
    • index.css
    • buttons.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
• 类似于上面的方法,但是当主题变得非常大时,你应该考虑将它们作为rails引擎放入自己的宝石中

注意:这是静态主题的全部内容.对于动态主题(例如,管理员可以登录和编辑样式表或html),您必须将主题信息存储在数据库中.根据您的体系结构,您可以提供一组静态主题,然后是另一个动态从数据库中抓取样式数据的主题.那时,你正在开发一个CMS,所以它超出了这个答案的范围:)

Answer 2

如果我们为每个主题创建不同的样式表并进行小的更改,那么我们需要在所有样式表中进行相同的更改.这将是一个头痛.替代方法是使用SASS概念(mixins).

添加你的Gemfile

gem 'sass-rails'

然后

bundle install

现在,您需要将css样式放在一个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文件,如Theme_Blue.scss.并改为

<%= stylesheet_link_tag current_user.theme %>

这样,您只需修改basic_styles.scss即可进行任何修改.